2024-05-03 쿼리스트링

조별과제를 하면서 반나절 가량을 애를 먹은 게 있다.

쿼리스트링인데

const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}language=${currentLanguage}&api_key=${ApiKey}`, options)

이 코드의 구조 자체가 이해가 되질 않았다.

최초 코드는 아래와 같았다.

const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}api_key=${ApiKey}`, options)

위 URL이 너무 복잡해보였는데, 튜터님께 질문 후 해결이 되었다.

queryString이란?

웹 주소의 일부로, 서버에 특정 데이터를 전달하기 위해 사용 되는 것.

핵심특징

• 시작 : URL 경로의 맨 뒤에서 시작. ? 문자로 시작
• 키-값 쌍 : 데이터는 key = value 형태로 이루어짐. key에는 변수의 이름이, value에는 값이 담김. (실제 데이터)
• 여러 개의 변수를 url에 담을 경우 & 기호로 연결함.
• ASCll 인코딩 : ACSll가 아닌 문자나 예약된 문자(공백, #, % 등)가 아닌 경우 URL 인코딩이 필요함. 예를 들어 공백은 %20이나 +로 표현함.
• 길이 제한 : URL은 브라우저마다 다르지만 일반적으로 최대 2048자까지 가능하다.
• 보안 : URL에 모든 정보가 포함되어 주소창에 노출되기 때문에 비밀번호나 개인정보를 담아선 안 된다.

위 주소 분석

const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}api_key=${ApiKey}`, options)

https://example.com/search?query=영화&lang=ko

위 주소에서 search까지가 주소고, ? 뒤로는 queryString이다. query라는 변수에 값이 '영화'가 담겨있는 것이고, lang이라는 변수에는 'ko'가 담겨 있는 것이다.