TypeScript + Next.js +React 개발 - 1

Next.js란?

• Next.js 는 리액트 기반으로 구현된 오픈소스 웹 어플리케이션 프레임 워크다.
• 기존 리액트 어플리케이션은 모든 콘텐츠를 클라이언트 사이드인 브라우저에서 렌더링한다.
• 반면, Next.js를 사용하면 서버 사이드 렌더링이 가능한 어플리케이션으로 확장할 수 있다.
• 리액트만을 사용하는 것보다 훨씬 개발하기 쉽다고 하는데.... 도전해보기🙋‍♀️

TypeScript란?

• 자바스크립트에 정적 타입 기능을 탑재한 언어
• 타입 지정을 통해 자바스크립트에서 발생했던 의도하지 않은 에러를 방지할 수 있다!

모던 프론트엔드 - Next js와 TypeScript

• 이 둘의 조합을 모던 프론트엔드라고 칭하기도 하는데, 그렇다면 그 전의 역사는 어떨까?

1. 1995년 자바스크립트의 탄생

• 넷스케이프사와 마이크로 소프트에서 에서 브라우저 내에서 작동하는 스크립트 언어인 자바스크립트를 출시함.
• 그러나 과도한 애니메이션 구현, 브라우저 내에 부담을 주어 크래시발생 사례가 증가하고 보안에 대한 우려로 인해 프론트엔드의 겉 모습을 꾸미는 정도로만 사용됨

2. 구글 지도 서비스와 Ajax의 등장

• 비동기로 HTTP 통신을 하는 Ajax를 활용해 인터렉티브한 웹 어플리케이션 구글 지도의 등장
• 페이지 새로고침없이 필요한 부분만 서버에서 받아와 UI를 변경할 수 있게 되자 JS가 다시 주목을받음
• 이후 Gmail, SNS, 게임 등 다양한 개발생태계에서 JS를 사용하게 되었다.

3. 크롬의 V8 JS 엔진

• JIT VM 타입의 자바 스크립트 엔진 V8이 크롬에 탑재되어 자바스크립트의 속도를 비약적으로 늘리는 계기가 되었음

4. 제이쿼리의 탄생

• Ajax의 탄생 이후, RIA라고 불리는 클라이언트 사이드 구현을 위해 Ajax와 고도의 Dom 조작이 요구됨
• 기업 별로 최신 웹 표준 구현을 위한 속도 경쟁이 치열해지고 각 브라우저 벤더가 독자적으로 구현을 계속해 자바스크립트 엔진과 렌더링 엔진의 작동에 많은 차이가 생기기 시작함
• 안드로이드 단말기에서도 웹 브라우저 기능을 제공하면서 보급이 가속화되었음
• 이로인해 프론트엔드 개발자는 브라우저 별로 작동을 이해하고 코드 수정에도 시간을 많이 들이게 됨
• 이에 따라 브라우저 간의 차이를 고려해 코드 작성이 가능한 라이브러리, JQuery가 유행함

JQuery의 장점

• 크로스 브라우저 호환 가능
• 간결한 Dom 조작 / 애니메이션 구현
• 라이브러리의 풍부함

그러나 제이쿼리의 단점도 부각되며, 점점 사용률이 낮아지게 됨

JQuery의 단점

• 글로벌 스코프의 오염
• Dom 조작 구현이 복잡해짐
• 라우팅 등 여러 페이지의 웹 어플리케이션 구현 구조가 없음
• 브라우저의 표준화로 작동의 차이가 눈에 띄지 않게 되었음
  (브라우저 간 호환 코드의 필요성 부재)

SPA와 MVC/MVVM 프레임워크

• SPA란 전체 HTML를 로드한 뒤, 이후에는 사용자 인터랙션에 맞춰 Ajax로 정보를 얻고 동적으로 페이지를 얻는 웹어플리케이션을 말함.
• 네이티브 처럼 부드러운 사용자 경험을 제공할 수 있어 많은 서비스가 SPA로 구현되어 있음.
• 브라우저의 URL을 지정해 서버로부터 콘텐츠를 반환하는 방식이 아니라, 클라이언트 사이드에서 페이지 이동을 수행하고 Ajax를 통해 필요한 부분만 데이터를 얻어 뷰를 표시함.
• SPA의 등장 이후로는 JSON 형태의 API가 서버 사이드와 프론트엔드의 연결을 담당하는 설계가 보급되었으며, 서버 사이드 로직과 프론트엔드 로직을 분리하기 쉬워졌고 ios나 네이티브 어플리케이션 구현시에도 사용이 가능하다는 이점이 있음.

SPA의 장점

• 고성능의 어플리케이션 제공 가능
• 서버 사이드 엔지니어 / 프론트엔드 엔지니어의 분업이 쉬워짐
• JSON API를 통해 느슨한 결합의 설계가 가능해짐

SPA의 단점

• JS 읽기와 렌더링이 발생하게 되는데 이애 대한 대책이 없으면 초기 표시에 시간이 걸릴 수 있다
• 높은 학습 비용과 많은 코드양...

SSR/SSG의 필요성

• SPA와 같은 클라이언트 사이드 렌더링의 초기 지연 문제로 인해 SSR, 서버 사이드 렌더링을 통해 서버사이드 자바스크립트 실행 환경에서 요청에 대한 페이지 생성 후 HTML을 반환.
• 즉, 서버 측에서 자바스크립트를 실행하구 -> HTML을 생성함.

서버 사이드에서 수행 결과를 반환해 사이트가 빠르게 표시됨
서버사이드에서 콘텐츠를 생성 -> SEO 향상으로 이어짐

그러나 단점은

자바스크립트 실행 환경이 있어야 하고, 서버사이드에서 렌더링되어 CPU 부하 발생
서버 / 클라이언트에서 JS 로직 분산 가능성

• "타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발"을 참고하여 작성된 글입니다