[240504 WIL 3주차]

벌써 3주차가 지나갔습니다.

 

이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다.

 

HTMLcollection 과 NodeList, DOMcontentLoaded,

js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다.

 

이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.

쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데,

 

테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.

왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다.

 

그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면

 

'https://page.com/detailpage' 가 기본이라고 했을 때, 이 뒤로

?id=123 처럼 ? 로 시작합니다.

 

그리고 추가적인 파라미터가 더 있다면

그때부터는 & 로 연결합니다.

만약 language 와 api_key 를 더 연결해야 한다면

 

'/detailpage?id=123&language=ko&api_key=1234'

이런 구조를 가지게 됩니다.

 

그리고, fetch 를 유틸 함수로 만들어 수행하고 해당함수의 파라미터로 url 을 받을때

const fullUrl = `https://site.com${url}${url.indexOf('?') !== -1 ? "&" : "?"}api_key=${apiKey}`

 

위와 같이 받은 url 에 ? 가 있으면(indexOf('?') !== -1) 연결부분을 &로 처리하고 없으면 ? 로 처리하는 

꽤 유용해 보이는 삼항연산자를 활용한 방식을 배웠습니다.

 

이 경우 만일 파라미터로 받은 url 에 ? 가 있다면 뒤쪽 쿼리파라미터는 &로 연결해야 하기에 

?가 있는 경우 &로 바꿔주고

?가 없는 경우 그냥 ?로 적용하여 

쿼리파라미터의 규칙을 정확하게 지킬 수 있도록 해줍니다.