라이브러리 적용 방법: CDN, npm 설치, 다운로드 설치의 차이점

요즘 웹을 제작하면서 안 써본 기능들을 쓰려하니
본의 아니게 많은 라이브러리를 접하고 설치 및 적용하게 됐다.

 

 

 

근데!!!!!!!!!!

그럴 때마다!!!!!!!!!

 

설치 및 적용방법을 다운로드 후 적용하라고 강요받았다....

나는 NPM설치가 제일 익숙하고!

CDN은 한두 번 써보긴 했고..

다운로드방법은 간간이 보였다

 

 

(처음 알게 됐고, 업데이트가 최근에 없는 오래된 라이브러리일수록 다운로드가 많았다<<단순히 우연의 일치인 거 같다)

 

 

 

 

 

 

어쨌든 이제는 또 정리해야만 할 때가 온 것이다..!

 

(본론 시작)

 

 

바쁘신 분들은 마지막 요약만 보셔도 됩니다!

 

 

 

 

1. CDN (Content Delivery Network)

 

 

CDN이란?

 

CDN은 라이브러리를 외부 서버에서 직접 불러오는 방식이다.

라이브러리의 파일을 웹 서버에 저장하지 않고,

해당 라이브러리를 제공하는 외부 서버에서 불러오는 방식으로

 HTML 파일에서 <script> 태그를 통해 해당 URL을 삽입하면 된다.

 

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

이런 식으로 삽입하면 된다

 

 

 

장점

• 빠른 시작: 설치 과정 없이, 라이브러리 URL을 HTML 파일에 삽입하는 것만으로 바로 사용할 수 있다.
• 캐싱: 많은 사용자가 동일한 CDN을 사용할 경우, 브라우저가 해당 라이브러리를 캐싱하여 로드 속도가 빨라질 수 있다.
• 서버 부하 감소: 라이브러리가 외부 서버에서 로드되기 때문에, 내 서버의 리소스 사용이 줄어든다.

 

 

단점

• 외부 의존성: 인터넷 연결이 없거나 CDN 서버가 다운될 경우 라이브러리를 사용할 수 없다는 위험이 있다.
• 버전 관리: 최신 버전으로 자동 업데이트되지 않기 때문에, 수동으로 버전 관리가 필요하다.

 

 

 

 

 

2. npm 설치 (Node Package Manager)

 

 

 

npm이란?

npm은 JavaScript의 패키지 관리자이다. 개발자가 원하는

라이브러리를 로컬 환경에 설치하여 사용하는 방식이다. npm install 명령어로

프로젝트에 필요한 라이브러리를 설치하고, package.json 파일에 의존성을 관리할 수 있다.

 

 

npm install 라이브러리명

이런 식으로 git bash에 입력하면 된다.

(내가 주로 사용하였고, 익숙한 방법이다!)

 

 

장점

• 버전 관리: package.json 파일을 통해 설치된 라이브러리의 버전을 명확하게 관리할 수 있다.
• 로컬 개발 환경: 로컬에 라이브러리가 설치되기 때문에 인터넷 연결 없이도 개발을 할 수 있다.
• 대규모 프로젝트 적합: 수많은 라이브러리를 체계적으로 관리할 수 있고, 빌드 과정에서 최적화를 쉽게 할 수 있다.

 

 

 

단점

• 초기 설정 시간: npm을 사용하려면 Node.js 환경 설정과 라이브러리 설치 시간이 필요하다.
• 서버 부하: 라이브러리를 로컬에 저장하므로 서버의 용량을 차지할 수 있다. (개인적으로 치명적인 단점이라고 생각한다)

 

 

 

3. 다운로드 설치

 

 

 

다운로드 설치란?

라이브러리 파일을 직접 다운로드하여 프로젝트 폴더에 저장한 후 사용하는 방식이다.

라이브러리의 JS 파일을 직접 다운로드한 후, HTML 파일에서 <script> 태그로 불러온다.

 

 

<script src="/js/jquery.min.js"></script>

1번과 방법이 비슷하다.

 

 

 

 

 

장점

• 인터넷 불필요: 다운로드된 파일은 프로젝트 내에 포함되므로, 외부 서버나 인터넷 연결 없이 사용할 수 있다.
• 최종 파일에 포함 가능: 모든 파일이 프로젝트에 포함되므로, 배포 시 의존성 관리가 쉽다.

 

 

 

단점

• 버전 관리: 버전을 수동으로 관리해야 하고, 새로운 업데이트가 있을 경우 수동으로 라이브러리를 교체해야 한다.
• 서버 부하: 모든 파일이 로컬에 저장되므로, 서버의 저장 공간을 사용하게 된다.

 

 

 

 

요 약

(바쁘신 분들을 위해, 나를 위해 표로 정리해 봤다)

 

 

 

 

결론

 

• CDN: 빠르게 프로젝트를 시작하고 싶거나 간단한 웹 페이지를 만들 때 유용하다. 하지만 외부 서버에 의존성이 있으며 버전 관리가 불편할 수 있다.

 

• npm 설치: 대규모 프로젝트에서 라이브러리 의존성을 관리하기에 적합하며, 버전 관리도 용이하다. 로컬 환경에서 모든 의존성을 설치하므로 서버 리소스를 사용하지만, 안정적인 개발 환경을 제공한다.

 

• 다운로드 설치: 인터넷 연결이 불안정하거나 외부 의존성을 줄여야 할 때 사용한다. 그러나 수동으로 버전 관리해야 하고, 서버 용량을 사용하게 된다.

 

 

상황에 따라 세 가지 방법을 적절히 선택하면 프로젝트에 필요한 라이브러리를 효율적으로 적용할 수 있다.

(난 버전 수동관리가 어려울 거 같아서 일단 npm으로 해야겠다..)

 

 

 

여담으로 광고가 본문에도 자동으로 삽입되있어서
가독성을 해치는거같았다.
그래서 본문에는 광고를빼버렸다
감사합니다!