-
쿼리파라미터( Query parameter )
: 쿼리스트링(Query string)이라고도 하는 쿼리파라미터는
https://www.google.com/search?q=%EC%BF%BC%EB%A6%AC%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0&oq=&aqs=chrome.0.35i39i362l8.44262156j0j15&sourceid=chrome&ie=UTF-8
아래와 같이 url에서?뒤에오는
q=%EC%BF%BC%EB%A6%AC%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0&oq=&aqs=chrome.0.35i39i362l8.44262156j0j15&sourceid=chrome&ie=UTF-8부분을 의미한다.쿼리 파라미터는 key와 value로 이루어져 있으며, 여기서는
q가 key이고,=의 뒷부분이 value가 된다.
쿼리파라미터를 여러 개를 사용할 경우&를 이용해서 추가할 수도 있다.
(1) 스크롤 버그
불시에 스크롤바가 사라지면서 스크롤이 아예 먹히지 않는 오류가 있었다. 다른페이지로 이동할 때도 동작하지 않던 스크롤은 새로고침해야지만 다시 나타났다.
이 문제를 해결하기위해 오류메시지에 있는 버그들을 해결해봤지만 근본적으로 스크롤 오류는 해당 버그들이 원인이 아니었다. 그래서 선형님이 전역 css 파일에 코드 한번 추가해보자고 아래 코드를 주셨다.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}전역으로 y축에 scroll이 나타나도록 코드인데, 이 코드를 추가하면서 스크롤 버그를 해결할 수 있었다. ( 블로그 )
(2) 상세페이지 접속시 이전 스크롤 위치가 적용되는 버그
상세페이지 접속시 제일 최상단에 스크롤이 위치되는 게 아닌, 이전 스크롤 위치가 적용되는 버그가 있었다.
useEffect(() => {
window.scrollTo({ top: 0 });
}, []);그래서 상세페이지 랜더링 시, 최상단으로 스크롤을 위치하도록 useEffect를 추가해서 해결했다.
