전체 글

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" (아래쪽), ..

문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정답 // 배열의 각 쿼리에 대해 반복한다 // (짝수 인덱스인 경우) i를 2로 나눈 나머지가 0이면 arr 배열을 0부터 x까지 잘라낸다 // (홀수 인덱스인 경우) i를 2로 나눈 나머지가 0이 아니면 arr 배열을 x부터 끝까지 잘라낸다 function solution(arr, query) { query.forEach((x, i) => { i % 2 === 0 ? (arr = arr.slice(0, x + 1)) : (arr = arr.slice(x)); }); return arr; }

문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정답 function solution(a, b, c, d) { const numbers = [a, b, c, d]; // 주사위 숫자의 빈도수를 저장할 객체 생성 const dice = {}; // 주사위 숫자의 빈도수를 계산하여 객체에 저장 numbers.forEach(x => { dice[x] = (dice[x] || 0) + 1; }); // 주사위 숫자들을 숫자로 변환하여 배열로 저장 const keys = Object.keys(dice).map(Number); // 주사위 숫자들의 빈도수를 배열..