spring boot 환경에서 npm 설정하는 방법

개요

npm은 Node.js 패키지 관리자로, JavaScript를 위한 패키지들을 설치하고 관리하는 도구입니다. 이를 통해 다른 개발자들이 만든 수많은 패키지들을 손쉽게 설치하고 프로젝트에 활용할 수 있습니다. npm은 프로젝트의 종속성을 관리하고, 패키지 버전을 업데이트하거나 삭제하는 등의 작업을 수행할 수 있어 개발 생산성을 높이는 데 도움이 됩니다.

npm 설정을 통해 기존에 네트워크를 통해 cdn에서 받아오거나 혹은 홈페이지에서 javascript 라이브러리를 다운받아서 프로젝트 경로에 위치시켜서 사용하는 방식에서 npm으로 라이브러리를 다운받고 버전들을 하나의 파일(package.json)에서 관리하는 이점을 얻을 수 있습니다.

 

 

 npm 설정 방법

우선 node.js를 설치해줍니다.

node.js공식홈페이지 에서 LTS 버전을 받아서 설치를 해줍니다.

 

nodejs 설치가 완료되면 프로젝트\src\main\resources\static 경로에서 npm init 명령어를 입력하면 package.json 파일이 생성되고 해당파일에 패키지들을 관리하게 됩니다.

src\main\resources\static> npm init

 

npm init 명령어를 입력하면 package.json 파일 이외에도 node_modules 폴더가 생성되고 해당 폴더 안에 package.json에 있는 패키지들과 그 패키지들이 의존하고 있는 패키지들이 포함되게 됩니다.

 

현재 cdn으로 가져오고 있는 bootstrap 5.3.0을 아래의 명령어를 통해 설치해줍니다. npm i는 npm install과 같은 명령어 이고 패키지를 설치해주는 명령어입니다.

npm i bootstrap@5.3.2

패키지가 성공적으로 설치되면 package.json 파일에 bootstrap 5.3.2 의존성이 추가되고 node_modules 폴더에 bootstrap이 추가됩니다.

{
  "name": "static",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.3.2"
  }
}

 

마지막으로 기존에 cdn 경로에서 가져오던 bootstrap css, script 파일을 node_modules 폴더에서 가져오게 수정해 줍니다.

<!-- asis -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<!-- tobe -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" />

 

 

참고자료

https://getbootstrap.com/