Loading the catalog…
Loading the catalog…
[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 .. 은 상위 폴더로
What RADAR observed and classified to build this opportunity. It is what the source published, not a verification that the offer is still active.
[Next.js] 1장_09.29. [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. 부품 가게 + 배달원. 필요한 패키지를 받아 프로젝트에…
Open source