💭 PROJECT OVERVIEW & TIL
1차 때는 path parameter 를 많이 써보며 query parameter에 대해서도 궁금했었는데 이번 프로젝트에서는 동적 라우팅과 쿼리스트링을 통한 통신이 많아서 1,2차 프로젝트를 통해 둘다 사용해보며 RESTful이 무엇인지 진정 느낄 수 있었다.
pagination과 searching 기능은 추가구현 기들이었는데 못해본 아쉬움이 있다. 이 또한 쿼리 스트링을 사용하는 것이어서 나중에 구현해보고 싶은 욕심이 있다!
RESTful
프론트엔드에서 백엔드 API를 호출할 url을 어떻게 만들것인가?
에 대한 대답이다.
RESTful API는 그 자체만으로도 API의 목적이 쉽게 이해가 되는 것이 가장 큰 장점이다.
예를 들어, 세션 때 들었던 예시를 들자면
HTTP GET https://api.trueshort.com/stock/005930
요청의 경우, 문서나 주석이 없이도 https://api.trueshort.com 라는 API에서 삼성전자 주식에 관한 정보를 HTTP 요청을 통해 받아오는 구나 라는 해석이 쉽게 가능하다.
쿼리 스트링(Query String)이란?
말 그대로
해당 엔드포인트에 대해 질의문(query)를 스트링(string)으로 보내는 요청
주로 데이터를 조건으로 거르거나(filtering), 정렬하거나(sorting), 검색(searching)하고자 하는 경우에 활용된다.
이번 프로젝트에서 내가 맡은 부분은 filtering 과 sorting에 쓰여 쿼리 스트링을 활용해 볼 수 있었다.
처음에는 쿼리 스트링에 대해 추상적으로만 개념이 자리잡았었는데,
밑의 예시를 보면 확실하게 이해가 될 것이다.
메인 페이지에서 숙박유형, 숙박지역, 날짜, 인원 수를 URL에 담아 백으로 보내줘야하는데, 이와 같은 형식으로 보내야한다. 우리가 브라우저를 이용하여 검색할 시에도 많이 보는 형식이다.
http://localhost:3000/roomlists?category_name=호텔&location_name=강남&check_in=2021-05-09&check_out=2021-05-11&occupancy=2&sort_type=1&star=5맨 앞의 값을 예시로 보면,
?category_name=호텔
엔드 포인트 뒤에는 항상
1. ? 물음표(query가 시작됨을 알린다) 로 시작
2. 뒤에는 항상 key=value 형식의 문자열(string)이 따라오며 원하는 요청
3. &을 이용하여 조건을 계속하여 추가
?으로 시작하는 쿼리 파라미터를 &을 이용하여 연결시키며 메인에서 호텔 리스트로 넘어갈 때 필터링을 위해 넘겨주었다.
🔥 3 BLOCKERS...
쿼리 스트링을 써보면서 나를 깊은 고민에 빠지게 했던 블로커 3가지들을 정리해보고자 한다. 나를 힘들게 했지만 나를 또 강하게 한 고마운 존재들(?!)
1. Obj <-> String
해당 각각의 값들은 state로 관리하였고, 각각의 state들을 한데 모아 보내줘야하므로 객체로 만들어 값을 저장하였다. 그리고 key=value로 이루어진 객체의 값들을 URL에 한 줄로 깔끔하게 보내줘야하기 때문에 string으로 변환하는 함수를 써서 보내주었다.
여기서 Query to String, String to Query를 만드는 함수를 따로 작성해보라는 종택멘토님의 미션을 받고..
처음에는 이해를 하지 못해 (딴 소리...)를 하며 한참을 고민하며 나중에 만들어야지!라고 미뤘던 기억이 난다. 다시 한번 쿼리 파라미터의 형식을 이해하고 내가 보내는 값들의 형식을 이해하고 나니 따로 함수를 만들어 사용하면 훨씬 편하겠다는 생각을 했다. utils란 폴더에 함수를 만들어 config.js 처럼 import 해서 사용하였는데 이것이 바로 함수의 재사용인가..!를 느끼며 매우 편리함을 느꼈다.
보내줄 값들을 객체에 담고, 그 객체를 미리 만들어둔 queryToString 함수에 넣어 String으로 변환시켜 주었다!
2. location.search
URL Query Parameter 가져오기
리스트 페이지에서 URL Query Parameter 값을 가져와야 하는 경우가 생겼다.
hotel_location 값인 '강남'으로 검색한 결과를 화면에 나타내도록 하고 싶었기 때문이다.
여기서 지난 1차때 썼던 방식으로 history.push 라우팅기능과 동시에 state 값을 넘겨주는 방식으로 값을 보내줘야하나? 생각했지만(location.state만 아는 바보...)
location.search 를 이용해서 바로 값을 가져올 수 있었다.
메인에서 리스트로 넘어가며 리스트 페이지에서 실행시키는 useEffect에서 console.log를 찍어보면 해당 URL 주소에서 ? 이후의 메인에서 선택된 값들이 출력되는 걸 볼 수 있다. .png)
WOW...너무신기해.!
이 값을 이용하여 함수를 이용하여 필요한 부분만 잘라서 state 에 저장해두고 해당 페이지에서 사용하였다! 또한 리스트 페이지에서 디테일 페이지로 넘어갈 시에도 check_in과 check_out 값들을 전달해줘야했는데 같은 방식인 locaiton.search로 필요한 부분을 가공해 URL로 전달해주었다!
path parameter에서는 location.state 값을 이용하며 state값들을 주고 받았었는데 query parameter에서는 location.search를 사용하며 URL 값들을 가공하고 백으로, 또 다른 페이지로 전달해 볼 수 있었던 기회였다.
3. 변화하는 실시간 값 URL에 반영하기
나에게 가장 인내의 시간을 안겨준 부분..!
이미 필터링이 한 번 된 결과값들에 추천순, 금액순, 성급별 sorting 을 구현해야했다. 실시간으로 변하는 값들이 URL에 반영되어야 백에서 일치하는 데이터를 불러 올 수 있고, 디테일 부분에서도 선택된 정확한 값을 보내줘야했기 때문이다.
인원 수까지 체크하여 값이 넘어온 리스트페이지에서, 오른쪽 상단에 있는 sort 타입과 왼쪽 옵션창에 있는 star 에 따라 기존에 받아온 쿼리 파라미터 뒤에 추가해줘야했다.
따라서, 기존의 string으로 들어온 쿼리 파라미터를 다시 객체형식으로 만들어주고, 선택에 따른 key와 value로 이루어진 객체들을 생성해 둘을 합친 다음 다시 string으로 보내주는 방식을 써야했다.
이 과정에서 선택에 값을 받아오는 함수를 따로 지정해줘야 했고, 의존성 배열의 개념을 잘 이해해야 배열 안에 무엇이 들어가는지도 생각할 수 있었다. 이 경우에는 클릭 할 때 변하는 지정해준 state값이 들어가야했다.
또한 처음에는 클릭할 때마다 value 값만 변해야 했는데 key=value 한쌍으로 계속 붙어서 나왔다.(&sort_type=1&star_2&star_3&star_4..이런식) 하지만 이 같은 경우에도 spread 연산자를 사용해서 변하는 값만 추가해주는 식을 세울 수 있었다.
또한, blocker 2번의 개념과 함께 location.search의 값을 의존성 배열에 넣은 useEffect 함수를 한 개 더 생성하여 실시간으로 변화하는 location.search값을 보내줘야 했다.
이 외에도 airbnb에서 만든 calendar library를 쓰며 하나하나 코드를 뜯어보는데도 시간이 걸렸고, 메인에서 받아온 값을 리스트에 띄어주고, 또 다시 새로운 날짜를 선택하여 다음 페이지로 넘겨줘야하는 과정도 나에게는 큰 challenge! 였지만 배운 점도 너무나도 많았던 이번 프로젝트, 그리고 나의 파트 기억해두고 싶다.
