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

Yuri Lee·2020년 11월 9일

스프링과 JPA 기반 웹 애플리케이션 개발

목록 보기

12/80

현재 우리는 단일 어플리케이션, 프론트와 백이 다 있다. 현재 쓰고 있는 프론트엔드 관련 라이브러리들은 부트스트랩, jquery 이다. 매번 cdn 으로 불러서 사용할 수는 있겠지만 프론트엔드 라이브러리들을 프로젝트 안에다가 패키지화 시킬 수도 있다. 그러기 위해서는 프로젝트 파일 안에다 해당 라이브러리들을 다운 받아야 한다. 그렇게 했을 때 크게 두가지 방법이 있다. 웹jar과 npm !

WebJar vs NPM

WebJar는 라이브러리 업데이트가 느림. (없는 것도 있음 ㅠㅠ) 스프링 부트가 기본으로 제공해줌.
WebJar 보다 npm 선호 😀

Srpignboot vs NPM

src/main/resources/static 이하는 정적 리소스로 제공
package.json에 프론트엔드 라이브러리를 제공!
둘을 응용하면, static 디렉토리 아래에 package.json을 사용해 라이브러리를 받아올 수 있음. 그럼 정적 리소스로 프론트 엔드 라이브러리를 사용할 수 있다.

Try!

npm 설치 경로 : ... /main/resources/static/

npm init
npm install bootstrap
npm install jquery --save

save는 해도 되고, 안해도 된다.

다 설치했으면 css를 cdn으로 받아오지 않고도 프로젝트 내에 있는 파일을 사용할 수 있다. 부트스트랩은 부트스트랩을 사용하는 다른 모듈들이랑 같이 묶어놓은 자바스크립트가 있다. bundle.min.js를 추가하면 될 것이다. 아마도!

NPM

.gitignore 파일에다가

src/main/resources/static/node_modules
src/main/resources/static/node

해당 경로는 버전 관리를 하지 않도록 해준다. (부트스트랩이나 jquery 버전이 업데이트 되면 앱에 문제가 될 수도 있으므로)

변경 혹은 추가된 파일에 /node_modules 를 확인할 수 없다! 잘 반영이 된 것 같다.

고려해야 할 점

빌드
버전관리
시큐리티 설정 ?!

스프링 시큐리티는 다 적용한다. 여기서 예외로 설정을 해놓은게 있고, 필터를 사용하지 않은 것도 했는데 .. 해당이 안된 것들이 많음. 요청 자체가 node_modules로 시작하는데 ..

    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
                .mvcMatchers("/node_modules/**")
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
    }

이런 식으로 추가해줘야 한다.

How to build

빌드를 할때, pom.xml 파일에서도 메이븐을 통해 한다. 메이븐으로 빌드를 할때 프론트 쪽 모듈도 같이 빌드를 해야 한다. package.json을 빌드 해야 한다. 즉 npm install 을 진행해야 한다는 뜻!

메이븐 관련된 플러그인에서 프론트 엔드를 실행할 수 있는 , 심지어 npm, node.js 가 설치가 안되어있더라도 설치까지 해주는 플러그인들이 있다.

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.8.0</version>
  <configuration>
    <nodeVersion>v4.6.0</nodeVersion>
    <workingDirectory>src/main/resources/static</workingDirectory>
  </configuration>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <phase>generate-resources</phase>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <phase>generate-resources</phase>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

workingDirectory 인 src/main/resources/static 에다가 goal을 실행한다.

<execution>
  <id>install node and npm</id>
  <goals>
    <goal>install-node-and-npm</goal>
  </goals>
  <phase>generate-resources</phase>
</execution>
<execution>

resources 를 생성하는 페이지에서 이 goal을 실행한다. node랑 npm 을 설치하는 기능을 generate-resources 페이지에서 실행한다.

<execution>
  <id>npm install</id>
  <goals>
    <goal>npm</goal>
  </goals>
  <phase>generate-resources</phase>
  <configuration>
    <arguments>install</arguments>
  </configuration>
</execution>

동일하게 generate-resources 페이지에서 npm install 을 실행한다.

따라서 빌드할 때 node_modules 디렉토리가 생긴다. node_modules 폴더를 삭제하고 ./mvnw test 를 해보자~

마주친 에러들

Eclipse won't show files in package explorer

npm install을 해도 package explorer에 바로 나타나지 않음. 프로젝트를 refresh 해야지 나타남..;;; sts tool과 intelliJ tool은 확실히 다르다.. 내가 느끼기에 inteliJ가 훨씬 좋음 😒 지금 사용가능한 sts로 우거지로 하는 중인데 자동완성도 뭔가 느리고 .. 암튼 그렇다.

Java version, maven version

원래 이 프로젝트를 버전 8로 사용중이였는데, List.of 의 코드가 작동이 되지 않아서 버전을 11로 올려줬다. 이후 ./mvnw test 명령어를 통해 다시 빌드를 하려고 하는데 계속 에러가 발생 .. 빌드 실패라며..

mvnw test를 실행했을때 에러가 발생하는 경우가 있는데 자바 컴파일러 버전이 안맞는다는둥, Maven 버전이 안맞는다는둥 '버전'이 안맞는 에러가 발생하시면 인텔리제이의 터미널에서 mvnw -version을 통해 자바 jdk 버전을 확인해보시길 바랍니다..pom.xml의 자바 버전인 11과 같은 jdk버전인지 꼭 확인해보세요...

강좌 댓글에서 다음과 같은 댓글을 보고 ./mvnw version 을 확인해보니 이게 왠걸...자바 버전이 8이 떴다 😭😭 구글링 결과 플러그인을 추가하거나, 프로퍼티에 메이븐 컴파일러를 넣을 때 자바 버전을 11로 설정하라는 글을 보고 해봤으나...

  <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.6.1</version>
        <configuration>
          <verbose>true</verbose>
          <fork>true</fork>
          <executable><!-- path-to-javac --></executable>
          <compilerVersion>1.7</compilerVersion>
        </configuration>
      </plugin>