#3.0 NextJS Setup

목표

• Next.js 앱을 위한 환경설정 준비를 알아본다.
• React 18 Version 에 대해서 알아본다.
  • 최신 버전이기 때문에 설치 과정에 변경 사항이 있을 수도 있다.

NextJS 시작하기

Docs

1. 타입스크립트를 사용할지 말지 결정

   → 타입 스크립트를 사용 하지 않을 것이라면,,

   npx create-next-app@latest
   

   → 타입 스크립트를 사용 할 것이라면,,

   npx create-next-app@latest --typescript
   

   • @latest
     • 최신버전 설치
     • 소프트웨어 배포 생명 주기 (Software Release Life Cycle)
       • 최신 버전에는 세가지 단계가 있다.
         1. Alpha
            • 소프트웨어 테스트를 시작하는 첫 단계
         2. Beta
            • 알파의 뒤를 잇는 소프트웨어 개발 단계
            • Alpha 와 Beta 단계에서는 변경 사항이 생길 수 있고 코드가 바뀌거나 버그가 생길 수 있어서 보통은 잘 사용하지 않는다.
         3. RC (Release Candidata)
            • 최종 릴리즈 후보
            • 상품의 feature 가 완성되고, 더 이상의 변동 사항이 거의 남아 있지 않을거라고 판단 되는 단계
         4. RTM:
            • 완성된 버전

2. 제공되는 순서에 따라서

   1. 프로젝트 이름 설정
   2. ES Lint 사용 여부
   3. TailwindCSS 사용 여부
   4. src 폴더 사용 여부
   5. app route 사용 여부
   6. import alias 기본 사용 여부

   등을 설정 한다.

#3.1 TailwindCSS Setup

목표

• Tailwind 셋업을 하고
• 설정한 내용이 잘 반영되었는지 테스트 해본다.

Tailwind CSS설치 및 초기 설정

Install Tailwind CSS using PostCSS - Tailwind CSS

1. npm install -D tailwindcss postcss autoprefixer

   • tailwindcss
   • postcss
   • autoprefixer
   • 위 세 가지 패키지 설치

2. npx tailwindcss init -p

   • tailwind.config.js 파일 생성
   • -p를 붙이면 postcss.config.js파일까지 생성

3. tailwind.config.js 파일 설정

   module.exports = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
   

   • content :
     • tailwind 를 어디서 사용 할 것인지 설정
     • ** 기호로 “해당 경로의 모든 파일”을 선택 할 수 있다.
     • {js,ts,jsx,tsx,mdx} 형태의 확장자 기입으로 다양한 확장자를 선택할 수 있다.