[Node.js] 프레임워크를 알아보자

웹 프레임워크

웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음

웹 프레임워크의 기본 구성요소

웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공함

• HTTP 요청 처리
  • 웹 프레임워크는 HTTP 요청을 처리할 수 있다.
  • 어떤 데이터를 필요로 하는지, 어떤 사용자로부터 요청이 수신되었는지 등
• HTTP 응답 처리
  • 웹 프레임워크는 HTTP 응답을 처리할 수 있다.
  • 응답 데이터가 어떤 형식인지, 응답 상태가 정상적인지 등
• 라우팅
  • 웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공한다.
  • HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정
• HTML Templating
  • 웹 프레임워크는 SSR을 구현하기 위한 방법을 제공한다.
  • SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해, HTML Template를 통해 미리 페이지의 뼈대를 작성 가능

CSR & SSR
양뱡항 통신으로 사용자와 상호작용하는 현대적인 웹은 대부분 동적 웹이다. 동적 웹은 사용자가 다양한 기능을 수행하고 프론트엔드와 백엔드가 유기적으로 통신하며 동작한다. 동적 웹을 구현하는 방법으로 CSR과 SSR이 있다.

CSR (Client-Side Rendering)
: 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식

• 사이트가 변하는 부분들을 프론트엔드에서 처리
• 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있음
• 서버와의 통신은 API 통신을 이용하고 데이터만 주고받음
• 빠른 반응이지만 페이지의 내용은 API 호출이 완료된 후에 보여짐
• 복잡한 프로젝트 구성, 큰 개발 사이즈

SSR (Server-Side Rendering)
: 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식

• 사이트가 변하는 부분들을 백엔드에서 처리
• 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달, 프론트엔드는 HTTP 응답을 받아 화면에 표시
• CSR에 비해 쉬운 구성, 작은 개발사이즈
• 로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
• 상대적으로 사용자가 보기엔 로딩이 느려 보임
• 페이지 이동할 때마다 다시 로딩하기 때문에 페이지 깜빡임

Node.js의 웹프레임워크

Express.js - Node.js 의 가장 유명한 웹 프레임워크
Koa.js - 현대적인 JavaScript를 적극적으로 사용하는 웹 프레임워크
Nest.js - TypeScript 를 사용하며, 고정된 구조를 제공하는 웹 프레임워크
기타 - Hapi, Sails.js, Meteor.js 등