1. 목표:

부트스트랩 템플릿을 다운 받아서
스프링 부트 프로젝트에 적용

---

2. 문제:

이미지 등 CSS파일이 적용되지 않음.
브라우저의 개발자 모드(F12)에서 확인하니

1) 첫째, 401 에러와 다음과 같은 오류 메세지:

because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.....(중략)

2) 둘째, 이미지 파일들에 404 에러

---

3. 원인 분석:

1) 첫번째 문제

i. 원인

구글 검색 결과 CSS적용할 때 자주 일어나는 작은 에러이며, 대부분이 404에러와 연관되어 있었다. 이 경우는 경로의 문제이므로 href="..."경로 시작점에 /를 추가해줌으로써 문제를 쉽게 해결한다.
그러나 나의 에러타입은 401 "Unauthorized". 즉, Authorization(인증)과 관련한 문제이다.
스프링 시큐리티 설정파일인 SecurityConfig.java를 살펴 봤다.

시큐리티 설정 코드:

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.formLogin()
                .loginPage("/members/login")
                .defaultSuccessUrl("/")
                .usernameParameter("email")//로그인시 사용할 파라미터
                .failureUrl("/members/login/error")
                .and()
                .logout()
                .logoutRequestMatcher(new AntPathRequestMatcher("/members/logout"))
                .logoutSuccessUrl("/");

        http.authorizeRequests()
                .mvcMatchers("/", "/members/**", "/item/**", "/images/**").permitAll()
                .mvcMatchers("/admin/**").hasRole("ADMIN")
                .anyRequest().authenticated();

문제가 된 부분: 마지막 줄

http.authorizeRequest().anyRequest().authenticated();

나는 부트스트랩 파일들을 /resources/static/bootstraps/에 위치시켰기 때문에 비로그인 접근 시 Authorization 에러가 났던것.

---

ii. 해결:

정적 자원과 관련된 시큐리티 설정:

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/css/**", "/js/**", "/img/**");
    }

/css, /js, /img 하위 폴더에 위치한 정적 자원으로의 접근에는 보안상의 제한을 무시한다는 설정이다.
이 곳에 부트스트랩 파일들이 있는 경로인 /bootstraps/**를 추가해주면 이 폴더의 하위 파일들에 보안 설정이 무시되고 템플릿이 잘 적용된다.

---

2) 두번째 문제

i. 원인

html파일을 확인해보면 이미지 태그의 src 부분에 경로 변경이 제대로 되지 않음.

ii. 해결

올바른 경로 지정: 나의 경우에는 src="/bootstraps/..."를 추가해줬다.

---

팁**: 같은 형식의 여러 줄의 코드를 하나하나 고치려면 힘드니까
base 태그를 사용하자.

<base href="/bootstraps/">

팁**: Intelli J에서 멀티 커서를 사용하려면 Shift + Alt를 누른채로 해당 줄을 클릭