02. 프로젝트 설정

1. 프로젝트 폴더 생성 및 Visual Studio Code 열기

C드라이브 루트 경로에 learn-nextjs14라는 이름을 가진 폴더 생성 후 Visual Studio Code 툴로 해당 폴더를 연다.

 

 

 

2. pakage.json 파일 생성

Visual Studio Code 툴 내 터미널에서 npm init -y 명령어를 실행하면 package.json 파일이 생성된다.

 

 

 

3. pakage.json 파일 license 변경

package.json 파일에서 license을 MIT로 변경한다.

 

 

 

4. react, next.js, react-dom을 설치

Visual Studio Code 툴 내 터미널에서 npm install react@latest next@latest react-dom@latest 명령어를 실행한다.

react는 UI와 다른 모든 것들을 구성하는 부분이고 

react-dom은 react native처럼 iOS나 안드로이드 기기에 랜더하는 것처럼 react로 구성한 것을 브라우저의 Document Obejct Model(DOM)에 랜더하는 역할을 한다.

 

 

 

5. package.json 파일 스크립트 수정

package.json 파일에서 scripts를 "dev" : "next dev" 로 수정한다.

dev 명령어를 실행하면 NEXT JS를 실행한다.

 

 

 

6. app 폴더 및 page 파일 생성

Next.js는 프레임워크이기 때문에 Next.js에서 개발자의 코드를 호출하며 Next.js는 page라는 파일을 찾으려 할 것이다.

그리고 그 파일은 app이라는 폴더 안에 있어야 한다. 확장자는 jsx, ts, tsx 이 셋중에 지정한다.

NextJS가 시작될 때 웹사이트를 빌드하려고 할때 첫번째 페이지를 app폴더 안 page 파일을 찾는다.

 

 

 

7. 서버실행

page.tsx 파일 내 컴포넌트를 export 하고 "Hello NextJS!" 반환하기 위해 Tomato 명칭의 함수를 생성하고

리턴값은 "Hello NextJS!"로 한다.

npm run dev 명령어 실행시 5번 과정에서 package.json 스크립트 설정을 해두었기 때문에 해당 로컬주소로 이동하면 성공적으로 작성한 코드에 의해서 브라우저에 랜더링되어 보여지게 된다.