Portfolio

🧨 문제 발생 🖼 1. Images 건 📌 변수 : {{base}} == http://localhost:8080 ✨ 해결책 👾 2. WebIgnore 관련 🤔 이 문제는 잘 모르겠습니다.🍻 해결 후 모습 🐶 여담 - HTML 템플릿 기본 구성

🧨 문제 발생

병연님이 작성한 화면(localhost:8080/posts/upload)으로 이동 했을 때,

이미지 안나옴

기본 css 적용 안됨

2가지 문제가 발생 했습니다.

🖼 1. Images 건

📌 변수 : `{{base}}` == http://localhost:8080

병연님 코드를 받아서 왜 이미지 나오지 않는가.. 콘솔창을 확인해 봤더니

{{base}}/posts 경로로 바뀌고 여기서 이미지를 요청하고 있어서 인것 같습니다. (기존에는 상대경로로 했기 때문에… {{base}}/images/... 로 요청을 해야 되는데, {{base}}/posts/images/... 여기로 요청을 하고 있었던 거죠.)

✨ 해결책

진형님이나 병연님 말씀처럼 절대 경로로 붙이는게 맞습니다.


💩 Bad : 상대 경로로 설정하게 되면, 기본 URL 위치가 변경되었을 때, 엉뚱한 곳을 참조함
<img th:src="@{images/logo.png}" alt="logo"/>

✨ Good : 절대 경로로 하면 기본 URL 위치가 변경되더라도 문제 없음
<img th:src="@{/images/logo.png}" alt="logo"/>

👾 2. WebIgnore 관련

그리고 1번 문제의 이미지 중에 화면에서 base.css도 적용이 안되고 있는 것을 확인 할 수 있습니다.

이는 일단 아래와 같이 해결 했습니다.


// 💩 기존 문제 코드 : /static/** 으로 명시해도 하위 폴더들이 참조 안되는 문제 발생!!!
@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
	return web -> web.ignoring().antMatchers("/static/**", "/templates/**", "/images/**");
}

// ✨ 해결 코드 : /static의 하위 폴더들을 각각 명시해줌으로써 해결 됨
@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
	return web -> web.ignoring().antMatchers("/css/**", "/js/**", "/webjars/**", "/images/**");
}

🤔 이 문제는 잘 모르겠습니다.

아시는 분 공유좀 부탁드리겠습니다.

🍻 해결 후 모습

엌케이..

🐶 여담 - HTML 템플릿 기본 구성

HTML 기본 포맷을 이렇게 구성 했습니다.

headFragment : head 태그 입니다.

이와 같이 head 태그를 사용해서 공통되는 css, js를 연결하고 있습니다. 이걸 포함하고 또 head 태그를 작성하시는 건 head 태그를 2번 쓰시는 것과 같습니다.

headerFragment : Header 부분의 네비게이션 바 입니다.

Header 태그를 쓰고, 안에 로고와 검색창, navbar를 구현했습니다. 📌 중요한건 이 녀석은 Body 안의 상단에 있어야 합니다. (이게 필요 하다면 말이죠. ✨)

Front Page 정적 리소스 문제