[SpringBoot] SpringBoot에서 npm사용하기

Package Manager

지금까지는 javascript라이브러리를 github에서 찾아서 직접 파일을 다운로드 한 후 프로젝트에 넣어줬다.

하지만 npm이 있으면 이런 작업이 필요없다.

그냥 npm install 패키지명을 치면 라이브러리가 다운로드된다.

이렇게 패키지를 관리해주는 툴을 Package Manager라고 한다.

 

java진영에서 쓰는 maven같은 거라고 생각하면 된다.

 

최근에는 npm과 yarn을 주로 쓴다. 둘다 비슷하지만 yarn이 모든 프로젝트에서 똑같은 버전이 깔릴것을 보장하기 때문에 보안 측면에서 좋다고 한다. 하지만 npm이 점유율이 높다.

우리는 npm을 설치해보자

Node.js다운로드

npm을 따로 다운로드 할 수 있지만, 복잡하다. 그냥 node.js를 다운로드받으면, npm이 같이 설치되기 때문에 이 방법이 더 편하다.

node.js 공식 사이트에서 LTS버전을 다운로드하자

https://nodejs.org/ko/

Node.js

 

node 가 잘 깔렸는지 확인하려면 cmd를 열어서 버전을 검색해보자.

node -v
// v16.14.0

npm -v
// 8.3.1

npm init

이제 우리의 프로젝트의 프론트엔드 폴더로 간다.

frontend 와 backend가 나눠져있다면, frontend의 root에서,

그냥 spring boot에서 사용한다면 spring boot의 정적컨텐츠를 관리하는 폴더인 src/main/resources/static에서

npm init을 입력하여 초기화해준다.

 

우리는 spring의 기본설정폴더에서 npm init을 해주자

terminal을 열고

cd src/main/resources/static

npm init

뭐라고 나오는데 전부 엔터하면된다. 이게 귀찮다면 npm init -y 옵션을 달아주면 된다.

 

이제 package.json이 생겼을 것이다.

이제 bootstrap을 한번 깔아보자.

npm install bootstrap

bootstrap을 깔때 어떤 이름으로 깔아야 하는지는 bootstrap공식사이트나, bootstrap npm 같은 식으로 구글링하여 찾을 수 있다.

 

그러면 이렇게 node_modules파일이 생긴다.

앞으로 npm은 node_modules안에 모든 라이브러리를 설치할 것이다.

 

또 package.json을 보면 dependencies가 추가된 것을 볼 수 있다.

이제 이 package.json만 있으면 dependencies에 추가된 모든 패키지를 npm이 알아서 설치해준다.

확인하고 싶으면 node_modules를 삭제하고 npm install을 다시해보자.

 

번들러 없이 js파일을 script로 추가하고 싶을때는

<script src=".../node_modules/..." />

방식으로 .js파일의 위치를 입력해줘야한다.