1. Introduction
이 Framework 는 풀스택 웹앱을 개발하기 위한 최선의 Framework 라고 한다. 이 코스가 끝날 때에는 모든 프로그램을 NextJS로 만들고 싶어질거라 한다.
React Framework 중에 1등이라 하는 NextJS
최신 업데이트로 많이 발전했다고 한다.(14기준)
자동화로 개발자 경험 1위 라는데.. 기대가 된다.
2. Requirements
React.js 다룰줄 알아야 한다. (state, props, fetch, routing 등을 알아야 하니..)
3. Library(React) vs Framework(NextJS)
- Library: 라이브러리는 코드 내에서 사용하는 것이다. 원하는 아키텍를 원하는 방식으로 짠다. 함수 지향, 객체지향 프로그래밍이 가능하다. 코드 내에서 사용하고 사용의 주체는, 사용자이다. 파일이름, 폴더 구조 등. 라이브러리는 우리가 사용할 때 쓸 수 있다는 것이다.라이브러리의 도움이 필요할 때만 가져와서 사용할 수 있다. 다운받아서 사용하는 것. React는 UI 인터페이스를 build하는데 사용하는 라이브러리 이다.반응형 인터페이스를 구축하는데 도움이 된다. CSS 에 Styled Components 를 사용하거나 tailwind를 사용하거나, expo 를 사용하거나 routing을 사용하거나.. 등등의 모든 자유를 개발자가 가지는 것이다.
- Framework: 개발자에게 주도권은 없다. 프레임워크가 주도하고 담당한다. 프레임워크가 대신 자동화 하고 결정을 담당한다. 그래서 NextJS는 많은 Feature을 가지고 있다. 그래서 규칙을 따라야 한다. 이것이 프레임 워크다. 개발자가 규칙을 지켜야 한다는 것이다. 적당한 폴더에 파일을 만들어야 한다는 것. 그것이 지켜지지 않는다면 동작하지 않는다. import의 개념을 잊어라. 올바른 변수의 모양으로 넣어야 한다는 것이다. 올바른 위치에 넣으면 그것을 실행해 줄것이다.
라이브러리는 개발자가 사용하고, 프레임워크는 코드를 사용한다.
4. Old vs New Version
- Page Router : app 폴더에서 찾는다
- App Router : pages폴더에서 찾는다.
app에서 라우팅 하는 방식과 data fetching하는 법은 많이 바뀌었다.
getStaticProps같은 것은 잊어라. page Router를 사용했다면, 최신 버전을 사용하기 위해선 migration 해야 한다.
5. Installation
npm init -y
// 이후 package.json 생김. author 수정
{
"name": "next-practice",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Eugenius1st/next-practice.git"
},
"keywords": [],
"author": "",
"license": "MIT", // 여기 수정
"bugs": {
"url": "https://github.com/Eugenius1st/next-practice/issues"
},
"homepage": "https://github.com/Eugenius1st/next-practice#readme",
"description": ""
}
npm install react@latest next@latest react-dom@latest
- react: UI 와 여타 많은 것들을 구성하는 부분
- reactdom: 브라우저에서 렌더링 하는 도구
// 이후 스크립트 수정
"scripts": {
"dev": "next dev"
},실행하면 NextJS는 pages라는 폴더를 찾으로 할 것이다. 그리고 그 폴더는 app 폴더 안에 있을 것이다.
다음
app/page.tsx 혹은 .jsx를 만들어라.
그리고
npm run dev로 실행
그리고 실행하면 local:3000 에서 실행중임을 알 수 있다.
그리고 자연히 layout.tsx 가 생겨남을 알 수 있다.
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
최강 프론트엔드 개발자가 되고싶은 안유진 입니다