프로젝트 첫 세팅방법.
🔍 프로젝트 첫 세팅 순서
1️⃣ 바탕화면으로 이동
터미널을 열고 바탕화면으로 이동해야해, 운영체제에 따라 아래 명령어를 따라해봐.// macOS/Linux: cd ~/Desktop // Windows(PowerShell 사용 시): cd Desktop
2️⃣ 새 프로젝트 폴더 생성
바탕화면에 프로젝트 폴더를 만들어야해. mkdir+폴더명(생성) cd+폴더명(이동)mkdir my-project cd my-project
3️⃣ 프로젝트 초기화 (pnpm 사용)
pnpm을 사용해 프로젝트를 초기화.pnpm init이 명령어는 package.json 파일을 생성하여, 필요한 정보를 입력하라는 질문이 나와.(이름, 버전 등은 기본값으로 두어도 무방해.)
4️⃣ 필요한 패키지 설치
1. 프로젝트 설정//React 프로젝트 pnpm add react react-dom //Next.js 프로젝트 pnpm add next react react-dom
- TypeScript설치
pnpm add -D typescript @types/react @types/node pnpm tsc --init
- 개발 도구 설치
//ESLint와 Prettier를 추가 pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react
- 개발 서버 실행
pnpm dev
🚀 진짜 쉬운 설명
최종적으로 바탕화면에 my-project 폴더가 생성되고, 그 안에 초기화된 프로젝트가 완성!
이제 브라우저에서 http://localhost:3000에 접속하면 세팅된 프로젝트를 확인할 수 있다.
cd ~/Desktop # 바탕화면으로 이동
mkdir my-project # 폴더 생성
cd my-project # 폴더 안으로 이동
pnpm init # 프로젝트 초기화
pnpm add next react react-dom # Next.js 설치
pnpm add -D typescript @types/react @types/node # TypeScript 설치
mkdir pages # Next.js 페이지 디렉토리 생성
touch pages/index.tsx # 기본 페이지 파일 생성
pnpm dev # 개발 서버 실행✏️ 더 알아가기
-
Yarn과 PNPM의 차이?
1. Yarn
Facebook에서 만든 패키지 매니저로, npm의 단점을 보완하기 위해 등장.
장점: 설치 속도가 빠르고, 의존성 충돌을 줄이기 위한 yarn.lock 파일 제공. Workspaces를 통해 모노레포 프로젝트 관리에 적합.
단점: 디스크 공간 사용 최적화는 제한적.2. PNPM
파일을 중복 없이 저장해 디스크 공간을 크게 절약할 수 있는 패키지 매니저.
장점: 하드 링크와 심볼릭 링크를 사용해 패키지를 효율적으로 관리. 모노레포 프로젝트에 최적화.
단점: Yarn이나 npm보다 초기 학습 곡선이 조금 있음.
-
한눈에 보기!
| 특징 | Yarn | PNPM |
|---|---|---|
| 철학 | 파일 시스템 기반의 빠르고 효율적인 패키지 매니저 | 디스크 공간을 절약하고 효율적으로 의존성을 관리 |
| 저장 방식 | node_modules에 모든 의존성을 플랫하게 설치 | 하드 링크와 심볼릭 링크를 사용하여 중복 파일 제거 |
| 속도 | Yarn 2부터 매우 빠른 속도 제공 | 링크 기반으로 속도가 매우 빠름 |
| 디스크 공간 절약 | 디스크 공간 최적화는 제한적 | 중복 파일을 저장하지 않아 디스크 사용량을 크게 줄임 |
| Workspaces 지원 | 모노레포 지원 (Yarn Workspaces) | 모노레포 지원 (PNPM Workspaces) |
| Lock 파일 형식 | yarn.lock | pnpm-lock.yaml |
| Node.js 호환성 | Node.js와 호환성 우수 | 일부 설정에 따라 호환성 문제가 발생할 수 있음 |
| 설치 명령어 | yarn install | pnpm install |
| 사용성 | 전통적인 npm 사용 방식을 따름 | 독특한 저장 방식으로 약간의 학습 필요 |
dev kyu