서버로부터 이미지 받는 3가지 방법

노도·2022년 4월 3일
2
post-thumbnail

오늘은 프로젝트 1차 sprint 이후 잠시나마 리팩토링 할 수 있는 주말이다.

곧 블로깅 할 악마같은 ,, 슬라이드 녀석
그 녀석이 쏘아올린 작은 공이 벌써 이렇게 크게 다가왔다.

젠장,,

라이브러리를 사용하지 않고 자동슬라이드를 만든다?
당연히 가능은 하지 근데 왜,,? 라이브러리 안쓰고 왜? 진짜 왜..???????????

그래 어짜피 이렇게 된거 해보자 !! 하고 했다..
했는데 그 이후에 다가오는 이상한 기운

그래,, 역시는 역시지

랜딩페이지에는 자동 슬라이드만 있는 것이 아닌 여러가지 컨텐츠가 있다는 걸 까먹었다..
그리고 그것을 인지한 상황에서도 고생고생하며 만든 슬라이드가 망가질까봐 mock data 자체도 건들지 않았다.

따라서 다른 컨텐츠에 대한 이미지는 새로운 mock data 를 이용하였으며 이것은 한 페이지에서 두번의 fetch 를 통해 데이터를 받아와야 한다는 것이다.

이때 지금 블로깅 중인 주제가 등장한다.


모두가 편해지는 3가지 방법

  1. Mock data 하나로 합쳐보기
  2. 깃허브 이미지 클라우드 생성
  3. 백엔드로부터 쿼리스트링을 이용해 이미지 가져오기

뭔가 이렇게 거창하게 작성해봤는데 사실 별거 없당 ..ㅎㅎ
자 이제 천천히 작성해보자

1. Mock data 하나로 병합

사실 원인은 이거다..
내가 슬라이드 데이터를 백엔드와 통신 할 때 문제를 만들기 싫어서 새로운 mock data를 만들어 버렸다. 이때 내가 슬라이드가 아닌 다른 컨텐츠의 데이터를 상수데이터로 만들었다면 합칠때 로직 자체를 바꿔야해서 유.지.보.수 가 힘들기에 그부분을 알고 mock data 를 만들었다..

대충 이런상황이 올 것을 예상했기 때문.. 부정했지만 실패했다 ㅠ.ㅜ

2. 깃허브 이미지 클라우드 생성

이 방법은 필드에 계신 분들이 자주 사용하는 방법이라고 한다.
생각도 안해봤던 방법이라 아주 흥미로웠다. 다만 현재 나의 상황은 단순 이미지만 받아오는게 아니기 때문에 이 방법을 사용하지는 않았지만 다음 프로젝트에 이미지를 불러올때 이 방법을 사용해 볼 예정이다.

3. Query string 이용하기

위에 작성한 깃허브 이미지 클라우드와 동일하게 이 부분은 mock data를 병합하지 않아도 백엔드가 한번에 보내줄 수 있다. 그래서 1번과 3번 중 어느 것을 선택 할지 고민을 신나게 했다.
그 전에 Path parameter 를 이용할지, Query string을 이용할지 선택하여야 한다.

여기서 잠깐!

  • Path parameter
    원하는 조건의 데이터들 혹은 하나의 데이터에 대한 정보를 받아올 때 적절
    (따로 정제되지 않은 데이터 가져올 때)
  • Query string
    filtering, sorting, searching에 적절

Path parameter을 사용하려 했지만 중복으로 이미지를 가져올 수 있는 단점이 있어 나는 3번째 방법을 사용한다면 쿼리 스트링을 사용하려고 했다.


선택의 시간

일단 아직 부족한 나의 시선으로 바라보았을 때 1번의 방법이 최선이라고 생각을 했다.

현재 Mock data가 두번이기에 현재 랜딩 페이지에서 fetch 함수를 두번 사용하고 있다.
이는 유.지.보.수 가 힘들고 클린한 코드를 위함과 동시에 백엔드가 하지않아도 되는 숙제(?)를 병합으로 해결해준다..ㅎㅎ


느낀점?

이번 일로 인해 이런 상황이 의도하지 않는다면 오지는 않겠지만 혹시,,몰라 정리하였다.
그리고 이번일로 인하여 백엔드의 관점으로 코드를 한번 더 바라보게 되었고, 행복한 협업을 위해서는 한번 더 생각하여 내가 더 클린한 코드를 짜는 것이 도움되는 것을 다시한번 느끼게 되었다.

마지막으로 !!

< 오늘도 개똥이는 성장한다 ! >
profile
유연한 사고로 빠르게 습득하기.

2개의 댓글

comment-user-thumbnail
2022년 4월 3일

좋은 방앗간이네요... 항상 블로그 보고 힘내고 갑니다 ^_^

1개의 답글