TIL : 최종프로젝트 16일차

hihyeon_cho·2023년 2월 27일
0

TIL

목록 보기
79/101
  • 쿼리파라미터( 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를 추가해서 해결했다.

profile
코딩은 짜릿해 늘 새로워 ✨

0개의 댓글