Next.js 13 내부의 앱 라우터는 페이지(page), 공유 레이아웃(layout) 및 템플릿(template)을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했습니다. 이 페이지는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다. 페이지(Pages) 페이지는 경로에 고유한 UI입니다. 페이지를 정의하기 위해 page.js 파일에서 컴포넌트를 내보내는 방식을 사용할 수 있습니다. 중첩된 폴더를 사용하여 경로를 정의하고, route와 page.js 파일을 사용하여 해당 경로에 대해 공개적으로 접근할 수 있도록 만들 수 있습니다. Good to know: 페이지는 항상 route subtree의 leaf 입니다. 그래서 컴포넌트 계층을 보면 페이지 컴포넌트가 가장 안쪽에 있는 ..
이 페이지는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다. Route 만들기 Next.js는 폴더가 경로를 정의하는 데 사용되는 파일 시스템 기반 라우터를 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. 경로 세그먼트를 공개적으로 액세스 할 수 있도록 특수 page.js 파일이 사용됩니다. 위 그림에서 /dashboard/analytics URL 경로는 해당 page.js 파일이 없기 때문에 공개적으로 액세스 할 수 없습니다. 이 폴더는 구성 요소, 스타일시트, 이미지 또는 기타 배치된 파일을 저장하는 데 사용할 수 있습니다. UI 만들기 각 경로 세그먼트에 대한 UI를 생성하기 위해 특별..
모든 어플리케이션의 뼈대는 라우팅입니다. 이번 페이지에서는 웹 라우팅의 기본적인 컨셉과 NextJS에서 라우팅을 어떻게 사용하는 소개합니다. 용어(Terminology) 설명서 전체에서 아래 이미지에 있는 용어가 사용됩니다. Tree (트리): 계층 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트로 이루어진 컴포넌트 트리, 폴더 구조 등이 있습니다. Subtree (서브트리): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root (루트): 트리나 서브트리에서의 첫 번째 노드로, 루트 레이아웃과 같은 역할을 합니다. Leaf (리프): 자식이 없는 서브트리의 노드로, URL 경로에서의 마지막 세그먼트 등이 있습니다. URL Segment (URL ..
React Essentials Next.js로 애플리케이션을 구축하려면 Server Components와 같은 React의 최신 기능에 익숙해지는 것이 도움이 됩니다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점, 사용 시기 및 권장 패턴을 살펴봅니다. 서버 컴포넌트 서버 및 클라이언트 컴포넌트를 사용하면 개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 구축하여 클라이언트 측 앱의 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 결합할 수 있습니다. 서버 컴포넌트에 대한 생각 React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지와 유사하게 React Server Components는 서버 와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위한 새로운 정신 모델을 ..
이 페이지는 Next.js 프로젝트의 파일과 폴더 구조 개요를 제공합니다. 최상위 파일 및 폴더, 구성 파일, 그리고 app 디렉토리 내에서의 라우팅 규칙을 다룹니다. 최상위 파일 Next.js next.config.js Next.js용 구성 파일 middleware.ts Next.js 요청 미들웨어 .env 환경 변수 .env.local 로컬 환경 변수 .env.production 프로덕션 환경 변수 .env.development 개발 환경 변수 .next-env.d.ts Next.js용 TypeScript 선언 파일 Ecosystem package.json 프로젝트 의존성 및 스크립트 .gitignore 무시할 Git 파일 및 폴더 tsconfig.json TypeScript용 구성 파일 jsconf..
시스템 요구 사항 Node.js 16.8 이상 macOS, Windows (WSL 포함), Linux을 지원합니다. 자동 설치 방법 새로운 Next.js 앱을 만드는 것을 추천하는 create-next-app을 사용하여 자동으로 모든 것을 설정합니다. 프로젝트를 만들려면 다음을 실행합니다: npx create-next-app@latest 설치 중에 다음과 같은 프롬프트가 표시됩니다: What is your project named? [프로젝트 이름] Would you like to use TypeScript with this project? Yes Would you like to use ESLint with this project? Yes Would you like to use Tailwind CSS w..
Next.js은 무엇인가? Next.js는 React 컴포넌트를 사용하여 웹 애플리케이션을 구축할 수 있는 프레임워크입니다. 내부에서 번들링, 컴파일 등의 도구를 추상화하고 자동으로 구성하여 애플리케이션 구축에 집중할 수 있습니다. 개인 개발자 또는 대규모 팀 모두 Next.js를 사용하여 대화형, 동적 및 빠른 웹 애플리케이션을 구축할 수 있습니다. 주요 기능 특징 설명 라우팅 (Routing) 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터로, 레이아웃, 중첩된 라우팅, 로드 상태, 오류 처리 등을 지원합니다. 렌더링 (Rendering) Next.js에서 클라이언트 측 및 서버 측 렌더링을 지원하며, 클라이언트와 서버 컴포넌트를 사용하여 더욱 최적화된 정적 및 동적 렌더링을 제공합니다. 또한 ..
이 글은 2022년 7월에 작성된 것으로, RN으로 작업한 Inline Styling 방식이 Next.js로 진행된 웹 페이지의 스타일 작업 방식에 그대로 적용되었습니다. 그러나 RN과는 달리 디자인 요구 사항이 고도화되면서 Inline Styling 방식만으로는 스타일 코드를 관리하는 것이 어려워질 것으로 예상되어 팀 내에서 문제를 제기하고 다양한 해결 방안을 도출한 과정을 문서화한 것입니다. 현재 진행 중인 웹 프로젝트 CSS 적용 상태 날것 그대로의 Inline Styling 페이지단위로 styled component로 감싼 후 class 생성 같은 스타일인데 이름만 다른 class가 생성되는 경우 같은 이름의 class인데 스타일이 다른 경우 같은 스타일 & class이지만 여러 페이지, 컴포넌트..
