03. 프로젝트 설정 내용 정리

02. 프로젝트 설정

NextJS가 프레임워크이며 프레임워크는 개발자가 작성한 코드를 호출한다.

올바른 폴더와 파일인 app이라는 명칭의 폴더 내 page라는 명칭의 파일에 코드를 작성하면 NextJS는 코드를 사용해서 웹사이트를 만들어 줬다.

그저 package.json 파일로 node.js 프로젝트를 생성하고 npm install로 react,next,react-dom을 설치했다.

그리고 package.json 파일 내 scripts에 dev를 추가했고 dev라는 명칭 이외에 다른 명칭을 사용하더라고 상관이 없으며 호출하는 next dev 명칭만 올바르게 되어 있으면 된다.

npm run dev 명령어를 실행하면 next dev가 호출되고 자동으로 NextJS는 프레임워크로써 app 폴더를 참조하게 된다.

그래서 폴더 이름이 꼭 app이어야 하고 꼭 page라는 파일이어야 하며 app 폴더 내 page 파일을 찾으려 한다.

 

 

 

 

 

NextJS는 개발자를 위해 직접 layouy.tsx 파일을 생성해주는데 matadata라고 export되고 있는 객체를 하나 볼 수 있다.

그리고 RootLayout 라는 객체를 하나 더 볼 수 있다.

RootLayout가 export default 되고 있고 metadata는 export만 되고 있다.

당연하게도 default export 객체는 하나만 지정이 가능하기 때문이다.

RootLayout이 자식 객체를 받는 걸 확인할 수 있고 이 자식 객체는 children을 위한 하나의 shell을 구성하고 있다.

Html 안에 body 태그안에 children을 가지고 있다.