React

• 라이브러리 🟰 사용 주체가 개발자, 필요한 순간에 가져다가 사용
• UI 인터페이스를 빌드하는데 사용하는 라이브러리 ➡️ 반응형 사용자 인터페이스를 구축하는데 도움이 됨

Next.js

• 프레임워크 🟰 프레임워크 내의 규칙을 따르면서 사용

Next.js 수동 설치

1. npm init
2. npm install react@latest next@latest react-dom@latest
3. package.json과 같은 단에 app 폴더 속 page.tsx(page.jsx) 생성 ➡️ app 및 page 이름 중요❗ 🟰 Next.js가 실행할 때 app 폴더 속 page 파일 찾음

Next.js 실행 시 자동으로 열리도록 하기 위해서 package.json 수정

"scripts": {
  "dev": "npm run open-browser && next dev", // 페이지를 열고 next 시작
  "open-browser": "start <http://localhost:3000>", // 자동으로 페이지 열림
  "prepare": "husky create && husky install"
},

라우팅

React의 경우 react-router를 이용

• url을 정하고, url에 접근하면 해당 컴포넌트를 렌더링

Next.js는 파일 시스템을 통해서 url 표현

• app/page.tsx와 app/layout.tsx는 root segment라고 불림 ➡️ 유저가 제일 먼저 볼 페이지
• app 아래에 폴더 만들면 새로운 url ➡️ 폴더 안 page.tsx(page.jsx)도 필수

렌더링

rendering 🟰 리액트 코드를 브라우저가 이해할 수 있는 html로 바꾸기

• Create React App은 Client Side Application 🟰 client 단에서 모든 렌더링작업 수행
  • 빈 화면에서 js를 읽고 소스코드를 추가하기 ➡️ js 엔진에 의해 추가
  • 새로고침 시 화면 깜빡임 존재 (js 기다리는 동안)
  • 🟰 Client Side Rendering
• Next.js는 Server Side Rendering으로 초기 화면의 UI는 js 유무 상관 없이 보여짐 ➡️ UI는 이미 빌드 & html 이미 존재 🟰 모든 컴포넌트와 페이지들은 백엔드에서 렌더링 완료 후 html이 클라이언트에게 넘겨짐
• 변수는 일반 tsx에서 export 불가하므로 따로 ts파일 만들기

SEO 검색 엔진 최적화

구글은 페이지의 html을 봄 ➡️ React의 경우 빈 페이지가 보여질 수도 있음 (js 다운로드 유무)

Next.js는 유용한 실제 데이터가 들어있는 html을 구성 ➡️ js가 활성화되지 않아도