210815 개발기록: 여러개의 query parameter string

🌿  여러 개의 Query String Parameter 를 전달하는 방법

 

아래 처럼 query string parameter 를 이용하여 api 요청을 하고 있었다.

const response = await fetch(`/v1/search/book?query=${query}`)

 

처음엔 {query} 파라미터 만 필요했으나, 추가적으로 {display} 파라미터 도 필요했다.

미세먼지 같은 시행착오가 있었는데, 첫 번째 파라미터를 사용할 때 물음표(?) 가 삽입 됐기에, 두 번째 파라미터 에도 물음표가 필요하다고 생각했다 (오답).

// Bad request
const response = await fetch(`/v1/search/book?query=${query}?display={display}`)


// Good request
const response = await fetch(`/v1/search/book?query=${query}&display={display}`)

제대로 api 호출이 되지 않아 뭐가 문제인지 몰랐는데, 물음표가 아니라 `&` 였다.  만약 세 번째 파라미터도 필요하다면, {display} 뒤에 & 를 삽입하면 된다. 너무 어이없는 실수라 다시는 안까먹고자 기록한다 ^__.__^;

 

 

 

🌀 React 프로젝트 진행하면서 겪은 실수

1. Recoil의 selector 작동 하지 않았다. atom 으로 걸어둔 state 가 변경 됐으니 당연히 selector 함수가 시작될 거라 생각한 것이 문제였다. 아무리 selector 가  get 함수로 해당 아톰을 인자로 받을 지라도, 컴포넌트 내부에서 해당 selector 를 useRecoilValue() 로 선언하지 않으면 동작하지 않는다.

 

2. 함수 컴포넌트를 선언하면서 바로 async 를 걸었다 (죽는다) . 물론 바로 에러가 나서 수정했고, 잘못된 사용이라는 것도 알겠으나, 정확히 "왜, 무엇이 " 잘못 됐는지 아직 이해하지 못했다. 이 부분을 공부해보자.

 

3. state 를 DOM 에 바인딩하지 않고, 일반 변수를 바인딩했다. (죽는다 진짜)

 

 

 

 

오늘은 광복절,

대한독립만세