(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 페이지 제작(5)

며칠 동안 못 찾은 문제(폰트와 이미지) 중 하나를 이제 해결했다.

 

http://localhost:8080/search에선 잘만 뜨던 이미지가

http://localhost:8080/category/food 에서는 이미지가 뜨지 않던 문제였다.

경로 문제라고 생각했지만, 그렇다기엔 똑같은 경로로 이미지를 적은 위의 url 에서는 이미지가 잘 뜨니까 너무 이상했다.

 

며칠을 헤매다가 이상한 점을 발견했다.

왼쪽은 정상작동하는 이미지의 경로고 오른쪽은 뜨지 않는 이미지의 경로다.

태그 안에 입력된 경로는 같은데 마우스를 올려보니 둘의 실질적인 경로가 다르다.

대체 왜 그런건지 잘 몰라서 뤼튼에게 물어봤다.

어떻게 질문해야할지 고민이 많이 됐는데 그래도 뤼튼이 잘 이해해서 다행히 괜찮은 답이 나왔다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

나 :

난 node.js로 코드를 작성하고 있는데 이미지 경로를 ./img/icon-search.png로 작성해뒀는데 똑같은 파일을 http://localhost:8080/search와 http://localhost:8080/category/food에 각각 render 해줬어. 각각을 실행한 뒤, html 태그에 마우스 커서를 가져다대니까 이미지 경로가 각각 https://localhost:8080/img/icon-search.png와 https://localhost:8080/category/img/icon-search.png 로 보이는데 왜 그런 거야?

 

뤼튼 :

안녕하세요. 이미지 경로 문제에 대해 자세히 알아보겠습니다.

Content Overview

• 이미지 경로 설정 시 주의사항
• 상대 경로와 절대 경로의 차이
• 서버 구조에 따른 이미지 경로 설정 방법
• 추가 정보: 이미지 캐싱 및 최적화

이미지 경로 설정 시 주의사항

• 이미지 파일은 서버의 특정 폴더에 저장되어야 합니다.
• 이미지 태그의 src 속성에는 이미지 파일의 경로를 지정해야 합니다.
• 경로 설정 시 상대 경로와 절대 경로를 구분해서 사용해야 합니다.

상대 경로와 절대 경로의 차이

• 상대 경로: 현재 파일의 위치를 기준으로 이미지 파일의 위치를 지정합니다. 예) ./img/icon-search.png
• 절대 경로: 서버의 루트 디렉토리를 기준으로 이미지 파일의 위치를 지정합니다. 예) /img/icon-search.png

서버 구조에 따른 이미지 경로 설정 방법

1. 단일 경로 구조: 모든 페이지가 같은 경로에 있는 경우, 상대 경로로 이미지 경로를 설정할 수 있습니다.
2. 다중 경로 구조: 페이지마다 경로가 다른 경우, 절대 경로로 이미지 경로를 설정해야 합니다.

이 경우 /search와 /category/food 경로가 다르므로 절대 경로로 이미지 경로를 설정해야 합니다. 따라서 http://localhost:8080/img/icon-search.png와 같이 설정해야 합니다.

추가 정보: 이미지 캐싱 및 최적화

• 이미지 파일은 캐싱을 통해 빠른 로딩 속도를 제공할 수 있습니다.
• 이미지 파일 크기를 최적화하여 전송 용량을 줄일 수 있습니다.
• 이미지 파일의 압축, 포맷 변경 등의 방법으로 최적화할 수 있습니다.

이상으로 이미지 경로 설정에 대해 자세히 알아보았습니다. 궁금한 점이 더 있다면 언제든 말씀해 주세요. 🙂

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

하 정말 똑똑하다...

나는 절대 경로와 상대 경로를 몰랐고 당연히 그 차이도 몰랐었다.

뭔지도 모른 채로 웬만하면 ./을 썼었는데 그게 상대경로였구나...

그래서 내가 입력해둔 ./img/icon-search.png 경로를 절대 경로인 /img/icon-search.png로 변경하니 문제가 해결됐다 ㅎㅎ

 

 

그럼 그 다음 문제인 폰트도 해결해야겠다.

 

폰트도 똑같았다.

난 폰트를 public 폴더에 넣고

@font-face {font-family: 'UhBeeHanByeol'; src: url('UhBeeHanByeol.woff') format('woff');}

css에서 이렇게 작성해서 사용했다.

scr : url('UhBeeHanByeol.woff') <- 이건 폰트를 가져올 때부터 이렇게 작성하라고 했기에 그냥 이렇게 적었을 뿐이었다.

근데 뤼튼에게 물어보니까 url을

url('/fonts/custom-font.woff2')

이렇게 작성했네?! 그래서 나도 바로 따라했다.

퍼블릭에 폰트 파일을 하나 만들고 거기에 폰트 파일이 위치하게 했다.

그리고 경로를

scr : url('UhBeeHanByeol.woff')    ->    scr : url('/fonts/UhBeeHanByeol.woff')

이렇게 변경했다.

그랬더니

완벽히 해결되었다!! 최고❤

이젠 콘솔창에 글씨체도 뱉지 않는다.

근데 왜 글씨체를 뱉었던 건지는 아직도 모르겠다...

어쨌든 해결은 되었음

이러면서 느낀 점은

1. 내가 문제를 어떻게 보느냐에 따라 해결 방법이 완전히 달라진다.

콘솔창에 글씨체를 뱉는 것에 꽂혀서 그걸 해결하려고 하다보니 :where 파라미터에만 집중했었다.

문제가 발생했을 때 왜 문제가 발생했는지 제대로 아는 게 아주 중요한 것 같다.

2. 1번과 마찬가지로 내가 문제를 어떻게 보고 질문하느냐에 따라 뤼튼에 답이 완전 달라진다.

콘솔에 꽂혀서 뤼튼에게 서버 코드와 get 요청한 url만 보여주면서 왜 글씨체를 뱉는지 물어봤을 때

뤼튼은 좀 바보 같은 대답들을 했다. 그래서 더더 답답했다(사실 내가 경로는 문제가 없을 거라는 고집을 부리긴 했다).

하지만 경로에 이상이 있다는 걸 알고 왜 그런지 물어보니 뤼튼은 바로 이해하고 이 문제를 해결해줬다.

내가 아는 만큼, 질문에 직면한 만큼 질문의 질이 달라지고 그만큼 뤼튼의 답의 질도 달라졌다.

3. 고집 부리지 말고 항상 의심해야 한다.

나는 계속해서 경로엔 문제가 없을 거라고 생각하고 그건 고려하지 않았다.

당장 어떤 파일은 잘 뜨는데 다른 파일만 그랬기 때문에 경로는 문제가 없을 거라고 생각했다.

그게 상대경로라서 그런 줄도 모르고 말이다...

내가 생각했을 때 절대 문제가 되지 않더라도 나는 항상 완벽하게 모든 걸 알고 있다고 생각하지 말고 항상 의심해야겠다.

 

그리고 추가적으로 공부해야 할 점은

1. 절대 경로와 상대 경로

localhost:8080/search 일 때는 ./img/이미지가 localhost:8080/img/이미지였고,

localhost:8080/category/food일 때는 ./img/이미지가 localhost: 8080/category/img/이미지였다.

맨 뒤에 있는 경로는 하나씩 사라지는 건가...? 하는 궁금증이 생기고 아직은 잘 모르겠다.

그리고 scr : url('UhBeeHanByeol.woff') 이게 적용이 되기도 하고 안되기도 한 걸 보면 절대경로보단 상대경로인 것 같은데 scr : url('UhBeeHanByeol.woff')이랑 scr : url('./UhBeeHanByeol.woff')이랑 같은 건지도 모르겠다.

2. 폰트의 특징(?)

폰트의 경로를 잘못(?) 입력했을 때 파라미터랑 함께 보내졌는데 그 원인을 모르겠다.

왜 따로 한 번씩 보내졌던 것인지 알고 싶다.

내가 폰트파일을 다운받아서 사용한 적은 잘 없어서 아마 폰트의 특징?이지 않을까 싶어서 더 공부해야겠다.

 

 

그럼 일단 공부는 이따 하고 당장의 문제들은 해결되었으니 다시 페이지 만들기로 돌입하겠당 ㅎㅎ

은 내일 ㅎ