React

사내 스터디 기록 - NEXT.JS 체험기

작지 2023. 7. 25. 11:51

작성일자 2023 04 23 /

해당 NEXT.JS 버전 13.3.1

프론트엔드 웹에서 가장 핫하다는 NEXT.JS 저희만 모르고 가면 안되겠죠?

그래서 NEXT 가 가지고 있는 장점이 무엇인가요?

 

다들 알고있겠지만 CSR과 SSR을 동시에 사용할 수 있다는 점입니다.

하지만 NEXT.JS를 SSR, CSR, SPA 관점으로만 이해하시는 분들이 많았습니다.

 

NEXT.JS는 React 라이브러리를 이용해서 웹 어플리케이션을 만들기 위한 Framework 입니다.

React는 UI만을 다뤄오고 React를 이용해 어플리케이션을 개발하면서

필요한 나머지 부분들을 서드파티 라이브러리로 대체되어 개발되고있습니다.

 

NEXT.JS 는 그 React를 사용하고  있는 하나의 프레임워크 라고 생각하시면 될 것 같습니다.

SSR은 수많은 기능 중 하나일 뿐이구요.

그렇다고 해도 가장 유용하게 쓰인건 SPA 환경에서 구현하기 힘든?? SSR이 정말 매력적이긴 하였죠.

일단 CSR, SSR 비교를 해보자면

CSR 과 SSR

CSR

CSR의 특징은 하나의 큰 페이지에서 이동을 하고 그 뒤에 JS 코드를 동작시켜 UI를 그릴 수 있습니다.

 

장점 1. 빠르게 페이지 이동이 가능합니다.

장점 2. 동적인 페이지를 구현하기에 매우 유리합니다.

장점 3. 서버에 부담을 줄일 수 있습니다.

 

단점 1. 로딩 속도가 느리다.

단점 2. SEO에 불리하다.

SSR

서버측에서 미리 HTML 파일로 생성시킨 파일을 유저에게 보여줍니다.

CSR은 필요한 리소스를 변환시켜 보여주기 떄문에 첫 페이지 구동 이후에 속도가 빠릅니다.

 

장점 1. 초기 로딩이 빠릅니다.

장점 2. SEO에 유리합니다.

장점 3. 사용자에게 로딩화면을 보여주지 않아도 됩니다.

 

단점 1. 초기 로딩 이후의 속도가 CSR보다 느립니다.

단점 2. 서버 부하가 많이갑니다.

 

근데 이것만으로 NEXT.JS가 이렇게 열풍적인 인기를 끌 수 있었을까요?

NEXT.JS가 생각하고있는 어플리케이션을 만들기 위해 필요한 목록입니다.

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

 

  • User Interface
  • Routing
  • Data Fetching
  • Rendering ( SSR, CSR )
  • Integrationsh
  • Infrastructure
  • Performance
  • Scalability
  • Developer Experience

SSR은 이 수많은 기능 중 하나일 뿐입니다.

제가 사용했던 기능 중 인상적이었던 부분들은 다음과 같습니다.

 

  1. auto routing 
    • react navigation을 사용하지 않아도 폴더 디렉토리 명으로 관리가 가능합니다..
  2. _document, _app, _middleware 설정의 간편함
    • 미들웨어, 초기 앱의 작동을 위한 설정이 매우 간편합니다.
    • document → HTML 엘리먼트 전역 컨트롤시 사용
    • app → React, NEXT 엘리먼트 전역 컨트롤
  3. Vercel의 CI / CD 기능 활용 가능
    • CI / CD 기능을 매우 편리하고 간편하게 활용할 수 있습니다.
  4. Image 자동 Blur 처리 및 캐싱
    • NEXT 에서 자동 제공해주는 말도안되는 기능 중 하나입니다.
    • 하지만 ? 사용하려면??? 돈을?? 더 ?? 내야한다??
  5. serverless 환경에서 개발이 가능하다.
    • 백엔드를 따로 만들어서 배포할 필요성이 없다.
    • nextJS 내에서 api를 구현하여 사용할 수 있어 개발시간의 단축을 할 수 있습니다.
  6. SEO 설정의 간편함
    • NEXT.JS API를 사용하여 간단히 설정 가능합니다. 어우 너무좋아

가볍게 6가지 정도의 내용들을 적어두었는데요. 이 외에도 많은 기능을 가지고있습니다.

NEXT.JS 빌드

npx create-next-app --typescript

빌드시에 안내문이 나옵니다.

  1. 이름은 무엇으로 지을것인가. // my-app
  2. eslint를 자동설정 해둘것인가 // yes
  3. tailwindcss를 자동설정 해둘것인가 // yes
  4. 해당 폴더위에 바로 빌드할것인가. // yes
  5. 13버전부터 나온 /app 파일 통합버전으로 프로젝트를 진행할것인가. // no

저는 위에있는 주석과 같이 빌드를 하였습니다.

5번을 yes로 할 경우 pages가 사라지고 app으로 통일

잠깐 Tailwindcss 가 뭔데 default 로 설정을 하라는거야?

Tailwindcss

https://tailwindcss.com/

저희가 프로젝트를 빌드하며 tailwindcss 설치에 동의를 하였습니다.

tailwindcss란 css를 거대하게 클래스화 시킨 프레임워크라 생각하시면 되겠습니다.

 

백문 불여일견이라 하였습니다. 바로 보여드리겠습니다.

지금 Home에 작성된 className들은 전부 tailwindcss로 작성된 클래스입니다.

차례대로

{
	backgroundcolor: ‘white’,
	display: flex,
	justifyconent: center,
	align-items: center,
}

 

해당 문구를 간편하게 작성이 가능합니다.

또한 세세한 컨트롤이 가능하여 개발자의 경험이 좋은 편입니다.

 

하지만 위에 보이다싶이 4개의 클래스를 넣는데 한줄을 통째로 잡아먹어 코드 미관상 좋지 않습니다.

그래서 저는 tailwind-styled-components 라는 패키지를 사용하였습니다.

npm i tailwind-styled-components

해당 패키지는 styled-components와 tailwind를 병합하여 사용할 수 있도록 해주는 패키지입니다.

https://styled-components.com/

 

그전에 Styled-components 를 알아보자..

Styled Component

styled-components는 스타일 컴포넌트를 만들수 있도록 만들어주는 라이브러리입니다.

스타일에 변수 할당이 가능한점이 매우 매력적인 라이브러리입니다.

이 두가지를 통합하여 사용한다면 효율과 코드 가독성 전부 가져갈 수 있을 것이라 판단하여 이 두가지 패키지를 혼합하여 사용하겠습니다.

Tailwind-Styled-component

아쉽게도 기능은 잘 구현이 되지만 문제가 되는 부분이 두 가지 있습니다.

 

인식을 못해...

자동완성기능이 안된다.

props.${parameter} 값의 인식이 안됩니다..

 

해당 부분은 vscode에서는 해결이 되지만 webstorm 환경에서는 해결이 되지 않았습니다.

코드는 작동합니다!

작동은 한다니까? 타입에러가 나서 그렇지..

 

제가 사용한 이 외의 툴, 라이브러리

https://github.com/wkdtpzld/CarrotMarket

 

GitHub - wkdtpzld/CarrotMarket: Serverless CarrotMarket clone using => NEXT.JS , Tailwind, Prisma, PlanetScale and Cloudflare

Serverless CarrotMarket clone using => NEXT.JS , Tailwind, Prisma, PlanetScale and Cloudflare - GitHub - wkdtpzld/CarrotMarket: Serverless CarrotMarket clone using => NEXT.JS , Tailwind, Pris...

github.com

저는 당근마켓 클론코딩을 NEXT.JS 를 사용하여 서버리스 환경에서 개발하였습니다.

 

백엔드 부분을 담당하는 ORM, DB는 Prisma와 PlanetScale을 사용하였습니다.

Prisma는 Node.js 에서 사용 가능한 ORM 입니다. SQL 문을 안쓰고 js코드로 설정 가능하여 간편하게 사용 가능합니다.

PlanetScale은 MySQL과 호환되는 Serverless 데이터베이스 플랫폼입니다.

Vitess를 제공하며 MySQl을 스케일링하기 좋습니다.

Vitess를 사용하는 이유에는

  1. 수평 스케일
  2. 고가용성 (Vitess의 기본 복제본 구성은 예기치 않은 이벤트가 발생할 때 기본에서 복제본으로 원활한 장애 조치를 허용합니다.)
  3. MySQL 호환
  4. 쿠버네티스 네이티브
  5. 구체화된 뷰
  6. 온라인 스키마 마이그레이션

이러한 장점이있지…만?

저는 우선 AWS에 올리지 않고 저렴하게 사용할 수 있던 점에서 사용했습니다.

Prisma와 빠르게 호환된 점도 장점이었습니다.

그 외에 내가 NEXT.JS를 사용하면서 유의하면서 사용한 렌더링 방식

SSG

SSG란 (Static Site Generate) 의 줄임말입니다.

개발자가 빌드 시에 사전에 생성된 페이지를 만들어 static 페이지를 가질 수 있게 해줍니다.

클라이언트에서 페이지 요청시 빌드시에 이미 준비되어있는 페이지를 제공하기에 매우 빠른 속도를 가지고있습니다.

기본적으로 정적 페이지에 잘 사용됩니다.

변경사항이 있다면 현재 페이지에서 다음 페이지를 생성후 사용자에게 보여줍니다.

ISR

ISR은 Incremental Static Regeneration 줄임말입니다.

쉽게 설명하자면 SSG의 강화판 이라고 생각하시면 좋겠습니다. SSG가 이미 빌드된 페이지를 제공한다면

ISR은 특정 시간을 설정하여 해당페이지를 다시 빌드하여 사용자에게 보여줄 수 있습니다.

ORD

ORD는 On-demand Revalidation 줄임말입니다.

ISR은 특정 시간을 설정하여 해당페이지를 빌드하지만

ORD는 특정 행동이 트리거가 되어 다시 빌드하는 형식입니다.

데이터 패칭

SWR

https://swr.vercel.app/ko

NEXT.js 팀에서 만든 데이터 패치 라이브러리입니다.

그래서인지 NEXT.js 에서는 SWR이 React Query에 비해서 기능이 좀 더 좋다고 느껴지는 부분이 있었습니다.

SWR에서는 SSR, ISR, SSG를 지원합니다.

BoundMutation, Automatic Revalidation 등 여러 기능을 지원하고있습니다.

가볍고 빠르다. 데이터의 업데이트가 빠르게 이루어진다.

React 18 suspence 기능을 지원하는 등 NEXT 에서 사용하기 좋은 데이터 패치 라이브러리입니다.

React hook form

https://react-hook-form.com/

input, form 에 관하여 비정상적으로 길어지는 코드들을 효과적으로 케어할수 있는 라이브러리입니다.

NEXT AUTH

 

인증, 인가를 빠르게 제공하도록 도와주는 NEXT.JS 라이브러리 입니다.

https://next-auth.js.org/

 

NextAuth.js

Authentication for Next.js

next-auth.js.org

CloudFlare

AWS S3 사용할 돈이 없어서..

CloudFlare를 사용하게 되었습니다.

한달에 단 15000원으로 이미지, 실시간 스트리밍, 이미지 리사이즈를 제공합니다.

다만 사용량이 많으면 그만큼 더 나오긴 합니다.

https://www.cloudflare.com/ko-kr/