nvm 설치 및 개발환경 세팅

참고 페이지

1. Next.js에 Tailwind 세팅

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS

 

2. Next.js CLI 세팅

https://nextjs.org/docs/pages/api-reference/cli/create-next-app

CLI: CLI | Next.js

 

---

1. nvm 설치

1) nvm 릴리즈 페이지를 방문한다.

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

 

 

2) 해당 파일을 다운로드 받고 압축 푼 후, 실행하여 설치한다.

 

 

3) PowerShell을 열고(관리자 권한 권장.) "nvm ls" 명령어를 사용하여 설치된 노드 버전 목록을 확인한다.

• 현재는 없어야 정상.

 

 

4) 사용가능한 버전을 모두 확인한다.

nvm list available

 

 

5) 최신 버전을 다운로드한다.(현재 기준 23.0.5)

nvm install latest

 

 

6) 버전 안정성을 위해 lts 버전을 다운로드한다.(현재 기준 22.12.0)

nvm instal 22.12.0

 

 

7) 설치된 버전을 확인하고, 22.12.0(LTS 버전)을 사용 설정한다. 이후 버전을 확인해본다

npm list
nvm use 22.12.0
node --version

 

참고) 실행규칙 설정 상태에 따라 스크립트가 실행되지 않는 경우가 가끔 있다

npx create-next-app@latest .

 

참고 2) 이 경우 실행규칙 설정 상태(Restricted)를 확인하고,  npm 및 npx를 실행할 수 있도록 실행 정책을 RemoteSigned로 변경한다

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

 

이 경우, 일시적으로(보안상의 이유로) 실행규칙을 변경하고, 다시 되돌리는 것을 권장한다

상태 확인 및 실행 규칙 일시적 변경

Get-ExecutionPolicy
Set-ExecutionPolicy -Scope Process RemoteSigned

 

이러면 된 것이다

 

---

2. Next.js 실행

1) 프로젝트를 생성한다.

npx create-next-app@latest .

- 현재 머문 폴더에 설치하겠다는 의미

 

2) 뒤이어 나오는 설정들을 확인하고 설정한다.

 

(1) Would you like to use TypeScript? - Yes/No

• TypeScript 사용 여부를 묻는 질문입니다.
• TypeScript는 JavaScript에 정적 타입을 추가해 코드 안정성을 높이는 언어입니다.
• Yes를 선택하면 프로젝트가 TypeScript 기반으로 생성됩니다.

(2) Would you like to use ESLint? - Yes/No

• ESLint 사용 여부를 묻습니다.
• ESLint는 JavaScript 및 TypeScript 코드의 문법 오류나 스타일 문제를 자동으로 잡아주는 도구입니다.
• 코드를 깔끔하게 유지하고 협업을 원활하게 하기 위해 사용하는 것이 일반적입니다.
• Yes를 추천합니다.

(3) Would you like to use Tailwind CSS? - Yes/No

• Tailwind CSS는 CSS 프레임워크로, 유틸리티 클래스 기반으로 빠르게 UI를 만들 수 있게 도와줍니다.
• CSS를 직접 작성하기보다 class를 조합해 UI를 구성할 수 있습니다.
• Tailwind CSS를 사용할 계획이 있다면 Yes를 선택하세요.

(4) Would you like your code inside a src/ directory? - Yes/No

• 프로젝트의 코드 파일을 src/ 디렉터리 안에 넣을지 묻는 질문입니다.
• src/ 디렉터리를 사용하면 코드와 설정 파일을 구분할 수 있어 관리가 편리합니다.
• 대부분의 프로젝트에서는 Yes를 선택해 src/ 안에 코드를 넣습니다.

(5) Would you like to use App Router? - Yes/No

• App Router 사용 여부를 묻습니다.
• App Router는 Next.js의 최신 페이지 및 라우팅 시스템입니다.
• Next.js 13 이상에서 기본 권장 사항이며, 서버 컴포넌트와 동적 라우팅이 강화된 방식입니다.
• Yes를 선택하는 것이 최신 방식입니다.

(6) Would you like to use Turbopack for next dev? - Yes/No

• Turbopack은 Next.js의 새로운 번들러로, 기존 Webpack보다 더 빠른 개발 서버를 제공합니다.
• next dev 명령어를 실행할 때 Turbopack을 사용해 빠르게 개발 환경을 띄울 수 있습니다.
• Next.js 14 이상에서 기본적으로 도입되고 있습니다.
• 현재는 시범운영에 더 가까운 상황입니다

(7) Would you like to customize the import alias? - Yes/No

• 프로젝트에서 import 경로를 커스터마이징할지 묻는 질문입니다.
• 예를 들어,위와 같은 방식으로 경로를 줄일 수 있습니다.
• javascript 코드 복사 import Component from '@/components/MyComponent'
• 기본적으로 @/*로 설정됩니다.
• No를 선택하면 기본 값(@/*)이 사용됩니다.
• 필요에 따라 설정을 변경하고 싶다면 Yes를 선택하세요.

(8) What import alias would you like configured? - @/*

• import alias를 직접 입력할 수 있는 단계입니다.
• 기본값인 @/*는 프로젝트 루트(src)에서 시작하는 경로를 의미합니다.
• 예: import { Header } from '@/components'
• 원하는 경로를 설정하거나, 기본값을 유지해도 무방합니다.

---

3. Tailwind 설정

Next.js에 Tailwind 설치하기

명령어 1) Tailwind CSS와 PostCSS 및 Autoprefixer를 프로젝트에 개발 의존성(DevDependency)으로 설치하는 명령어

npm install -D tailwindcss postcss autoprefixer

 

명령어 2) Tailwind CSS 설정 파일을 생성하는 명령어

npx tailwindcss init -p

 

---

4. 적용하기

1) 확장프로그램을 다운로드 받아서 CSS를 적용시킨다.

 

2) 적용이 안 되고 빨간 줄이 지속될 경우 해결 방법

(1) VSCode 재시작

(2) 명령 팔레트(Ctrl+Shift+P)에서 "Developer: Reload Window" 실행을 하면 사라진다.

 

3) 명령어를 입력하여 Live server를 실행한다.

npm run dev

 

만약 페이지가 깨진다면 postcss.config.js 그리고 nextjs.config.js 파일을 지워준다.

이 파일에 이 부분을 추가