🚪 들어가며
프로젝트를 시작하기 앞서 Next.js와 Tailwind CSS가 무엇인지 알고 시작하자!
- Next.js는 React 프레임워크이다.
- Tailwind CSS는 CSS 프레임워크이다.
💻 Next.js 설치
Next.js를 설치하기 위해서는 시스템 요구 사항을 먼저 확인해보자.
- Node.js 14.6.0 버전 이상
- MacOS, Windows(WSL 포함) 및 Linux가 지원한다.
💿 Node.js 버전 확인 및 설치
사용하는 컴퓨터에 Node.js가 설치되어 있을 수 있으니 확인을 해보자. 터미널을 열어서 아래의 명령어를 입력해보자.
node -v
위 사진처럼 Node.js의 버전 정보가 나온다면 설치가 되어 있다는 것이고 나오지 않는 다면 설치가 필요하다. 그럼 이제 설치를 하는 방법을 알아보자!
Node.js를 설치하기 위해서는 Node.js 공식 홈페이지에서 설치하면 된다. 홈페이지에 들어가게 되면 아래의 사진과 같은 화면이 있을 것이다.
두 버튼 중 오른쪽 버튼은 최신 버전을 뜻하고 왼쪽 버튼은 안정적인 버전을 뜻한다. 두 버전 중 안정적인 버전을 설치해보도록 하자! 설치가 끝났다면 위에서 과정으로 잘 설치되었는지 확인해보자. 터미널을 열고 아까와 같이 명령어를 입력해준다.
node -v
설치가 되어있는 것을 확인했고, Next.js 시스템 요구 사항에도 충족한 것을 확인했다.
📀 Next.js 프로젝트 시작
Visual Studio Code를 사용하여 Next.js로 프로젝트를 생성할 것이다.
프로젝트를 생성할 폴더 위치로 Visual Studio Code 열어준다. 그리고 상단 메뉴에서 터미널 - 새터미널 경로로 터미널을 열어준다. 자동으로 Next.js 프로젝트를 설치해주는 명령어를 사용할 것이다.
- Next.js 프로젝트 생성하는 명령어
npx create-next-app@latest- TypeScript를 포함한 Next.js 프로젝트 생성하는 명령어
npx create-next-app@latest --typescriptTypeScript를 사용하지 않고 Next.js 프로젝트를 생성했다. 먼저 프로젝트 이름을 입력해주고 TypeScript는 사용하지 않고 ESLint는 사용한다라고 설정 후 프로젝트 생성한다.
설치가 완료되면 설정한 프로젝트 이름으로 폴더와 파일들이 생성된다.
생성된 폴더와 파일들을 확인했다면 생성된 프로젝트를 실행해보자. 터미널에 아래의 명령어를 입력해보자.
- 프로젝트 폴더로 이동하는 명령어
cd 생성한 프로젝트 이름- 프로젝트 실행 명령어
npm run dev
명령어를 입력 후 http://localhost:3000를 클릭하면 생성된 프로젝트가 실행된 것을 확인할 수 있다.
💻 Tailwind CSS 설치
이제 Tailwind CSS 프레임워크를 설치해보자. 터미널을 열고 아래의 명령어를 순서대로 입력한다.
- Tailwind CSS 설치 명령어
npm install -D tailwindcss- tailwind.config.js 파일 생성 명령어
npx tailwindcss init이제 몇가지 설정을 해주자. 생성된 tailwind.config.js 파일을 열어 템플릿 경로 구성을 해주자.
생성된 프로젝트 폴더 안에 styles 폴더 안에 globals.css 파일에 다음을 추가해주자.
@tailwind base;
@tailwind components;
@tailwind utilities;
자!이제 Next.js와 Tailwind CSS를 이용한 프로젝트를 시작해보자💪
🚩 Ref
