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

출처
www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1/dashboard

스프링과 JPA 기반 웹 애플리케이션 개발 - 인프런 | 강의

WebJar vs NPM

• 백기선님은 웹보다는 NPM을 선호하신다고 함
• WebJar은 라이브러리 업데이트가 느리다. 심지어 올라오지 않은 라이브러리도 많다.

스프링 부트와 NPM

• src/main/resource/static 디렉토리 이하는 정적 리소스로 제공한다. (스프링 부트)
• package.json에 프론트엔드 라이브러리를 제공한다.
• 이 둘을 응용하면, 즉 static 디렉토리 아래에 package.json을 사용해서 라이브러리를 받아오면 정적 리소스로 프론트엔드 라이브러리를 사용할 수 있다.

빌드는 어떻게?

• 메이븐 pom.xml을 빌드할 때 static 디렉토리 아래에 있는 package.json도 빌드하도록 설정해야 한다.
• 빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아서 뷰에서 필요한 참조가 끊어지고 화면이 제대로 보이지 않는다.

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

우리 애플리케이션 -> 모노내틱한 애플리케이션 -> 프론트 백엔드 구분이 없음
스케일러블한 애플리케이션은 보통 백/프론트 구분 또는 모듈화를 하여 작은 단위로 백/ 프론트를 가지고 분산
단일 애플리케이션 - 프론트 / 백엔드

현재 사용중인 프론트엔드 라이브러리
jquery
bootstrap
popper
매번 cdn사용보다 (cdn으로 트래픽분산을 할 수도 있지만) 프론트엔드 라이브러리를 프로젝트 안에 패키지화 시킬 수도 있다.

프로젝트 안에 라이브러리들을 다운 받아 놔야함
WebJar or NPM
WebJar -> 스프링부트가 기본적으로 제공해주는 기능 중 하나 - 정확히는 연동을 도와줌

maven으로 webjar를 통해 bootstrap을 받아서 사용할 수 있다.

직접 라이브러리를 받아서 관리 할 수도 있지만써드파티는 의존성관리 툴의 도움을 받아서 써드파티가 업데이트 할 때마다 손 쉽게 dependency를 업데이트 할 수 있어야 하므로 직접 매뉴얼로 관리하는것은 추천하지 않음

1. npm downloadterminal local에서 cd src\main\resources\static 디렉토리 변경 후 npm init 계속 엔터하여 package.json다운package.json 파일이 생성되었다면 npm install bootstrap으로 부트스트랩 다운

2. cdn으로 받던 링크 변경

<-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
->
<link ref="stylesheet" href="/node_modules/bootstrap/dis/css/bootstrap.min.css" />


<-- jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>

<-- popper -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
->
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

3. gitignore에 경로 추가

### NPM ###
src\main\resources\static\node_modules

4.build고려를 위한 dependency plugin 추가

<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>

generate-resources phase에서 설치해줌

가끔 명령어를 찾을 수 없습니다 - window 명령어가 아니니까 안됨 - powershell이나 다른것으로 구동해야함

윈도우 환경에서 .\mvnw.cmd로 구동 -> node 폴더 gitignore추가

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

고려사항 추가

• 빌드
• 버전관리
• 시큐리티 설정

시큐리시 설정때문에 view가 제대로 나오지 않는다

 @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
    }
    
    ->
    
     @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
                .mvcMatchers("/node_modules/**")
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
    }
    흔히 사용하는 위치가 아닌 node_modules로 접근하기에 막은것 -> 추가시켜주면 된다.
    atCommonLocations에 해당하는 path 
    public enum StaticResourceLocation {

	/**
	 * Resources under {@code "/css"}.
	 */
	CSS("/css/**"),

	/**
	 * Resources under {@code "/js"}.
	 */
	JAVA_SCRIPT("/js/**"),

	/**
	 * Resources under {@code "/images"}.
	 */
	IMAGES("/images/**"),

	/**
	 * Resources under {@code "/webjars"}.
	 */
	WEB_JARS("/webjars/**"),

	/**
	 * The {@code "favicon.ico"} resource.
	 */
	FAVICON("/**/favicon.ico");

	private final String[] patterns;

	StaticResourceLocation(String... patterns) {
		this.patterns = patterns;
	}

	public Stream<String> getPatterns() {
		return Arrays.stream(this.patterns);
	}

}

현재 favicon에러 403에러 (security관련일꺼임) 때문에 막혔으므로 해결해야함
-> security에 favicon경로를 예외처리 하도록 추가해보자 stackoverflow 답변
stackoverflow.com/questions/35901592/error-403-on-image-when-using-spring-boot-spring-security

Error 403 on image when using Spring Boot + Spring Security

<link ref="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
-> favicon에러가 아니었다 ref라고 오타써서 경로를 못찾아서 생긴 문제였음
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>