1. 자바스크립트
자바스크립트(javascript)는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어.
📝 생동감은 어떻게 불어넣을 수 있을까?
자바스크립트로 작성한 프로그램을 스크립트라고 한다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있으며 웹페이지를 불러올 때 자동으로 실행된다.
생동감은 이런 스크립트를 통해 웹페이지에 생동감을 불어넣을 수 있다.
예를들어, 웹페이지(브라우저)에서 자바스크립트로 할 수 있는 일은 다음과 같다.
- 새로운 HTML을 추가하거나 기존 HTML 혹은 STYLE 수정 (HTML+CSS)
- 사용자의 인풋 혹은 조작 행동에 맞춰 반응
- 네트워크로 데이터 요청을 보내고 파일을 다운받거나 업로드
- 쿠키를 가져오거나 설정. 사용자에게 질문을 건네거나 메시지 출력
- 클라이언트 측 데이터 저장(로컬 스토리지)
📝 자바랑은 다른 언어인가?
자바와 자바스크립트는 객제를 이용한다는 점에서 객체지향 언어는 비슷하나 실행 환경에서 차이가 난다.
자바는 자바 애플리케이션이나 자바 가상기계(JVM) 위에서 실행되기 때문에 JVM 환경을 만들어야하지만 자바스크립트는 웹 브라우저 위에서 실행되며 추가적인 환경 설정이 필요하지 않는다.
특히, 다른 언어처럼 컴파일을 할 필요가 없고, 플러그인을 설치할 필요도 없다는 점이 차이가 있다.
🎯 자바스크립트의 활용범위는?
자바스크립트는 생동감을 불어넣는 일에 설명한 내용처럼 브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있다.
마찬가지로 할 수 없는 영역도 존재한다.
기본적으로 브라우저는 보안을 위해 자바스크립트 기능에 제약을 걸어두었다.
- 디스크에 저장된 임의 파일 읽고 쓰거나 복사하고 실행할 때 제약받을 수 있음
- 파일을 다룰 순 있지만 일부 접근이 제한
- 카메라나 마이크 같은 외부 디바이스와 상호 작용에 허가가 필요
- 브라우저 내 탭과 창은 도메인, 프로토콜, 포트가 다르다면 서로 페이지에 접근 불가 (동일 출처 정책)
- 타 사이트나 도메인에서 데이터를 받아오는건 불가. 명확한 승인이 필요
이처럼 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 제약을 걸어두었다.
👍🏻 자바스크립트의 강점
자바스크립트는 이렇게 브라우저 안에서 강력한 모습을 보여준다.
HTML+CSS를 완전히 사용하여 웹을 디자인하고, 모든 주요 브라우저에서 지원하고 있다.
다양한 웹 프레임워크와 함께 간단하게 브라우저 인터페이스를 만들 수도 있다.
2. Express.js
Express.js는 Node.js를 기반으로 한 프레임워크, 미들웨어와 라우팅을 통해 강력한 웹 애플리케이션과 API를 개발할 수 있게 해준다.
쉽게 말하면 간단하게 서버를 구성할 수 있게 만든 라이브러리이다.
📝 웹 프레임워크는 무엇인가?
웹 프레임워크(web framework)는 웹 애플리케이션을 개발할 때 기본적인 구조와 기능들을 제공하여 개발자가 효율적이고 안정적으로 웹 애플리케이션을 구축할 수 있도록 돕는 도구 모음이다.
📝 미들웨어? 라우팅?
간단하게 설명하자면
- 미들웨어는 요청과 응답 사이에서 동작하는 함수로 웹 애플리케이션의 동작을 제어하는데 사용.
app.use((req, res, next) => {
// 미들웨어 로직 수행
// 다음 미들웨어 호출을 위해 next() 호출
});
use() 메서드를 사용하여 req(요청), res(응답), next(다음 미들웨어 호출)을 인자로 받는다.- 라우팅은 클라이언트의 요청에 따라 적절한 핸들러 함수를 호출하는 과정을 의미.
app.get('/users', (req, res) => {
// 요청된 URL 경로에 대한 로직 수행
// 응답 생성
});
get(),post(),put() 등 함수가 사용👍🏻 Express.js의 강점
가볍고 유연한 API를 제공하여 진입 장벽이 낮고 미들웨어와 라우팅을 통해 직관적인 구조이다.
경량화된 프레임워크로 빠른 성능이 강점이다.
👎🏻 Express.js의 약점
가벼운 만큼 구현해야 할 기능이 많고, 규모가 클수록 사용성이 낮아진다는 점이다.
구현할 기능이 많은 만큼 코드 구성이 어려운 경우도 있다.
3. Nest.js
가장 인기가 많은 Node.js 대표격 서버 프레임워크가 있다.
높은 성능과 빠른 개발이 가능하고, 사용자가 많아 커뮤니티가 활발하고 다양한 라이브러리가 제공되어 인기가 많다.
그만큼 정해져있는 아키텍쳐가 없기 때문에 개발자마다 구성하는 방식이 천차만별이므로 가독성과 유지보수에서 좋지 않다는 평이 있다.
이러한 문제점을 보완하기 위해 만들어진게 바로 Nest.js 서버 프레임워크이다.
Nest.js는 Express.js의 기능을 확장하여 보다 체계적이고 모듈화된 구조이고 HTTP 요청 및 응답을 처리, Express와 마찬가지로 미들웨어를 사용한다.
또한 OOP(객체 지향 프로그래밍), FP(함수형 프로그래밍), FRP(반응형 함수 프로그래밍)을 모두 결합한다.
👍🏻 Nest.js 의 강점
TypeScript 언어 기반으로 작성되어 TypeScript의 강력한 정적 테스트가 가능하여 사전에 버그를 방지하고 코드 재사용 및 유지보수성을 높여준다.
체계적이고 자세한 문서화가 가능하기 때문에 대규모 프로젝트에 적합하다.
👎🏻 Nest.js의 약점
TypeScript 언어 기반이므로 별도 공부가 필요하고, Express보다 무겁기 때문에 진입장벽이 높다는 점이다.
Nest.js는 아키텍쳐 추상화가 강제화되기 때문에 간단한 규모의 서버에서 성능 오버헤드 가 발생한다.
📝 아키텍처와 추상화?
아키텍처는 목표하는 대상에 대하여 그 구성과 동작 원리, 구성 요소 간의 관계 및 시스템 외부 환경과의 관계 등을 설명하는 설계도 혹은 청사진이다.
추상화는 전체적이고 포괄적인 개념을 설계한 후 차례로 세분화하여 구체화시킨 것.
📝 성능 오버헤드
오버헤드는 언어차원에서는 함수를 호출할때 함수 내용이 아닌 함수를 호출하는데 들어가는 비용, 시간을 의미한다.
즉, 간단한 규모의 프로젝트에서 Nest를 사용하면 계층 간 함수 호출 및 데이터 처리 과정이 추가적으로 발생하기 때문에 약간의 성능 오버헤드가 발생할 수 있다는 점을 의미한다.
참고 자료
1. 자바스크립트란?
2. 자바 자바스크립트, 엄연히 다르다? (차이점, 핵심 기능 비교)
3. Express.js 위키
4. 웹 프레임워크(Web Framework)
5. 웹 프레임워크의 개념과 목적
6. [Node.js] ExpressJS VS NestJS
7. NestJS는 왜 개발되었을까? 사용하는 이유를 알려드립니다!
