Next.js4 layout layout 파일은 무조건 존재해야 하는 파일이다. layout 파일이 없어도 빌드하면 자동으로 생기는 파일이다. Next.js는 page 컴포넌트를 바로 렌더링 하는 것이 아니라 layout에 있는 컴포넌트를 렌더링하는 것이다. 하나의 layout이 아닌 여러개도 만들어 사용 가능하다. 장점 재사용하는 element들을 모든 page에 작성하는 대신 layout에 한 번만 적을 수 있다. 여러 layout 파일이 있을 때 대체되는 것이 아니라 중첩된다. 2024. 3. 4. page Next.js는 Framework이기 때문에 Next.js의 규칙에 맞게 파일을 생성해야 올바르게 빌드된다. 1. 규칙 Next.js는 웹사이트의 첫 번째 페이지를 빌드하기 위해 'app'이라는 이름을 가진 폴더 안에 'page'라는 이름을 가진 파일을 찾는다. 따라서 app이라는 폴더를 만들고 그 안에 page.jsx(tsx)를 생성한다. 2. 주의사항 page 컴포넌트는 export default된 React 컴포넌트여야 한다. page 컴포넌트의 이름은 마음대로 작성해도 되지만 파일 이름은 변경하면 안된다. page 파일은 항상 app 폴더 내부에 존재해야한다. 2024. 3. 4. 설치 1. 폴더 생성 $ mkdir next-example 2. 폴더 이동 후 package.json 생성 $ cd next-example $ npm init 3. React.js, Next.js, react-dom 설치 $ npm install react@latest next@latest react-dom@latest 4. package.json 수정 생성된 package.json 파일을 열어 "scripts" 부분을 아래처럼 수정한다. ..., "scripts": { "dev": "next dev" }, ... 앞에 "dev"는 원하는 다른 말로 수정 가능하다. (위의 경우 "npm run dev" 명령어로 앱을 빌드한다.) 2024. 3. 4. Library vs Framework Library Library는 코드 내에서 개발자가 사용한다. 원하는 아키텍처를 사용하여 원하는 방식으로 코드를 작성한 후 필요한 Library를 import 해서 사용한다. 개발자가 구조에 관한 모든 결정을 내린다. 즉, 코드 사용의 주체는 개발자다. Example React.js는 UI 인터페이스를 빌드하는데 사용하는 Library이다. Framework Framework는 개발자의 코드를 사용한다. 개발자가 규칙을 지켜 코드를 작성하면 Framework가 코드를 호출한다. 코드 사용의 주체는 Framework이다. Example Next .js는 웹사이트를 구축하는 데 사용하는 Framework이다. 2024. 3. 4. 이전 1 다음
