TIL 최종프로젝트(16) 제네릭 사용 시 주의
2023.06.28 수
최근 저를 괴롭혀오던 녀석이 있었습니다.
로컬환경에서는 아무 이상없이 이미지를 가져오지만, 배포 환경에서는 이상하게 이미지를 가져오지 못하는 문제가 있었습니다.
다행히 문제점은 금방 발견하였습니다.
이미지 출력에 이상이 생긴 부분은 행사 리스트 페이지와 해당 행사의 리뷰를 출력하는 부분이였습니다.
행사 상세 페이지에서는 이 문제가 발생하지 않았고 차이가 발생하는 곳에서 console.log를 찍어보니 가져오는 이미지의 형태에서 차이가 발생하였습니다.
행사 리스트 페이지와 리뷰에서는
"http://127.0.0.1:8000/media/2023/06/%EA%B2%BD%EB%B3%B5%EA%B6%813_NgdwzX4.jpg"행사 상세 페이지에서는
/media/2023/06/%EA%B2%BD%EB%B3%B5%EA%B6%813_NgdwzX4.jpg"형태로 이미지 데이터를 가져왔던 것입니다.
그렇기에 프론트에서 이미지를 출력하기 위해서는
const backend_base_url = "http://127.0.0.1:8000"
reviewImgElement.src = `${backend_base_url}${get_img}`;${backend_base_url} 이것을 사용하는냐 안하느냐 차이가 생겼던 것입니다.
행사 상세페이지에서는 이미지를 가져오기 위해 ${backend_base_url}을 사용해 주어야 했지만, 행사 리스트, 리뷰에서는 모든 것을 가져오기 필요가 없었습니다.
하지만, 배포환경에서 ${backend_base_url}의 값은 배포환경에 맞쳐 변경되었고
행사 리스트, 리뷰에서는 여전히 http://127.0.0.1:8000을 붙이고 오기에 경로가 틀려져 배포 환경에서 해당 경로를 찾을 수 없어 이미지를 출력하지 못하는 상황이 발생하였습니다.
자, 이제 문제의 원인은 찾았습니다.
왜 저런 차이가 발생하는지 모르는 상황에서 무식하게 해결해보자 했습니다.
우리가 필요한 것은 http://127.0.0.1:8000을 제외한 것이니 저것을 짤라 변수에 저장하고 사용하면 되지 않을까 생각했습니다.
const get_image = element.image.slice("http://127.0.0.1:8000".length);forEach를 사용하여 element에 값을 넣어 받아올 때, image의 값을 slice를 사용하여 불필요한 부분을 날려버리고 받아오도록 하였습니다.
console.log를 사용하여 get_image를 찍어 보니 http://127.0.0.1:8000이 날아가고 "/media/2023/06/%EA%B2%BD%EB%B3%B5%EA%B6%813_NgdwzX4.jpg" 형태로 잘 들어옵니다.
reviewImgElement.src = `${backend_base_url}${get_img}`;저런 형태로 로컬환경에서 사용한 결과 이미지를 잘 받아왔습니다.
이 해결방법을 공유하였고 배포환경에서 코드를 수정하여 실행한 결과 slice 자체가 잘못되었다는 오류가 발생하여 적용 자체가 되지 않았습니다.
가장 간단하고 무식한 방법이 막혀버렸습니다.
그렇다면 img 경로가 왜 차이가 나는지 찾아야 했습니다.
백엔드를 보는 중 하나의 단서를 발견합니다.
저희 팀은 최종프로젝트에서 행사/한복 두 개로 나뉘어 작업을 진행했습니다, 내용은 다르지만, 형태는 비슷하기에 서로의 코드를 보고 익히고 배우며 작업을 진행했습니다.
배포환경에서 행사 부분은 문제가 발생하였지만, 한복 부분은 이미지도 잘 나오고 문제가 없었습니다.
또한 행사 부분에서도 행사 상세페이지는 잘 되었지만, 행사 리스트와 리뷰 부분에서 이미지가 문제였습니다.
백엔드에서 사용한 코드를 살펴보는 중 한복 부분은 모두 APIView를 사용하여 구현하셨습니다, 행사 상세 페이지 또한 APIView를 사용하여 구현하였지만, 행사 리스트와 리뷰 부분은 제네릭리스트뷰를 사용하여 구현했습니다.
처음 경로가 다르게 저장되는 것을 보고 백엔드를 의심하기도 했습니다, serializer와 model을 중점으로 비교하였지, 단 한번도 제네릭이 문제가 된다고 생각하지는 못했습니다.
일단 의심만 가진 상태로 시간이 너무 늦었기에 (03:40)아침에 튜터님이 오시면 이 부분이 문제가 되는지 질문하여 확인 한 후 수정하기로 하고 해산하였습니다.
아침에 튜터님을 찾아가 제네릭 사용 여부로 url이 변경되는 상황이 있나 질문하였고 튜터님은 가능성이 있다 하셨습니다.
제가 이번 프로젝트에서 제네릭을 사용한 이유는 이후 페이지네이션이 필요한 상황이 발생할 수 있으며, get 메소드를 따로 사용하지 않아도 편하게 구현이 가능하기 때문입니다.
생각해보니 페이지네이션을 추가하면 따로 urls를 만들지 않아도 알아서 url을 변경해 줍니다.
아마 제네릭 내부에서 경로를 수정하는 기능을 하는 것이 있다고 생각됩니다.
제네릭을 사용한 view를 APIView로 수정하고 get 메소드를 생성해주니 image의 url이 더 이상 백엔드 경로를 가져오지 않고 출력되었습니다.
[느낀점]
일단 문제는 해결되었습니다. 제네릭이 문제가 될 줄은 정말 생각도 못했고 로컬환경에서 수정하여 원하는 형태로 데이터를 출력하게 만들어도, 배포환경에서 그 방법을 사용하지 못한다면, 결국 로컬환경에서 배포환경에서 사용될 수 있게 수정을 해주어야 한다는 것을 알게 되었습니다.