티스토리챌린지

올해 첫눈과 함께 오블완 챌린지 마지막 날을 맞이했네요!!!작년부터 기술 블로그를 운영해 와서 글을 쓰는 것 자체에는 큰 부담이 없었지만, “꾸준히” 3주간 블로그를 작성한다는 것은 조금 부담스럽게 느껴졌어요. 하지만 하루하루 쓰다 보니 어느새 3주가 흘렀고, 결국 챌린지도 성공했습니다! ㅎㅎ 짝짝짝 👏오늘은 마지막 날인 만큼, 오블완 챌린지가 저에게 어떤 의미였는지 정리해 보고 싶어요!  오블완 챌린지를 왜 도전하게 되었나 ? 올해 9월부터 본격적으로 취업 준비를 시작했어요. 졸업은 2023년에 했지만, 더 높은 목표를 위해 부트캠프를 수강하고, 여러 프로젝트를 진행하고, 자격증도 따고, 코딩 테스트 준비까지 하면서 준비 기간이 길어졌던 것 같아요. (사실 대학 시절에는 이 길이 나와 맞지 않다고 생..

Next.js 공식문서 6장 '데이터베이스 설정'을 따라하던 도중 여러 문제에 직면했다. 순조롭게 레포지토리 생성 및 vercel 배포까지 완료하였는데 데이터베이스를 연동하는 과정에서 에러가 발생해 이것 저것 찾아보면서 나와 비슷한 고민을 하고 있는 사람들을 위해 오늘 포스트를 작성해보겠다.  현재 공부중인 공식문서는 6장 데이터 베이스 설정이다. https://nextjs.org/learn/dashboard-app/setting-up-your-database Learn Next.js: Setting Up Your Database | Next.jsSetup a database for your application and seed it with initial data.nextjs.org 모두 순조롭게 깃허..

Next.js는 Link 컴포넌트를 제공하여 클라이언트 사이드 네비게이션을 가능하게 하며, 페이지 전환 시 사용자 경험을 대폭 향상시킵니다. 또한, 이번 학습에서는 활성화된 링크를 표시하는 방법도 함께 작성해보겠습니다.  1. Link 컴포넌트: 클라이언트 사이드 네비게이션기존 HTML의 태그를 사용하면 페이지 이동 시 전체 새로고침이 발생합니다. 하지만 Next.js의 Link 컴포넌트를 사용하면 클라이언트 사이드에서 페이지가 전환되며, 새로고침 없이 빠르고 매끄러운 전환이 가능합니다.import { UserGroupIcon, HomeIcon, DocumentDuplicateIcon,} from '@heroicons/react/24/outline';import Link from 'next/lin..

문제 설명리코쳇 로봇이라는 보드게임이 있습니다. 이 보드게임은 격자모양 게임판 위에서 말을 움직이는 게임으로, 시작 위치에서 출발한 뒤 목표 위치에 정확하게 멈추기 위해 최소 몇 번의 이동이 필요한지 말하는 게임입니다. 이 게임에서 말의 이동은 현재 위치에서 상, 하, 좌, 우 중 한 방향으로 게임판 위의 장애물이나 게임판 가장자리까지 부딪힐 때까지 미끄러져 움직이는 것을 한 번의 이동으로 정의합니다. 다음은 보드게임판을 나타낸 예시입니다. ("."은 빈 공간을, "R"은 로봇의 처음 위치를, "D"는 장애물의 위치를, "G"는 목표지점을 나타냅니다.) ...D..R .D.G... ....D.D D....D. ..D.... 이때 최소 움직임은 7번이며 "R" 위치에서 아래, 왼쪽, 위, 왼쪽, 아래, 오..

문제 설명 자연수 x를 y로 변환하려고 합니다. 사용할 수 있는 연산은 다음과 같습니다. x에 n을 더합니다 x에 2를 곱합니다. x에 3을 곱합니다. 자연수 x, y, n이 매개변수로 주어질 때, x를 y로 변환하기 위해 필요한 최소 연산 횟수를 return하도록 solution 함수를 완성해주세요. 이때 x를 y로 만들 수 없다면 -1을 return 해주세요. 제한사항 1 ≤ x ≤ y ≤ 1,000,000 1 ≤ n 입출력 예xynresult1040521040301254-1입출력 예 설명 입출력 예 #1 x에 2를 2번 곱하면 40이 되고 이때가 최소 횟수입니다. 입출력 예 #2 x에 n인 30을 1번 더하면 40이 되고 이때가 최소 횟수입니다. 입출력 예 #3 x를 y로 변환할 수 없기 때문에 -..

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등 강력한 기능들을 제공하며, 특히 레이아웃 구성과 페이지 작성을 간편하게 만들 수 있는 구조를 가지고 있습니다. 이번 글에서는 App Router를 통해 중첩 라우팅과 중첩 레이아웃을 활용한 페이지 구성 방법을 알아보겠습니다. 1. App Router란?Next.js 13+부터 도입된 App Router는 기존의 pages 디렉토리 대신, app 디렉토리를 사용하여 라우팅을 구성합니다. 이 새로운 라우팅 시스템은 파일 기반 라우팅을 유지하면서도 서버 컴포넌트와 클라이언트 컴포넌트를 쉽게 조합할 수 있게 해줍니다.App Router의 특징중첩 레이아웃(Nested Layout): 부모-자식 관계의 U..

1. 제네릭이란?제네릭은 다양한 타입 간 재사용성을 높이기 위해 사용하는 타입스크립트의 기능입니다. 코드를 작성할 때 미리 타입을 지정하지 않고, 필요한 시점에 타입을 결정하도록 하는 방식입니다. 2. 제네릭 사용법2-1. 함수의 제네릭제네릭을 함수에 적용하면, 다양한 타입의 매개변수나 반환 값을 처리할 수 있습니다.function getIdentity(value: T): T { return value;}// 사용 예시const num = getIdentity(42); // number 타입const str = getIdentity('Hello World'); // string 타입 2-2. 호출 시그니처의 제네릭호출 시그니처에 제네릭을 적용하면 함수의 타입을 사전에 정의하고 제네릭으로 유연성을 높일 ..

1. 교차 타입 (Intersection Types)교차 타입은 여러 타입을 결합하여 하나의 새로운 타입으로 만드는 기능입니다. 이 타입은 각 타입의 모든 멤버를 포함하므로, 여러 타입의 특징을 모두 만족해야 합니다. 이를 활용하면 기존 타입을 확장하거나 새로운 기능을 추가하는 데 유용합니다. & 연산자를 사용합니다.type ProductItem = { id: number; name: string; price: number;};type Discount = { discountAmount: number;};type ProductItemWithDiscount = ProductItem & Discount;const discountedProduct: ProductItemWithDiscount = { id..

1. enum이란?enum은 열거형 타입으로, 이름이 있는 상수들의 집합을 정의합니다. 이는 문자열이나 숫자 값을 명확하게 관리하고, 코드에서 의미를 부여하는 데 사용됩니다. 2. enum의 기본 사용법enum은 숫자 기반 열거형과 문자열 기반 열거형으로 나뉩니다.1 숫자 열거형 (Numeric Enum)숫자 열거형은 자동으로 0부터 시작하여 값이 1씩 증가합니다.enum Direction { Up, // 0 Down, // 1 Left, // 2 Right, // 3}console.log(Direction.Up); // 출력: 0console.log(Direction.Down); // 출력: 1console.log(Direction[2]); // 출력: "Left" (역방향..