[Next.js] WEB TECH SEMINAR 강의 요약 : Pages Router, App Router, API Routes, Route Handlers, Server Actions 등

이 글은 2023년 웹 개발교육 WEB TECH SEMINAR의 강의를 학습하고-개인적으로 중요하다고 생각한 부분을-정리한 내용이다.

---

1. Next.js 개발 환경 구축하기(1주차)

😉 1주차 강의 링크

1.1. a태그와 SPA

a태그는 기본적으로 페이지를 새로고침하기 때문에 SPA의 이점을 살릴 수 없다. 따라서 a태그 대신 Link를 이용하면 된다.

😉 a태그가 페이지를 새로고침하는 것을 확인하는 방법: 콘솔에서 로그 찍은 상태에서  a태그 클릭, 로그가 사라지면 페이지가 변경된 것임을 알 수 있다.

😉 vscode에서 ul, li 태그 자동 생성 : ul>li

 

1.2. JSX

JavaScript + XML

XML 안에 {}로 자바스크립트 표현식을 작성할 수 있다.

 

1.3. 천 단위 구분 기호

const formatter = Intl.NumberFormat('ko-kr');
formatter.format(3000) // '3,000'

 

1.4. Pages Router

component명으로 css 모듈(module.css)을 만들 수 있다.

import styles from './HomeView.module.css'
// (생략)
<div className={styles.container}>

😉 파일을 styles 폴더 안에 두는 것을 권장

pages의 component는 경로 변경 기능의 역할로 사용한다.

비즈니스 로직은 components폴더 내 views라는 폴더 안에  View component(예: HomeView.js)를 만들어 사용하는 것을 권장한다.

next.js는 풀스택 또는 Static site generator 등의 목적으로 사용

next.js를 제작한 회사 버셀( vercel)이다.

 

2. Next.js 앱 만들어보기(2주차)

😉 2주차 강의 링크

2.1. 노드 버전 관리

nvm 사용 권장(노드 버전 매니저): 노드 버전 스위칭

😉 윈도우의 경우 nvm-windows 이용

 

노드 버전 확인

• node -v
• npm -v
• npx -v

 

2.2. 리액트

상태를 가진 웹 애플리케이션을 손쉽게 만들기 위해 생겨난 기술

• 동적 dynamic : 상태가 있고, 변화하는
• 정적 static : 상태가 없는

 

Flutter의 위젯(Widget)이 동적, 정적 상태에 대한 개념을 잘 적용한 예로 본다.

• Stateless Widget : 고정된 내용을 보여주는 위젯
• Stateful Widget : 변화가 있는 위젯

 

리액트는 Stateless 구분이 없었다.

정적인 페이지는 Stateless 방식으로 작성하면 성능에 유리한데 next.js의 App Router 기술이 나타나게 된 이유이다.

😉 React Server Componet (RSC) : 정적인 내용을 담는 목적의 컴포넌트

사용자와의 인터랙션이 많은 백오피스 같은 경우 Pages  Router가 유리할 것이다.

App Router와 Pages  Router는 용도가 다를 뿐이다.

SSR의 Hydration(수분 공급) 찾아볼 것! SCR(동적 페이지)과 SSR(정적 페이지)이 자연스럽게 섞이게 하는 동작!

 

2.3. 서버와 브라우저

서버의 자바스크립트 엔진에는 없고 웹브라우저의 자바스크립트엔진에만 있는 것

• window, document : UI를 위한 것

 

window.location, history, navigator에 접근할 경우 서버에서는 에러가 난다. next.js에서는 이 문제를 훅을 제공하여 해결한다.

const router = useRouter();
console.log( 'router.pathname', router.pathname);

 

2.4. 서버의 에러를 피하기 위한 나쁜 사례

const [isLoaded, setIsLoaded] = useState(false);

// useEffect는 클라이언트에서만 동작하는 훅
useEffect(() => {
    setIsLoaded(true);
}, []);

if (!isLoaded) return null;

console.log(window.location.pathname);

위와 같이 작성하면 SSR이 일어나지 않으므로 SSR의 의미가 사라질 것이다.

 

2.5. Pages Router의 getServerSideProps()

서버에서만 동작하는 함수로 활용할 수 있다.

서버에서 클라이언트로 데이터를 전달해 줄 수 있게 된다.

 

2.6. App Router

pages 라우터의 경우 pages 폴더 내의 파일이 주소, app 라우터의 경우는 폴더가 주소(폴더 내 page.tsx 파일의 내용을 보여줌) 역할을 한다.

app router는 컴포넌트의 기본값이 RSC(react server component)이다.

리액트 컴포넌트는 async사용할 수 없으나 RSC에서는 사용 가능하다. 따라서 fetch()와 같은 함수를 사용할 수 있다.

app router 코드는 RSC에서 완벽히 호완 되어 RSC 표준화에 유리하다.

RSC는 상태를 가질 수 없다. useState를 사용하면 오류가 발생한다. onClick 이벤트도 사용할 수 없고, useEffect도 사용할 수 없다. 단, 컴포넌트 첫 줄에 'use client' 붙여서 CSR로 변경하면 사용 가능하다. 따라서 정적, 동적 페이지를 컴포넌트 별로 나눠서 제작하면 된다. RSC, CSR을 페이지 단위가 아닌 영역 단위로 생각하라!

 

2.7. luxon

날짜 포맷 라이브러리

npm에 DT로 표기되어 있는데, 만약 타입스크립트 사용이 필요하다면 별도로 types를 설치해야 한다.

npm i -D @types/luxon

 

2.8. query-string

쿼리 스트링 관리 라이브러리로서 쿼리 스트링을 편리하게 관리할 수 있다.

 

2.9. 오늘 날짜에서 하루 뺌

import { DateTime } from 'luxon';

params.targetDt = DateTime.now().minus({day: 1}).toFormat('yyyyLLdd');

 

2.10. React Suspense

서버 API 호출 로딩이 길 때 사용하는 기술, RSC의 경우 Suspence를 이용하는 것이 좋다.

2.11. etc.

누가 서버 사이드 렌더링이 필요한가? 사용자 vs 봇

is-bot : 봇인지 체크하는 라이브러리

컨포넌트 단위로 페이지를 만들고 관리하는 것이 편하기 때문에 리액트 사용, 불필요한 서버사이드렌더링, 하이드레이션 등에 의한 자원 낭비를 줄이는 방법으로 RSC 등장, 리액트를 프레임워크로 만든 것 Next.js!

 

3.  다양한 Next.js 활용법 배우기(3주차)

😉 3주차 강의 링크

3.1. API Routes

별도의 백엔드 서버를 이용할 수 있지만 node.js 레이어의 단독 서버를 이용할 수 있다.

API Routes는 서버에서 동작, 순수하게 데이터만 제공(콘솔 로그를 찍으면 브라우저 콘솔에는 찍히지 않음) 한다.

 

API Routes 활용예

• 메일 전송
• 데이터베이스 접근
• CORS(Cross-Origin Resource Sharing) 문제 우회

😉  CORS는 요청을 받는 쪽, 즉 서버에서 허용 여부를 결정한다. 이 보안 규칙은 브라우저에 적용되는 것이기 때문에 서버 간 요청일 경우에는 해당되지 않는다. 따라서 next.js 서버에서 타 서버의 API를 호출한 후 브라우저로 데이터를 보내 주어 우회할 수 있다. 이를 통해 외부 API에서 허용하지 않은 브라우저에서도 next.js 서버를 통해 데이터를 이용할 수 있다.

 

3.2. 블로그 연동

기업의 경우 일반적으로 기업의 홈페이지가 있는데 기업이 운영하는 블로그와 연동하고자 하는 경우가 있다.

블로그는 일반적으로 RSS 제공하는데, xml로 되어 있어서 xml2js와 같은 라이브러리를 이용해 json으로 변경하여 이용할 수 있다.

 

3.3. 내비게이션

내비게이션은 최상위 page.tsx에 작성할 수도 있지만 layout.tsx에 작성할 수 있다.

 

3.4. 의존성 설치

npm i xml2js luxon
npm i -D @types/xml2js
npm i -D @types/luxon

 

3.5. json 데이터를 보기 좋게

https://codebeautify.org/

위 웹 사이트를 이용하면 json 데이터의 뎁스를 보기 좋게 확인할 수 있다.

😉 json 데이터뿐만 아니라 거의 모든 데이터를 변환할 수 있다.

 

3.6. Server Actions

Server Actions을 사용하면 API를 작성할 필요 없이 비즈니스 로직만 작성하면 된다.

😉 이 실습에서는 이메일 발송 기능을 구현하였다. 이메일 기능은 스팸이 아니라는 것을 증명해야 하는 과정들이 추가적으로 필요하다.

 

3.7. Vercel을 이용한 배포 등

배포 방법 : Hobby에서 깃허브 아디로 로그인(개인 무료) > 깃허브의 프로젝트 임폴트 > 무중단 배포가 기본적으로 세팅되어 있음, 푸시만 하면 됨

엣지배포가 기본 값인데 직접 설정이 가능하다.

SST의 OpenNEXT 프로젝트 : 아마존 웹서비스에서 Next.js 파트

RSC에서 CSS in JS는 이모션만 지원

파이어베이스는 Nosql 방식

supabase는 postgresql로 관계형 디비

쿠키 라이브러리는 universal-cookie로 서버, 프론트엔드 가능한 같은 API 이용 가능하다.

 

3.8. 실습 중 만난 에러

강의 영상과 달리 나의 경우 티스토리 블로그로 실습을 진행하였다.

게시글의 날짜 형식이 강의 내용과 달라서 임의로 코드를 수정하여 진행하였다.

나 역시 luxon 라이브러리를 이용해 날짜 포맷을 변환하고자 하였는데 's is not a valid string.' 에러가 발생했다.

typeof를 찍어 보니 item.pubDate가 object였다. 즉, 날짜가 문자열이 아니라 배열 안에 있었기 때문에 발생한 에러였다. 코드에 0번 인덱스를 찍어 주어 해결하였다.

{DateTime.fromRFC2822(item.pubDate[0]).toFormat("yyyy-LL-dd HH:mm")}

 

3.9. 완성된 실습 코드

https://github.com/postforty/nextjs-app-router-wts.git