프로젝트 생성
노마드코더 강의에서는 npx create-next-app@latest로 간단하게 설치됐지만 여러가지 초기설정 질문이 많아졌다.
project name: practice
TypeScript : N
ESLint : Y
Tailwind : Y
Router : Y (권장됨)
src directory : N
질문이 많지만 일단 이렇게 설정했다.
이 강의에서는 TypeScript를 사용하지않지만 TypeScript를 같이 쓰는게 일반적인 것 같다. tailwind도 같이 초기설정에 제공하는걸 보면 역시 미리 공부하길 잘했다. 나름 테일윈드는 이제 익숙해진 것 같다.
Library vs Framework
라이브러리는 "내가" 불러와서 "내가" 사용하는 것
프레임워크는 내 코드를 불러온다.
NextJS 프로젝트를 생성하면 index.js 파일이 없다.
하지만 React 프로젝트를 생성하면 ReactDOM.render() 이 부분이 항상 있다.
리액트에서는 언제 React를 부를지, 어떤 폴더 구조로 만들지 내가 정한다.
예를들면 Components 폴더나 Routes폴더를 내가 원하는 위치에 만들수있다. 즉 자유도가 있다. 뭐든 내 마음대로 할 수 있다.
하지만 NextJS와 같은 프레임 워크에서는 정해진걸 잘 따라야 잘 작동된다.
내가 코드를 적절한 곳에 넣어야한다.
pages
ㄴabout.js
ㄴindex.js
그런데 프로젝트를 직접 생성해보면 강의 내용과 달리
pages 폴더가없다. 대신 app 폴더아래에 layout.js과 pages.js 파일이 있다.
그래서 공식문서에 가보니 폴더 구조가 나와있었다.
- NextJS Project Structure
https://nextjs.org/docs/getting-started/project-structure
아무래도 pages폴더는 내가 따로 만들어야될 것 같다.
리액트 프로젝트를 처음 진행할 때 파일트리를 어떻게 짜야할지, 어떤게 정석적인 방법인지 몰라서 다른 사람들의 것을 참고했었는데 NextJS에서는 아예 정해주니까 리액트를 공부해봤던 입장에서는 오히려 편한 것 같다.
그리고 리액트에서는 react-router-dom으로 직접 라우터를 관리했지만 넥스트에서는 자동으로 관리해준다. 정말 좋은 것 같다.
NextJS Route 규칙
1. pages 폴더 안의 파일 이름이 곧 url이된다.
2. 컴포넌트의 이름은 파일명과 같을 필요없다.
3. 컴포넌트를 반드시 export default 해줘야한다.
4. 파일명이 index.js인 경우 Home(url이 localhost:3000/ 인 경우)
Q. page.js 파일은 어떤 용도인가?
Q. 왜 pages 폴더를 자동으로 생성해주지않지? 지금은 npm run dev하면 / 주소일때 보여지는 화면은 page.js 파일의 내용이다.
그리고 이 파일안의 컴포넌트는 제일 상위 태그가 <main> 이다.
이건 html5부터 추가된 것인데 원래 react를 생성하면 초기에 화면에 표시되는 것들이<div>로 감싸져있던 것을 생각하면 신기한점이다.
-> pages 폴더를 생성해서 강의처럼 about.js 파일을 추가해보았다.
http://localhost:3000/about으로 이동하니 about.js 의 컴포넌트가 잘 렌더링 되었다.
이 폴더에 index.js파일을 추가해보니 page.js와 충돌이 나서 에러가 발생했다.
둘중 하나만 사용해야했다. 왜 index.js를 쓰지않고 page.js를 따로 만드는지 아직 의문이다. 강의를 더 들어봐야할 것 같다.
