전체 글

자식 컴포넌트로 props를 통해 필요한 값 전달하기 부모 컴포넌트인 Main에서 모바일 화면 여부, 이미지 주소와 캡션, 클릭 이벤트에 해당하는 값을 넘겨준다. export default function Main() { // ... const [showImage, setShowImage] = useState(false); const [imgSrc, setImgSrc] = useState(""); const [imgAlt, setImgAlt] = useState(""); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const isMobile: boolean = windowWidth < 630; // ... return ( {sho..

아이콘 컴포넌트 divdivdiv의 메인 화면 아이콘은 총 세 가지 종류(폴더, 이미지, 포춘쿠키)로 구성되어 있으며, 각각의 아이콘은 서로 다른 정보와 기능을 갖고 있다. 그러나 일부 스타일을 공유하고 있고, 더블 클릭 시 동작을 수행하며, 사용자가 원하는 위치로 드래그할 수 있다는 공통적인 특성이 있다. 따라서 이 아이콘들을 우선 하나의 컴포넌트로 묶은 뒤, 아이콘 상태를 개별적으로 관리해야 할 필요가 생겼다. 컴포넌트 이름은 DraggableComponent()로 지었다. function DraggableComponent(props: { className: string; path: string; type: string; title: TitleProps; width: number; height: nu..

Next.js는 기본적으로 SEO(검색 엔진 최적화)를 지원하도록 설계되어 있다. SEO는 웹 페이지를 검색 엔진에서 노출시키고 높은 순위로 노출되도록 최적화하는 작업을 의미한다. 이는 웹 사이트의 방문자 수를 증가시키고 검색 결과에서 더 많은 유기적인 트래픽을 유도할 수 있다. Next.js에서 SEO를 개선하는 방법은 다음과 같다: Head 컴포넌트 사용: Next.js에서 제공하는 Head 컴포넌트를 사용해 각 페이지의 head 섹션을 커스터마이징할 수 있다. 이를 통해 페이지의 메타 태그(meta tag), 제목(title), 설명(description), 키워드(keywords) 등을 설정할 수 있다. 서버 사이드 렌더링(SSR): Next.js는 기본적으로 서버 사이드 렌더링을 지원한다. 이는..

자바스크립트의 프로미스Promise는 비동기 처리에 사용되는 객체입니다. 비동기 처리는 특정 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말합니다. 프로미스는 이러한 비동기 처리를 더 효율적으로 처리하고 코드를 더 읽기 쉽게 만들어줍니다. 프로미스는 세 가지 상태를 가질 수 있습니다: 대기(pending): 비동기 처리가 완료되지 않은 상태로 초기 상태 이행(fulfilled): 비동기 처리가 성공적으로 완료된 상태 거부(rejected): 비동기 처리에 실패한 상태 비동기 처리가 완료되면 resolve(이행) 콜백을 호출해 성공적으로 처리된 결과를 전달합니다. 만약 작업에 실패하면 reject(거부) 콜백을 호출하고 실패 사유를 전달합니다. 프로미스는 다음과 같은 구조로 작성됩니다: c..

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. 해당 오류를 해결하기 위해 컴포넌트에서 key 속성을 제거하면 된다. key는 React에서 리스트를 렌더링할 때 각각의 요소를 구분하기 위해 필요하지만, DOM 요소에는 필요하지 않다.

// Test.tsx import { useState } from "react"; const Test = () => { const [click, setClick] = useState(0); // 클릭 수를 저장하는 상태 변수 function handleClick() { setClick(click + 1); // 클릭 수를 1 증가시킴 } return ( 버튼을 클릭하면 숫자가 변경됩니다 {click}번 클릭됨 {/* 클릭 수를 표시하는 버튼 */} ); }; export default Test; // App.tsx import React from "react"; import "./App.css"; import { Route, Routes } from "react-router-dom"; import Pos..

문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정답 function solution(s) { // 문자열 s를 배열 형태로 만든다 const sArr = s.split(""); // x의 초깃값은 s의 첫 글자로 설정 let x = s.substring(0, 1); let xCount = 0; let yCount = 0; let answer = 0; // sArr를 순회하며 조건에 따라 answer를 더한다 for (let i = 0; i < sArr.length; i++) { if (sArr[i] === x) { // 현재 글자와 x가 같으면 xC..

먼저 등장하는 walk(500), walk(300), walk(200) 호출에서는 각각 주어진 시간 동안 걷기를 시도했다는 메시지가 콘솔에 표시되지만, 네 번째 walk(700) 호출에서는 amount가 주어진 함수의 조건문에 걸어둔 500을 초과하기 때문에 "the value is too big"이라는 오류 메시지를 출력합니다. 비동기 처리 도중 오류가 발생했으므로 walk(400)은 호출되지 않아 이후 콘솔에는 아무런 메시지도 뜨지 않습니다. // 코드 - async/await 오류 발생 예시 function walk(amount) { return new Promise((resolve, reject) => { if (amount > 500) { reject("the value is too big");..

이 코드는 재귀적인 방법으로 최대공약수Greatest Common Divisor를 구하는 함수입니다. 이 함수는 유클리드 호제법Euclidean algorithm에 기반하여 작동합니다. 유클리드 호제법은 최대공약수를 구하는 방법 중 하나로, 재귀적인 나머지 연산을 통해 두 수의 최대공약수를 효율적으로 구하는 방법입니다. function gcd(a, b) { if (b === 0) { return a; // 만약 b가 0이면, a를 반환 } return gcd(b, a % b); // 재귀 호출을 통해 최대공약수를 구함 } 알고리즘은 다음과 같이 동작합니다: 두 수 a와 b를 입력받습니다. 만약 b가 0이면, a가 최대공약수이므로 a를 반환합니다. 그렇지 않은 경우, a를 b로 나눈 나머지를 구합니다. a..

문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 메모 이 코드는 입력된 숫자 n에 따라 nxn 크기의 2차원 배열을 생성하고, 시계방향으로 숫자를 채우는 함수이다. 우선, 크기 n의 2차원 배열 arr을 생성한다. 모든 요소는 0으로 초기화된다. num 변수를 1로 초기화한다. 이 변수는 배열에 할당될 증가하는 숫자를 나타낸다. 현재 행을 나타내는 row 변수와 현재 열을 나타내는 col 변수를 0으로 초기화한다. 이동 방향을 나타내는 direction 변수를 "right"로 초기화한다. 이 변수는 "right" (오른쪽), "down" (아래쪽), ..