[Vue] CDN과 NPM은 무엇이고, 뷰 애플리케이션 생성시 차이점은 무엇인가? +Vita

 

CDN의 정의

 

CDN (Content Delivery Network)

- 전 세계 여러 서버에 콘텐츠를 분산 배치하여 사용자에게 더 빠르게 제공하는 네트워크

- 주로 웹 페이지의 정적 자산 (이미지, CSS, JavaScript)을 전송하는데 사용됨

- 주요 목적은 콘텐츠 로딩 속도를 개선하고 서버 부하를 줄이는데 있음

 

CDN의 문제점

 

1. CDN의 서버 의존성 : 외부 CDN을 사용할 경우 CDN서버가 다운되거나 문제가 발생하면 웹 사이트 성능이 저하되거나 콘텐츠가 로드되지 않을 수 있음. 

주요 사례 - https://news.hada.io/topic?id=14613

 

2. CDN 지역적 가용성 문제 : CDN는 전 세계에 분산되어 있지만 모든 CDN 제공자가 전 세계 모든 지역에 동일한 수준의 인프라를 갖추고 있지 않아 일부지역에서는 성능이 낮아질 수 있음

 

 

NPM의 정의

 

NPM (Node package Manager)

- JavaScript와 Node.js 패키지를 설치하고 버전을 관리

- 프로젝트에서 사용하는 모든 패키지의 의존성을 자동으로 관리하고 설치

- 자신이 작성한 패키지를 NPM 레지스트리에 배포하여 다른 개발자들이 사용할 수 있게함

 

 

CDN과 NPM의 차이

 

CDN으로 뷰 애플리케이션 설치

- CDN은 별도의 개발환경 없이 script 태그만 추가하여 뷰 애플리케이션을 바로 적용할 수 있음

- 개발에 필요한 라이브러리를 직접 추가해야하고 의존성 관리도 직접 해야함

- HTML과 함께 사용해야하여 모듈화가 필요한 대규모 프로젝트에는 부적합함

- Vue SFC(싱글 파일 컴포넌트, Html, JavaScript, CSS를 한 파일에 결합하는것) 를 사용할 수 없음

 

NPM으로 뷰 애플리케이션 설치

- 사전에 설치해야하는 과정이 번거롭다

- 프롬프트(prompt)를 이용하여 뷰 애플리케이션의 초기 세부 설정을 할 수 있다.

- 패키지에 대한 의존성 관리가 쉽다

 

 

Vite와 NPM의 관계

 

Vite의 역할

- Vite는 개발 서버 제공, 프론트엔드 빌드, 최적화된 프로덕션 빌드를 생성

- 개발 환경에서 빠른 번들링과 HMR(Hot Module Replacement)를 제공

-  ESM(ECMAScript Modules)을 사용해 필요한 모듈만 로드하므로 개발 시 번들링 없이 매우 빠른 초기 로딩 속도를 제공함

- 프로덕션 빌드시에는 Rollup을 이용하여 최적화된 번들을 생성

 

 

Vite와 NPM의 관계

- Vite는 NPM을 통해 설치된다.

- Vite가 동작하는 동안에도 패키지는 NPM을 통해서 관리된다.

- Vite는 개발서버 제공과 프로젝트 빌드를 담당하고 NPM은 패지키와 빌드 도구(Vite)를 관리함