NPM으로 FrontEnd 라이브러리 관리하기 (feat. Springboot & Gradle)

개요

많은 사람들이 FrontEnd 라이브러리로 Bootstrap과 JQuery를 사용한다. 이것을 사용하는 방법은 다음과 같다.

1. CDN 사용
2. 직접 다운로드하여 프로젝트에 넣기
3. 의존성 관리 툴을 통해 프로젝트에 다운로드 받기

각각 장단점이 있지만, 3rd party 라이브러리 같은 경우에는 의존성 관리 툴을 이용하는 것이 바람직하다. 이번 포스팅에서는 의존선 관리 툴 중 npm을 사용하여 스프링부트 프로젝트 내에서 FrontEnd 라이브러리를 관리하는 방법을 알아본다.

목차

• npm 설치
• 라이브러리 의존성 추가 및 다운로드
• gradle 빌드 시 라이브러리 자동 설치하기

npm 설치

npm은 자바스크립트 런타임 환경인 node.js의 기본 패키지 관리자이다. 따라서 npm을 설치하기 위해서는 node.js를 설치해야 한다. node.js 공식 홈페이지에 접속하여 OS에 맞게 설치하면 npm도 같이 설치된다.

라이브러리 의존성 추가 및 설치

스프링부트는 정적 자원을 src/main/resources/static/ 에서 관리한다. 따라서 여기에서 작업하여 라이브러리의 의존성을 관리하고 다운로드 해야 한다. 함께 부트스트랩과 jQuery를 설치해보자.

1. package.json 생성하기

$ cd src/main/resources/static    // static 디렉터리로 이동
$ npm init    // 의존성을 관리하는 pacakge.json 생성

사용하는 IDE에서 터미널을 열고 위의 명령어를 입력하면 package nmae, version 등 여러가지를 입력하라고 나오는데 그냥 enter를 눌러 넘어가도 무방하다. 작업을 완료하면 static 폴더 하위에 package.json이 생긴다.

package.json

package.json에는 npm이 관리할 라이브러리들의 의존성이 추가되어 있다. 현재는 생성만 한 상태이기 때문에 열어보면 dependencies 부분이 비어있을 것이다.

2. jQuery와 Bootstrap 라이브러리 설치

$ npm install jquery    // jquery 설치
$ npm install bootstrap@4.6.0    // bootstrap ver 4.6.0 설치

bootstrap은 그냥 설치하면 최신 버전인 5.x.x 가 받아지기 때문에 특정 버전을 다운받고 싶다면 위와 같이 버전을 명시해주면 된다. 설치를 하고 나면 static 하위에 package-lock.json과 node_modules 디렉터리가 생기고 그 밑으로 라이브러리들이 다운로드 된다.

설치 후 package.json을 열어보면 다음과 같이 dependencies가 추가되어 있다. npm이 관리할 대상에 자동으로 추가된 것이다.

Gradle 빌드 시 라이브러리 자동 설치하기

우리는 보통 Github와 같은 원격 저장소를 사용한다. 기껏 써드 파티 라이브러리를 npm을 사용해서 다운로드 했는데, 다운로드한 라이브러리들을 원격저장소에 올리면 무의미해진다.

따라서 라이브러리들을 .gitignore에 추가하여 무시하도록 하고 프로젝트를 받은 사용자가 gradle을 빌드하면 그 때 npm install도 실행하도록 하여 라이브러리를 다운로드 받도록 하자.

1. build.gradle에 moowork.node 플러그인 추가하기

* 스프링부트 버전 2.4.9, Gradle 6.9 이므로 build.gradle의 작성 방식이 다를 수 있다.

plugins {
    id 'org.springframework.boot' version '2.4.9'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
    id "com.github.node-gradle.node" version "3.1.1"
}

위와 같이 com.moowork.node 플러그인을 추가한다.

2. Task 생성

// task 등록
tasks.register("npm-install") {
    group = "application"
    description = "Installs dependencies from package.json"
    tasks.appNpmInstall.exec();
}

// npm install task
task appNpmInstall(type: NpmTask) {
    description = "Installs dependencies from pacakage.json"
    workingDir = file("/src/main/resources/static")
    args = ["install"]
}

/src/main/resources/static에서 "npm install" 을 실행하는 Task를 만들고, application 그룹에 npm-install이라는 이름으로 Task를 추가하는 gradle 코드이다. npm install을 실행하면 package.json의 dependencies를 참조하여 라이브러리를 다운로드 할 수 있다.

gradle 프로젝트를 reload하면 아래와 같이 Task가 생긴다.

intelliJ에서 확인한 Task

이제 제대로 동작하는지 확인해보자. 설치된 node_modules를 지우고 gradle 프로젝트를 reload하면 알아서 라이브러리들이 설치될 것이다.

Reference

• https://plugins.gradle.org/plugin/com.moowork.node
• https://jojoldu.tistory.com/538