섹션2. 프로젝트 시작

6. 프로젝트 시작 및 디렉토리 구조

• Next.js 공식 문서:

  • Next.js 공식 웹사이트에서 문서를 찾아볼 수 있습니다.
  • 코스와 병행하여 문서를 참고하는 것이 좋습니다.

• 테마 파일:

  • 데스크톱에 theme_files 폴더가 있습니다. 이 폴더에는 UI를 구성하는 HTML 파일과 이미지가 포함되어 있습니다.
  • 강의 중간에 이 파일들을 사용할 것입니다.

• Next.js 프로젝트 생성:

  • 터미널을 열고 프로젝트를 생성할 위치로 이동합니다.
  • create-next-app 명령어를 실행하여 프로젝트를 생성합니다.

npx create-next-app@latest

프로젝트 이름을 property-pulse로 지정합니다.

TypeScript 사용 여부는 Yes, ESLint 사용 여부도 Yes로 설정합니다.

Tailwind CSS 사용 여부는 Yes로 설정합니다.

소스 디렉토리 사용 여부는 No로 설정합니다.

앱 라우터 사용 여부는 Yes로 설정합니다.

사용자 지정 별칭 설정 여부는 Yes로 설정합니다.
 

• 의존성 설치:

  • Next.js, React, React DOM, Tailwind CSS 및 관련 의존성이 설치됩니다.

• 프로젝트 디렉토리로 이동 및 코드 에디터 열기:

  • 생성된 프로젝트 디렉토리로 이동합니다.

생성된 프로젝트 디렉토리로 이동합니다

cd property-pulse

Visual Studio Code를 사용하여 프로젝트를 엽니다.

code .

개발 서버 실행:

• 통합 터미널에서 개발 서버를 실행합니다

기본적으로 로컬호스트 3000에서 실행되며, 브라우저에서 확인할 수 있습니다.

폴더 및 파일 설명:

• package.json: React, React DOM, Next.js 및 Tailwind CSS와 같은 간단한 의존성 목록을 포함합니다.
•  
• next.config.js: Cloudinary 도메인 추가 외에는 특별히 수정할 것이 없습니다.
•  
• app 폴더: Next.js 13 이상에서 사용하는 파일 기반 라우팅 폴더입니다.
•  
  • layout.js: 모든 페이지 및 컴포넌트를 감싸는 레이아웃 파일입니다.
  •  
  • page.js: 홈페이지 파일입니다.

• 기존 app 폴더 삭제:

  • 현재 코드를 이해하기 위해 app 폴더를 삭제하고 처음부터 다시 생성할 것입니다.

• 다음 단계:

  • 다음에서는 app 폴더를 다시 생성하고 레이아웃과 홈페이지를 재구성할 것입니다.