[Next.js] 1장 + 자동/수동 설치 Q&A 복습

Next.js Learn 1장(대시보드 설치)과 수동 설치를 직접 해보며 생긴 질문 정리.

한눈에 보기

개념	한 줄 정의
패키지(모듈)	남이 만들어 공개한 코드 부품 (react, next 등)
npm	부품을 설치·관리하는 도구. Node.js와 함께 설치됨
pnpm	npm과 같은 역할. 더 빠르고 저장 공간 절약
npx	도구를 설치하지 않고 한 번만 빌려서 실행
package.json	프로젝트 정보 + 필요한 부품 목록 + 실행 명령어
node_modules	실제로 받아온 부품 코드가 쌓이는 창고

---

1. npm / pnpm / npx

Q. npm이 뭔가?
A. 부품 가게 + 배달원. 필요한 패키지를 받아 프로젝트에 넣어줌.

• npm create vite@latest → 프로젝트 틀 만들기
• npm install → 필요한 부품 전부 설치
• npm run dev → 미리보기 서버 켜기

Q. pnpm은 npm과 뭐가 다른가?
A. 같은 부품을 가져오지만

• 더 빠름
• 여러 프로젝트가 같은 부품을 쓰면 한 번만 저장
• 설치 스크립트를 허락받고 실행 (npm은 자동 실행)

npm	pnpm
npm install	pnpm i
npm install 이름	pnpm add 이름
npm run dev	pnpm dev
npx 도구	pnpm dlx 도구

Q. pnpm을 깔았는데 왜 npx로 불러오나?
A. 역할이 다름.

• npx = create-next-app 같은 일회용 도구를 빌려 실행
• pnpm = 프로젝트에 부품 설치
• --use-pnpm 옵션으로 도구가 부품 설치를 pnpm에 맡김

Q. npm install -g pnpm에서 -g는?
A. global. 특정 프로젝트가 아니라 컴퓨터 전체에 설치.

---

2. package.json / node_modules

Q. package.json은 뭔가?
A. 프로젝트 소개서 + 장보기 목록. 지금 중요한 건 두 부분.

"scripts": {
  "dev": "next dev"
},
"dependencies": {
  "next": "^16.3.6",
  "react": "^19.3.0",
  "react-dom": "^19.3.0"
}

• scripts = 단축번호. pnpm dev → next dev 실행
• dependencies = 필요한 부품 목록 (이름: 버전)
• ^16.3.6 = 16.x 중 이 버전 이상이면 OK
• keywords, author, license = 부품으로 공개할 때 쓰는 정보. 지금은 무시

Q. node_modules는 뭔가?
A. package.json이 목록이라면 node_modules는 실제로 사 온 재료 창고.

• import Link from 'next/link' → node_modules의 next에서 꺼내 씀
• 직접 수정 X, 지워도 pnpm i로 복구, 깃허브에 안 올림

Q. pnpm i의 i는?
A. install의 줄임말.

Q. 목록에 적으면 다운받아 주는 건가?
A. 맞음. 하지만 보통 손으로 안 적음.

명령어	언제	하는 일
pnpm i	프로젝트 처음 받았을 때	목록 전부 설치
pnpm add 이름	부품 새로 추가할 때	그것만 설치 + 목록에 자동 기록

---

3. 자동 설치 vs 수동 설치

Q. 자동 설치 명령어는 뭘 설치하는 건가?

npx create-next-app@latest nextjs-dashboard --example "깃허브주소" --use-pnpm

A. Next.js가 들어 있는 새 프로젝트 폴더를 만듦.

• nextjs-dashboard = 폴더 이름
• --example = 강의용 코드로 시작
• Next.js는 컴퓨터가 아니라 프로젝트 폴더 안에만 설치됨

Q. 강의용 코드는 강의 사이트에 있나?
A. 설명은 nextjs.org/learn(교재), 코드는 github.com/vercel/next-learn(실습 파일).

Q. 부품이 왜 이미 다 깔려 있나?
A. 예제에 딸려 온 package.json 목록을 보고 pnpm이 자동 설치. 내가 부품 이름을 하나도 안 적었으므로 자동 설치.

Q. 수동 설치는 필요한 모듈만 고르는 건가?
A. 반은 맞음. 빈 폴더에서 처음부터 직접 조립하는 것.

단계	수동 설치에서 직접 한 일	자동 설치
1	pnpm init (빈 목록)	알아서
2	pnpm add next react react-dom	알아서
3	package.json에 "dev": "next dev"	알아서
4	app/layout.js 작성	알아서
5	app/page.js 작성	알아서

• react-dom = 리액트를 브라우저 화면(DOM)에 그려주는 부품

Q. scripts의 test 줄은 왜 바꾸나?
A. pnpm init이 넣은 예시 줄(에러 문구만 출력). dev를 등록해야 pnpm dev가 작동.

Q. name은 왜 바꾸나?
A. 이름 규칙: 영어 소문자, 숫자, -만. 띄어쓰기·한글은 에러 가능.

---

4. app 폴더와 layout / page

Q. app 폴더는 앱을 만드는 건가?
A. 아니. 웹사이트(애플리케이션)의 페이지가 들어가는 특별 폴더. 폴더 구조 = 주소 (App Router).

파일	주소
app/page.js	/
app/about/page.js	/about

Q. app 안에 파일을 왜 만들어야 하나?
A. Next.js 설치 = 빈 극장. 올릴 내용이 없음. Next.js는 정해진 자리에서 파일을 찾음.

접속 → app/page.js 찾기(내용) → app/layout.js로 감싸기 → 화면

• page.js 없음 → 404
• layout.js 없음/비어 있음 → 에러
• 폴더 이름이 app이 아님 → 못 찾음

Q. layout.js는 왜 필요한가?
A. 모든 페이지를 감싸는 액자. <html>, <body> 뼈대 담당 (Vite의 index.html 역할).

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  )
}

Q. lang="ko"는 한국어 설정인가?
A. 번역 설정 X. "이 페이지는 한국어"라는 이름표 (화면 낭독기, 번역 제안, 검색엔진용).

Q. children은 임의의 이름인가?
A. React가 정한 이름. 태그 사이에 넣은 자식 요소가 자동으로 담기는 props.

• title, items = 내가 지은 이름 (변경 가능)
• children = 고정 (변경 불가)
• { children } = props.children의 줄임

Q. 자식 노드를 받아주는 함수 같은 건가?
A. 받는 건 컴포넌트 함수, children은 받은 자식 노드 자체.

Q. 폴더 이름은 다 규칙인가?

종류	예	이름 변경
Next.js 규칙	app/, public/, page, layout	불가
정리용 관례	lib/, ui/, definitions.ts	가능

---

5. 대시보드 폴더 구조 (1장)

폴더/파일	기능
app/	페이지, 컴포넌트, 로직. 메인 작업 공간
app/lib/	재사용 함수, 데이터 가져오기
app/lib/placeholder-data.ts	DB 대신 쓰는 연습용 가짜 데이터
app/lib/definitions.ts	데이터 모양 규칙(타입)
app/ui/	카드, 표, 폼 등 UI 컴포넌트
public/	이미지 등 정적 파일
next.config.ts	Next.js 설정 (강의에선 수정 X)

• .ts, .tsx = TypeScript (JS + 타입 규칙)
• 1장 결과 화면은 스타일 없는 Acme 페이지 + 거대한 화살표 (정상, 2장에서 스타일링)

---

6. 만난 에러와 해결

에러	뜻	해결
EACCES: permission denied	시스템 폴더에 설치 권한 없음	npm 설치 위치를 내 사용자 폴더로 변경 (npm config set prefix ~/.npm-global)
sudo: 3 incorrect password attempts	관리자 비밀번호 실패	위 방법으로 sudo 없이 해결
Could not resolve host	사이트 주소 연결 실패	네트워크 문제, 다른 방법 사용
command not found: --example	명령어 뒷부분만 입력됨	한 줄 전체 복사해서 실행
ERR_PNPM_IGNORED_BUILDS	설치 스크립트 실행 허락 필요 (bcrypt, sharp)	pnpm approve-builds → a → y → pnpm i
Port 3000 is in use	다른 서버가 3000번 사용 중	자동으로 3001 사용, 그 주소로 접속
default export is not a React Component in "/layout"	layout.js가 비었거나 저장 안 됨	코드 붙여넣고 Cmd+S

• 비밀번호 입력 시 화면에 아무것도 안 보이는 건 정상
• 터미널 끝 폴더명 %로 현재 위치 확인, cd ..은 상위 폴더로