nextjs , typescript 활용한 프론트 개발

 

nextJS는 웹 프런트엔드 라이브러리인 리액트를 기반으로 구현 및 개발되었다. 

리액트를 기반으로 하지만, node js 서버의 기능도 일부 가지고 있다

기존 리액트 애플리케이션은 모든 콘텐츠를 클라이언트 사이드인 브라우저에서 렌더링한다. 이는 리액트가 웹 프론트엔드에 최적화된 라이브러리이기 때문이다. nextjs를 사용하면 서버 사이드에서 렌더링되는 애플리케이션으로 만들 수 있다. 

nextjs는 리액트 자체만 사용할 때보다 개발하기 쉽다. 

 

서버 사이드 렌더링

서버에서 요청에 대한 page의 HTML 반환

 

장점

- 사이트를 빠르게 표시할 수 있다

- 서버에서 콘텐츠를 생성하므로 SEO 향상

 

단점

- node.js와 같은 서버사이드 자바스크립트 실행환경이 필요하다

- 서버 CPU부하가 증가

- 서버와 클라이언트에서 자바스크립트 로직이 분산

 

SSG(정적 사이트 생성)

사전에 정적파일로서 생성하고 베포하는 구조. 서버사이드 랜더링은 서버로 접근할때 html을 생성하므로 트래픽이 많을때는 서버의 부하를 고려해야 하고, ssg는 이를 보완한다.

사전에 랜더링한 결과를 서버에서 처리하지 않고 정적 html파일로서 호스팅할 수 있다. 

 

typescript 타입스크립트는 현재 프론트엔드개발 언어의 표준으로 자리잡았으며, 자바스크립트에 정적 타입기능을 탑재한 프로그래밍 언어이다. 

 

현재 프론트엔드 기술 요소 

1. 컴포넌트 설계

ui : tailwind css

컴포넌트구현 : Atomic Design, React/React Hooks

상태 관리 : React props/state , Flux/Redux. Context

테스트 : Mocha, Jest, Selenium

2. 실행환경

서버런타임 : Node.js, docker, MySQL

UI 프레임워크 : React, Vue, Angular

CI/CD : CircleCI, Githun Actions, Jenkins

3. 애플리케이션 설계

API 설계 : REST API , GraphQL

배포 : vercel, CDN, Amazon S3/Lambda

라우팅 설계 : React Router, Next.js

PWA : 온라인 캐시

랜더링설계 : SPA,SSG,SSR,Next.js

SEO : Google Analytics, Search Console

 

타입스크립트로 next js 웹 개발을 하는 과정을 기록할 것이다.