사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.

이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.

사이드 프로젝트 Git

Next.js 프로젝트 생성

npx create-next-app@latest [프로젝트명]
cd [프로젝트명]

npm run dev

 

우선 프로젝트가 실행되는 것을 확인했습니다.

Next.js의 특징

  • 서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.
  • 파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일의 이름이 URL 경로와 매핑

TypeScript의 장점

  • 타입 안정성 : 변수 정의 시 타입을 명시할 수 있어, 런타임 오류를 줄이고 코드의 안정성을 높여준다.

프로젝트 구조

App Router를 사용해 보려고 설정하였습니다.

  • app : 페이지와 라우트를 정의하는 기본 디렉토리. 파일 추가 시 자동으로 라우팅 설정
  • page.tsx : 기본 페이지 컴포넌트 정의
  • layout.tsx : 모든 페이지에 공통 적용할 레이아웃 정의
  • not-found.tsx : 특정 경로에 대한 404 페이지 정의
  • public : 정적 파일(이미지, 폰트 등) 저장하는 곳
  • styles : CSS 파일을 관리하는 디렉토리

공통 레이아웃 설정하기

import 시 경로 @

import Header from '@/components/Header';
  • Next.js에서 제공하는 절대 경로를 나타내는 기호
  • 코드의 가독성과 유지보수성을 높일 수 있습니다.

오류

Warning: In HTML, <div> cannot be a child of <html>.
This will cause a hydration error.

 

Next.js가 SSR을 사용하는데, 이때 서버에서 렌더링된 HTML과 클라이언트에서의 컴포넌트가 일치하지 않아서 문제가 발생했다. 아직 Next.js에 익숙하지 않아서 React로 잘 하던 것도 자꾸 오류가 나는데 얼른 익숙해지도록 노력해야겠다..

경로 매개변수 전달

  • 서버 컴포넌트에서는 클라이언트 훅을 사용하지 않고, 매개변수를 인수로 받아 처리
  • 매개변수는 params 객체를 통해 접근

'스터디 > 사이드 프로젝트' 카테고리의 다른 글

01. 포트폴리오 사이트 1차 완료  (2) 2024.10.18
00. 포트폴리오 사이트의 시작  (3) 2024.10.15
03. Supabase 연동  (0) 2024.10.11
02. Vercel로 배포하기  (0) 2024.10.07
01. Zustand로 상태관리 하기  (1) 2024.10.06

티스토리툴바