리액트의 한계를 넘기위한 Next.js

sangj***

2023-02-27

실전에서 바로 쓰는 Next.js

웹 개발에서 리액트와 함께 가장 많이 사용되는 프레임워크인 Next.js의 사용법을 다루는 책으로, 기초 개념부터 고급 실무 기술까지 단기간에 마스터할 수 있는 도서입니다.

저자 : 미셸 리바
번역 : 박수현
출간 : 2023-01-20

한빛미디어의 "실전에서 바로 쓰는 Next.js"는 기존 React 개발자 혹은 자바스크립트 가능한 개발자, 백엔드 프로그래밍 개발자가 코드 예제를 따라 하면서 언어를 배울 수 있는 자습서 개념의 도서입니다. 아주 초심자 레벨이기보다는 기존의 언어를 몇 개 습득한 분들에게 더욱 도움이 될 수 있을 정도의 난이도를 가지고 있다고 생각됩니다.

도서의 두께와 크기는 그렇게 두꺼운 내용의 바이블 도서는 아닙니다. 충분히 들고 다니면서 학습할 수 있는 가벼움과 중간 사이즈의 도서이지만 내용 구성은 상당히 알찹니다.

Next.js가 리액트의 어떤 한계를 개선한 것인지는 기술 문서에 잘 나와있습니다만 가장 큰 특징은 개인적으로 SSR의 한계를 극복하기 위해 노력한 프레임워크라는 부분입니다.

서버 사이드 렌더링(SSR) 언어의 경우 CSR과 다르게 요청 이후 콘텐츠가 생성되면서 검색 엔진들이 자주 사용하는 키워드 검색이나 본문 검색 결과에서 누락되는 경우가 많기 때문에 서버 사이트 렌더링 시 검색엔진 최적화(SEO: Search Engine Optimization)의 문제를 해결할 수 있습니다. 이 내용은 2장 렌더링 전략에 여러 토픽을 통해 충실하게 나와있습니다.

1장의 서론 파트에서 다루는 내용인데 리액트를 사용해 본 개발자라면 Next.js가 그리 어렵지 않습니다. 모든 언어의 짜임새와 철학이 거의 유사하기 때문입니다. 이 도서는 React-Next.js의 혼용과 더불어 Next.js를 단독으로 사용하는 경우도 다루고 있습니다. 또한 리액트, Nest.js에 빠지지 않는 타입스크립트 지원이 Next.js에서도 그대로 연속됩니다.

PART2를 통해 기본 Next.js의 기능을 배우게 됩니다. 특히 10장의 내용이 리액트와 구본 되는 내용을 담은 하이라이트입니다. getStaticProps라는 함수를 통해 가능합니다. 페이지가 첫 요청될 때 한 번 실행되는 빌드 타임에 데이터를 불러와 페이지를 미리 만들어 둘 수 있습니다. 이렇게 미리 만들어진 페이지는 정적 파일로 저장되어, 다음에 같은 요청이 들어올 때는 캐싱된 페이지를 보여주기 때문에 속도가 빠릅니다.

개인적으로는 3장의 자동 이미지 최적화 내용이 흥미로웠습니다. 아직도 바이트 낭비 및 다양한 크기의 해상도 지원을 위해 외부 라이브러리를 사용하거나 서버리스 방식의 클라우드 리소스를 사용하는 경우가 많은데 백엔드 단에서 이 부분을 직접 해결이 가능하기 때문입니다.

PART3는 현업에서 웹 서비스 개발 시 자주 필요한 기능을 담고 있는 아주 실질적인 내용들입니다. 특히 토큰 형식의 JWT(JSON Web Token)을 통한 인증은 꼭 필요한 기능이고 사용자 세션 관리는 늘 중요합니다. 13장의 온라인 상거래 예제를 통해 CMS를 활용한 데이터의 추출과 표현, CRUD 기능을 충실히 다루었습니다.

마지막 14장에서는 앞에서 다룬 내용들을 독자에게 리마인드 시키고 앞으로 더 배워야 할 내용들을 책 이외의 내용을 포함하여 독자에게 알려주는 저자의 센스가 담겨있습니다.

(웹 ) 프레임워크를 고를 때는 프레임워크를

둘러싼 수많은 커뮤니티와 아이디어,

생태계를 고려해야 합니다.

-- 14장 내용 중에서,

Nest.js는 무궁무진한 가능성을 가진 프레임워크입니다. 이 책을 통해 핵심 내용을 스터디하고 다양한 커뮤니티내 지식과 예제를 통해 본인만의 기능을 개발하다 보면 어느새 Next.js 전문가가 되실 거라 생각합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

실전에서 바로 쓰는 Next.js

저자

미셸 리바

출판

한빛미디어