Node.js / Next.js / 서버 / 웹 프레임워크 / 라이브러리 / 패키지 / 모듈.. 웹의 전체적 흐름

·2024년 11월 6일
0

기록

목록 보기
2/4

익숙하지만 헷갈리지 않도록 정리해두자! 내가 이해하기 위한 용어들로!

서버 : "땅"

데이터를 다루기 위한 환경 "중앙" 이라도 생각해도 좋을 듯.

Node.js : "환경"

원래 브라우저에서만 살던 언어인 JS가 다양한 환경에서 살 수 있도록 만들어준 JS 런타임 환경

Next.js : "식탁"

React 기반의 프레임워크. React 앱이 올라온다. SSR, SSG 같은 기능. 프론트엔드 위주의 프레임워크.

Express : "식탁"

Next.js 보다 범용적인 프레임워크. 백엔드 위주의 프레임워크.

라이브러리 : 식탁에 달린 "수저통"

앱에서 필요하면 가져다 쓴다. 안에는 패키지, 패키지 안에는 모듈.


빌드 도구 : "조리 도구 패키지"

빌드 : 개발 중에 작성한 코드를 최종적으로 배포 가능한 형태로 만드는 과정
vite, webpack 같은 조리 도구 패키지 안에 각각의 도구들이 있는 것.

Bundler (믹서기): 파일들을 하나로 묶어 효율적으로 로딩 가능하게 함.
Transpiler (통역기): 최신 문법을 구버전 문법으로 변환해 호환성 확보.
Minifier (칼과 도마): 불필요한 부분을 제거해 파일 크기를 최소화.
Compiler (레시피 변환기): TypeScript와 같은 다른 언어를 JavaScript로 변환. ts컴파일러가 js로 변환해줌!


전체의 흐름을 정리해보자!

서비스가 음식, 데이터는 요리 재료, DB는 재료 진열대, 서버는 재료가 있는 환경/주방, API는 서버에서 재료를 가져오기 위한 카트, 웹 프레임워크가 음식이 놓이는 식탁, 라이브러리는 수저통, 빌드 도구는 조리 도구 패키지이고 그 안에 있는 도구들이 음식을 손님이 먹을 수 있게 최적화(미니파이어, 컴파일러, 등등), 브라우저는 손님이 먹는 자리

profile
'한 번 더!'의 가능성을 믿어! 오늘도 열심히 굴러가 보는 프론트엔드 개발자 😎

0개의 댓글