[용어정리] NPM, CRA, VITE, CDN, NGINX 등..

 

* Package 

재사용 가능한 코드 모듈 또는 라이브러리. 

특정한 기능을 수행하는 코드 집합으로, 다른 패키지에 의존 (패키지 매니저를 통해 설치 및 관리).

 

* Package Manager

패키지를 설치, 업데이트, 삭제, 관리하는 도구.

 

• JavaScript: npm, yarn, pnpm
• Python: pip
• Java: Maven, Gradle
• Ruby: RubyGems
• Linux: apt, yum

 

 

---

 

[ JavaScript Package Manager ]

 

* npm

Node.js 애플리케이션의 의존성을 관리하고, JavaScript 패키지를 설치, 업데이트, 삭제하는 데 사용.

package.json 파일을 기반으로 작동.

프로젝트의 의존성, 스크립트, 메타데이터 등이 포함

 

* pnpm ( Performant npm )

저장 공간과 설치 속도 최적화에 중점을 둔 패키지 매니저. (대규모 프로젝트, 모노레포)

 

* yarn 

Facebook이 개발한 패키지 매니저로, npm보다 속도와 안정성 향상. (병렬설치 및 캐싱) 

 

---

 

https://velog.io/@bada308/%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80Package-Manager%EB%9E%80

패키지 매니저(Package Manager)란?

 

---

 

* 번들링

여러 파일(HTML, CSS, JavaScript 등)을 하나의 파일 또는 최적화된 여러 파일로 묶는 과정

 

* 번들러

• Webpack: 가장 널리 사용되는 번들러. 유연하지만 설정이 복잡.
• Rollup: 경량 번들링에 적합.
• ESBuild: 속도에 중점을 둔 번들러.
• Parcel: 설정 없이도 간편하게 사용 가능한 번들러.

 

---

 

* CRA ( Create-React-App )

React 애플리케이션 생성 도구.

Webpack 기반으로 동작하며, 프로젝트 초기 설정을 자동으로 처리.

 

=> Webpack은 개발 환경에서도 항상 번들링을 수행.

모든 파일을 하나의 번들 파일로 묶어서 브라우저에 제공하기 때문에, 

코드가 변경되면 전체 번들을 다시 생성. 

 

 

* Vite

JavaScript와 TypeScript 기반 프로젝트에서 사용되는 프론트엔드 빌드 도구. 

React, Vue, Svelte, Vanilla JS 등 다양한 프레임워크를 지원.

ES 모듈 기반의 빠른 개발 서버와 번들러를 제공.

 

=> Vite는 개발 환경에서 번들링을 생략하고, 프로덕션 환경에서는 ESBuild로 전체 코드를 번들링 (최적화된 번들 생성)

즉, 브라우저가 직접 ES 모듈을 처리하도록 설계되어,

코드가 변경되면 해당 모듈만 다시 요청하고 로드하여 전체 번들링 없이 빠르게 업데이트.

 

---

 

 

* ES 모듈 (ECMAScript Module)

JavaScript에서 표준화된 모듈 시스템으로, import와 export 키워드를 사용하여 모듈을 가져오거나 내보냄.

브라우저는 최신 ES 모듈을 번들링 없이 직접 로드. ( 브라우저가 ES 모듈을 지원하기 때문 )

 

---

 

* CDN ( Content Delivery Network )

전 세계에 분산된 서버 네트워크를 통해 콘텐츠를 빠르게 전달하는 시스템.

오리진 서버가 아닌 사용자와 물리적으로 가장 가까운 서버에서 콘텐츠를 제공하기 때문에, 빠르고 안전하게 전송.

                                 캐시 서버(PoP, Points of presence)

 

 

https://aws.amazon.com/ko/what-is/cdn/

CDN이란 무엇인가요? - 콘텐츠 전송 네트워크 설명 - AWS

 

 

https://www.netapp.com/ko/data-management/what-is-content-delivery-network/

콘텐츠 전송 네트워크(CDN) 이해하기 | NetApp

 

 

---

 

* Nginx

 

1. 정적 파일 제공

 - 정적 파일(HTML, CSS, JS, 이미지 등)을 브라우저에 전달.

 - 정적 파일 제공 속도가 빠르며, 캐싱과 같은 최적화 기능도 제공.

 

2. API 요청 프록싱

 - 클라이언트의 API요청을 백엔드 서버로 전달.

 ex)  /  요청은 정적 파일로 처리.  / api /   요청은 백엔드 서버로 전달.

 

3. 로드 밸런싱

- 여러 백엔드 서버로 요청을 분산시켜 트래픽을 균등하게 배분, 백엔드 서버 과부하 방지.

 - Nginx가 프록시 서버로 작동하여, 클라이언트는 백엔드 서버의 개수나 IP를 알 필요 없음.