스프링과 JPA 기반 웹 애플리케이션 개발 #18 프론트엔드 라이브러리 설정

스프링과 JPA 기반 웹 애플리케이션 개발 #18 프론트엔드 라이브러리 설정

해당 내용은 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발의 강의 내용을 바탕으로 작성된 내용입니다.

강의를 학습하며 요약한 내용을 출처를 표기하고 블로깅 또는 문서로 공개하는 것을 허용합니다 라는 원칙 하에 요약 내용을 공개합니다. 출처는 위에 언급되어있듯, 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발입니다.

제가 학습한 소스코드는 https://github.com/n00nietzsche/jakestudy_webapp 에 지속적으로 업로드 됩니다. 매 커밋 메세지에 강의의 어디 부분까지 진행됐는지 기록해놓겠습니다.

프론트엔드 라이브러리 설정

• Web Jar vs NPM
  • Web Jar는 라이브러리 업데이트가 느리며 올라오지 않은 경우도 있어서 현재는 NPM 선호
• 스프링 부트와 NPM
  • src/main/resource/static 디렉토리 이하를 정적 리소스로 제공한다. (스프링 부트)
  • package.json에 프론트엔드 라이브러리를 제공한다.
  • 이 둘을 응용하면 즉, static 디렉토리 아래에 package.json을 사용해서 라이브러리를 받아오면 정적 리소스로 프론트엔드 라이브러리를 사용할 수 있다.
• 빌드는?
  • 메이븐 pom.xml을 빌드할 때, static 디렉토리 아래에 있는 package.json도 빌드하도록 설정해야 한다.
  • 빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아서 뷰에서 필요한 참조가 끊어지고 화면이 보이지 않는다.

부트스트랩을 스프링부트에 npm으로 설정해보자.

핵심은 서드파티 라이브러리 관리 도구를 도입하여 프론트엔드 라이브러리를 프로젝트 내부에 패키징 시키는 것

pom.xml 플러그인 추가

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <!-- NB! Set <version> to the latest released version of frontend-maven-plugin, like in README.md -->
  <version>1.12.0</version>

  <configuration>
    <nodeVersion>v16.2.0</nodeVersion>
    <npmVersion>7.13.0</npmVersion>
    <workingDirectory>src/main/resources/static</workingDirectory>
  </configuration>

  <executions>
    <execution>
      <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <!-- optional: default phase is "generate-resources" -->
      <phase>generate-resources</phase>
    </execution>

    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

해당 플러그인의 설정을 하는데 생각보다 꽤 애먹었다. 이 플러그인의 핵심은 어떤 프로젝트에서든 정확한 노드js 버전과 NPM 버전을 제공하고, 정확한 버전을 제공하는 만큼, 개발자의 기존 환경을 이용하기보다 새로운 노드와 NPM을 설치하는 방식이다. 그런데 나는 기존에 내가 이용하던 방식처럼 내 컴퓨터에 있는 node와 npm을 자동으로 사용할 것이라고 가정해버려서 그 사고(생각) 때문에 한참을 헤맸다.

나는 기존의 내 node와 npm을 사용한다는 가정 때문에 저 위에 npm과 node를 설치하는 <execution> 태그를 지워버렸었다. 공식문서 설정을 좀 더 꼼꼼히 읽었어야 했다.

그리고 저 <workingDirectory></workingDirectory> 태그 아무데나 잘 걸리니까 조심해야 한다. 상위레벨에 적어주는 것이 좋다.

• What is this plugin meant to do?
  • Let you keep your frontend and backend builds as separate as possible, by reducing the amount of interaction between them to the bare minimum; using only 1 plugin.
  • Let you use Node.js and its libraries in your build process without installing Node/NPM globally for your build system
  • Let you ensure that the version of Node and NPM being run is the same in every build environment
• What is this plugin not meant to do?
  • Not meant to replace the developer version of Node - frontend developers will still install Node on their laptops, but backend developers can run a clean build without even installing Node on their computer.
  • Not meant to install Node for production uses. The Node usage is intended as part of a frontend build, running common javascript tasks such as minification, obfuscation, compression, packaging, testing etc.

• 이 플러그인이 할 것?
  • 프론트엔드와 백엔드의 상호작용을 최소로 줄임으로써, 프론트엔드와 백엔드 빌드를 가능한 분리합니다. 오직 하나의 플러그인만 사용합니다.
  • node와 npm을 빌드 시스템에 글로벌로 설치하지 않아도 노드js와 라이브러리들을 사용하게 해줍니다.
  • 동작중인 node와 npm의 버전이 매 빌드에서 같은 버전임을 보장합니다.
• 이 플러그인이 하지 않을 것?
  • 개발자의 노드 버전을 변경하지 않습니다. 프론트엔드 개발자는 여전히 노드를 랩탑에 설치합니다. 하지만, 백엔드 개발자는 노드를 컴퓨터에 설치하지 않고도 클린 빌드를 실행할 수 있습니다.
  • 노드를 프로덕션 용도로 설치하지 않습니다. 노드의 용도는 일반적인 자바스크립트 작업 (파일 최소화, 난독화, 압축, 패키징, 테스팅 등) 을 동작시키는 프론트엔드 빌드의 일부로써 의도되어 있습니다.

다음에 또 이 플러그인을 쓴다면 노드와 npm을 설치하는 부분을 지우지 말자. 원래 프로젝트당 1개씩 새로 설치하도록 의도되어 있다. 아니면 추후에는 멋진 Jhipster를 써보자.

package.json 설정하기

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

별다른 설정은 없다. 부트스트랩 쓸꺼니까 디펜던시에 걸어줬다. 버전은 4.6.0이다. 부트스트랩만 적어놓으면 의존성으로 popper나 jquery같은 것들은 자동으로 설치돼서 따로 적어줄 필요 없다.

git ignore 설정하기

### NPM ###
src/main/resources/static/node_modules
src/main/resources/static/node

노드와 노드모듈은 빼주자.

mvnw 파일

강의에서 테스트로 mvnw test 라는 명령어를 사용하였는데, 이 파일에 대해 잘 몰라서 좀 알아봤다.

이 파일은 Maven Wrapper 라고 불린다. Gradle에는 똑같이 Gradle Wrapper 가 존재한다. 메이븐이 인스톨되지 않고 패스도 잡혀있지 않은 상태여도 메이븐 프로젝트를 실행할 수 있게 해준다. 메이븐이 없다면 알맞은 메이븐 버전을 설치해준다. (기본 값으로는 유저의 홈디렉토리에 설치한다.)

리눅스 유저 용으로는 mvnw를 제공하고, 윈도우 유저 용으로는 mvnw.cmd를 제공한다.