전체 글

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" (역방향..

웹 성능을 최적화하는 것은 사용자 경험을 크게 향상시키고, 페이지 로딩 속도를 단축하며, SEO 성능을 높이는 데 중요한 역할을 한다. 특히 폰트와 이미지는 웹 페이지의 주요 리소스로 최적화를 통해 불필요한 네트워크 요청을 줄이고 렌더링 성능을 극대화 할 수 있다. Next.js는 이러한 최적화를 쉽게 수행할 수 있는 도구와 설정을 제공하여 개발자가 손쉽게 웹 성능을 개선할 수 있도록 돕는다. 이번 포스팅에서는 next.js에서 글꼴 및 이미지를 적용하는 방법에 대해 작성해보겠다.  1. 글꼴 적용하기 Next.js에서는 next/font 모듈을 사용하여 폰트를 쉽게 적용할 수 있다. 이 모듈은 Google Fonts와 같은 웹 폰트를 쉽게 통합할 수 있게 해주며, 폰트를 서버 측에서 로드하여 클라이언트..

문제 설명당신은 일렬로 나열된 n개의 집에 택배를 배달하려 합니다. 배달할 물건은 모두 크기가 같은 재활용 택배 상자에 담아 배달하며, 배달을 다니면서 빈 재활용 택배 상자들을 수거하려 합니다.배달할 택배들은 모두 재활용 택배 상자에 담겨서 물류창고에 보관되어 있고, i번째 집은 물류창고에서 거리 i만큼 떨어져 있습니다. 또한 i번째 집은 j번째 집과 거리 j - i만큼 떨어져 있습니다. (1 ≤ i ≤ j ≤ n)트럭에는 재활용 택배 상자를 최대 cap개 실을 수 있습니다. 트럭은 배달할 재활용 택배 상자들을 실어 물류창고에서 출발해 각 집에 배달하면서, 빈 재활용 택배 상자들을 수거해 물류창고에 내립니다. 각 집마다 배달할 재활용 택배 상자의 개수와 수거할 빈 재활용 택배 상자의 개수를 알고 있을 때..

문제 설명 어떤 물류 센터는 로봇을 이용한 자동 운송 시스템을 운영합니다. 운송 시스템이 작동하는 규칙은 다음과 같습니다.물류 센터에는 (r, c)와 같이 2차원 좌표로 나타낼 수 있는 n개의 포인트가 존재합니다. 각 포인트는 1~n까지의 서로 다른 번호를 가집니다.로봇마다 정해진 운송 경로가 존재합니다. 운송 경로는 m개의 포인트로 구성되고 로봇은 첫 포인트에서 시작해 할당된 포인트를 순서대로 방문합니다.운송 시스템에 사용되는 로봇은 x대이고, 모든 로봇은 0초에 동시에 출발합니다. 로봇은 1초마다 r 좌표와 c 좌표 중 하나가 1만큼 감소하거나 증가한 좌표로 이동할 수 있습니다.다음 포인트로 이동할 때는 항상 최단 경로로 이동하며 최단 경로가 여러 가지일 경우, r 좌표가 변하는 이동을 c 좌표가 변..

Next.js에서는 다양한 방법으로 스타일을 지정할 수 있습니다. 컴포넌트 스타일링부터 전역 스타일링까지 다양한 접근 방식을 지원하므로, 프로젝트의 필요에 따라 적절한 방식을 선택할 수 있습니다. 오늘은 Next.js에서 스타일을 적용하는 방법을 간단히 살펴보겠습니다. 1. CSS ModulesCSS Modules는 컴포넌트 수준의 스타일링을 위한 Next.js의 기본 옵션 중 하나입니다. 파일 이름을 .module.css로 지정하면, 해당 파일의 클래스가 컴포넌트에서만 적용되므로, 스타일의 충돌을 방지할 수 있습니다. 사용방법 1. styles 폴더에 Button.module.css 파일을 생성합니다./* styles/Button.module.css */.button { background-color..

오늘은 Next.js 를 처음 시작하는 사람들을 위한 블로그를 작성해 볼 것이다.그 전에 Next.js가 무엇인지, 왜 사용해야하는지부터 알아보자 !   Next.js란 ?Next.js는 React 프레임워크 위에 구축된 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 강력한 프레임워크.이는 성능 최적화, SEO 개선, 빠른 초기 로딩 속도, 그리고 사용자 경험 향상과 같은 장점을 제공합니다.  왜 Next.js가 필요한가?SEO 개선: 서버 사이드 렌더링을 통해 페이지가 미리 렌더링되어 검색 엔진이 더 잘 인식할 수 있습니다.빠른 로딩 속도: 코드 스플리팅을 통해 필요할 때만 필요한 자바스크립트를 로딩하므로 초기 로딩 속도가 빠릅니다.정적 및 동적 페이지 생성: 정적 사이트 생성으로..