[ Next.js ] 1장 시작하기

Об этом предложении

1장 시작하기 새로운 프로젝트 만들기 npm과 pnpm npm : Node.js와 함께 기본 설치되는 대표적인 패키지 매니저 pnpm을 패키지 매니저로 사용하는 것을 추천 → pnpm 이 npm , yarn 보다 패키지 설치 속도가 빠르고, 중복 다운로드를 줄여 컴퓨터 용량 효율적으로 사용함 패키지 매니저 : 프로젝트에 필요한 외부 도구(=패키지)를 다운로드하고 관리하는 프로그램 터미널에서 npm install -g pnpm 명령어로 전역 설치 가능 전역 설치 : 내 컴퓨터 전체에서 언제든 pnpm 명령어 실행할 수 있도록 시스템 프로그램처럼 설치하는 것 Next.js 앱 만들려면, 터미널(vscode터미널)에서 프로젝트 보관하고 싶은 폴더에 CD 를 넣고 아래 명령 실행 : //명령어 이해 못함 npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm npx : 프로그램이 필요할 때 일회성으로 즉시 실행해주는 도구 / create-next-app@latest : Next.js 프로젝트 자동으로 구성해주는 CLI 도구의 최신(@latest) 버전 실행함 / nextjs-dashboard : 새로 생성될 프로젝트 이름 / --example "..." : 스타터 예제 코드를 가져와서 시작함 / --use-pnpm : 프로젝트 설정시 패키지 매니저로 npm 대신 pnpm 을 사용하겠다고 지정하는 플래그 - 그럼 디폴트가 npm인가? 명령줄 인터페이스(CLI) 도구인 create-next-app 을 이용해 Next.js 애플리케이션 설정 CLI : 터미널에 텍스트 명령어를 직접 입력해서 컴퓨터와 대화하는 방식 CLI 도구 : 터미널에 명령어 입력 → 필요한 파일, 폴더 구조를 자동으로 만들어주는 프로그램 모듈 설치 수동 설치 : 개발자가 터미널에서 직접 pnpm i 나 npm install <패키지명> 과 같은 명령어 입력 → 필요한 모듈 설치하는 방식 / 로컬 설치와 전역 설치로 구분 가능 | 구분 | 로컬 설치 | 전역 설치 (`-g` 플래그) | | --- | --- | --- | | 설치 위치 | 현재 프로젝트 폴더 안 | 내 컴퓨터 시스템 전체에서 사용 가능 | | 사용 범위 | 해당 프로젝트 내부에서만 사용 가능 | 내 컴퓨터 어디서든 터미널 명령어로 사용 가능 | 자동 설치 : CLI 도구를 통해 프로젝트 생성 시 기본 의존성 파일들이 자동으로 설치 및 설정되는 방식 / Next.js는 프로젝트에서 TypeScript 등의 환경 감지 → 필요한 패키지 + 설정을 자동으로 설치해주기도 함 ⇒ 수동은 일일이 터미널에 하나씩 쳐서 설치 + 설정 파일도 직접 작성해야함 / 자동은 명령어 하나면 구동에 필요한 것들 목록을 자동으로 다운로드 + 최적의 설정 파일까지 세팅해줌 프로젝트 탐색 모든 애플리케이션 코드를 직접 작성하지 않고도 Next.js의 주요 기능 배우는데 집중 설치 후 코드 편집기에서 프로젝트 열고 터미널에서 cd nextjs-dashboard 실행 폴더 구조 !image.png /app : 애플리케이션의 모든 라우트(Routes), 컴포넌트, 로직이 위치함 → 주로 작업하는 부분 = 웹, 앱의 핵심 작동 부위들이 모여있음 라우트(Routes) : 웹사이트의 페이지 주소(URL 경로) 컴포넌트 : 화면 구성하는 재사용 가능한 UI 일부분 로직 : 화면 뒤에서 일어나는 데이터 처리 및 규칙 /app/lib : 재사용 가능한 유틸리티 함수 / Data Fetching 함수 등 애플리케이션에서 사용되는 함수 모아둠 유틸리티 함수 : 여러 곳에서 반복해서 쓰이는 공통 도움말 기능 Data Fetching 함수 : DB나 외부 서버에서 필요한 데이터를 끌어오는 역할만 하는 함수 /app/ui : 카드, 표, 폼(구글 Form 등) 등 애플리케이션의 모든 UI 구성 요소 보관함 /public : 이미지와 같은 애플리케이션의 모든 정적 자산 보관함 정적 자산 : 서버에서 내용이 동적으로 바뀌지 않고 있는 그대로 브라우저에 보여주는 파일들 ex) 이미지 파일, 로고, 아이콘, 폰트 등 설정 파일(Config Files) : 애플리케이션의 루트 부분에 있음, 이 파일들 대부분은 새 프로젝트 시작 시 생성 + 미리 설정됨 (수정할 필요 없음) next.config.ts , create-next-app 등 전체 프로젝트 설정 파일이 위치함 루트 부분 : 프로젝트 폴더의 최상위 디렉토리(가장 바깥쪽 폴더) 의미, 최상단 위치 플레이스홀더 데이터 사용자 인터페이스 만들 때 임시 데이터 있으면 도움이 됨 임시 데이터 : DB나 API가 준비되기 전, 파일의 자바스크립트 객체 데이터 활용해 추후 DB에 초기 데이터 채울 수 있음 아직 DB나 API가 제공되지 않은 경우 사용할 수 있는 방법 자리 표시자 데이터를 JSON 파일 형식이나 JavaScript 객체형태로 만들어두고 사용 → 실제 DB 구축 시 초기 데이터 채워넣는 용도로도 활용함 자리 표시자 데이터 : DB나 벡엔드 API가 아직 준비X 일 때, 화면(UI)가 제대로 나오는지 확인하기 위한 임시 사용하는 가짜 샘플 데이터 mockAPI 같은 서드파티 서비스 사용 서드파티 서비스 : 외부 전문 회사나 다른 개발자가 만들어 제공하는 연동 서비스 TypeScript 대부분의 파일에 a 또는 접미사가 붙어있음 + 대부분의 파일이 .ts 또는 .tsx 확장자로 작성됨 → 프로젝트가 TypeScript로 작성되었기 때문임 여기서 Type은 자료형임 ex) 정수형, 실수형 등등 이런게 자료형임 파일에서 DB에 반환되는 타입을 수동으로 정의함 → 잘못된 데이터 전달 방지 타입 안전성을 위해 DB 스키마를 기반으로 자동으로 타입을 선언하는 Prisma 나 Drizzle 을 권장함 개발 서버 실행 - 터미널에서 실행 프로젝트 패키지 설치 : pnpm i 를 이용해 필요한 패키지 설치 개발 서버 시작 : pnpm dev 명령어로 3000번 포트에서 개발 서버 실행 / 꼭 3000번 포트에서 실행할 필요는 없음 다만 기본 설정 번호일 뿐임 다른 프로그램이 쓰고 있으면 알아서 3001번, 3002번 등으로 바꿔서 실행해 줌 브라우저 주소창에 http://localhost:3000 입력 → 접속 확인