221109 TIL 카테고리에 맞는 게시글 불러오기 (feat. 쿼리스트링)

오늘은 카테고리별 게시판을 만들어 봤다. 일단 카테고리별로 출력되는 게시글이 달라져야 했기 때문에 쿼리 스트링을 사용해서 카테고리의 아이디 값을 얻어와 카테고리에 포함된 모든 게시글들을 출력하도록 했다.

localhost:8080/posts?category=1

여기서 (?category=1) 이 부분을 쿼리 스트링이라고 불린다.
그러면 위와 같은 path에서 쿼리만 가져오는건 어떻게 할 수 있을까??

useLocation

우선 useLocation을 사용해서 쿼리를 받아오는 방법을 알아보자.

const location = useLocation();

useLocation을 이용해 location을 콘솔 창에 찍어보면 아래와 같은 결과가 나온다.

 

그중 search를 보면 우리가 원하는 정보인 쿼리("? category=1")만 가져오는 것을 볼 수 있다.

따라서 쿼리 스트링만 가져오기 위해선 location의 search를 이용하면 된다.

 

quertString 

다음은 queryString을 이용해서 가져오는 방법을 알아보자.

$ npm i query-string

우선 쿼리스트링을 다운 받아주자

import queryString from 'query-string';

이후 queryString을 import 해주고 queryString의 parse메서드를 이용하면 useLocation을 이용했을 때 "? category=1"에서 1만 가져오기 위해서는 문자열을 자르는 과정이 필요한데 그 과정이 없이 쿼리를 key-value 형태로 얻어올 수 있다.

const query = queryString.parse(window.location.search);

아래와 같이 쿼리가 변환돼서 받아오는 것을 확인할 수 있다.

key 또는 value를 얻기 위해서는 Object.key(), Object.values() 메서드로 가져올 수 있다.

 

Link와 useEffect

이후에 메뉴를 만들어서 react-router-dom의 Link를 이용해 path를 설정해줘서 메뉴를 클릭할 시 해당하는 카테고리의 주소로 이동해 카테고리에 해당하는 게시글을 보이게 해주려고 했는데 카테고리를 선택해도 주소창의 쿼리 스트링만 바뀌지 해당하는 게시글이 보이지 않는 문제가 발생했다. 카테고리를 클릭해서 주소가 변하는 걸 보면 Link는 제대로 작동하는 것 같은데 왜 게시글 내용은 바뀌지 않고 그대로인 건지 이유를 찾기 위해 고민을 하다 Link로 이동한 컴포넌트는 useEffect가 작동하지 않는 건가..?라는 생각을 하게 되었다. 그래서 useEffect안에 console.log("rendering")을 찍어봤다.
그랬더니 메뉴를 클릭해서 카테고리를 아무리 이동해도 콘솔 창에는 맨 처음 한번 rendering 한 것 말고는 더 이상 나오지 않는 것을 확인할 수 있었다..

 

카테고리가 변경될 때마다 렌더링이 되어야 하는데 어떻게 하면 렌더링이 되게 할 수 있을지 생각하다 useLocation()을 이용해 url을 받아오고 카테고리를 클릭할때마다 url이 변하니까 url이 변경될때마다 컴포넌트를 다시 렌더링 하면 되겠다 생각하고 useEffect 조건을 location이 바뀔때마다 업데이트 되는것으로 설정해주었다.

const location = useLocation();

  useEffect(() => {
    ...
  }, [location]);

 

결과는 카테고리가 변경이 될때마다 렌더링이 일어나는 것을 확인할 수 있었다.

 

저녁에 노아님이 오셔서 채팅 기능 관련해서 이야기해주신 부분이 있는데 기능 구현할 때 미처 생각하지도 못했던 부분들이 있었다.

우선 같은 사용자가 같은 채팅방에 여러 번 들어와 진다는 게 말이 안 된다는 건 당연한데 인지하지 못하고 있었다.

같은 사용자에 대해서 중복처리를 해줘야 할 필요를 느꼈고 지난 메시지를 볼 수 있게 메시지를 저장하는 기능도 필요함을 느꼈다.

이런 디테일함을 챙기는 게 개발실력인데 아직까지 디테적인 부분에서 많이 부족하다는 게 느껴진다.

 

그리고 Redis나 kafka 같은 메시지 중개인을 선택할때도 해당 브로커를 선택한 이유가 명확하고 설명이 가능해야 한다고  조언해주셨다.

이번 주 해야 할 목표를 빠르게 끝내고 채팅 기능을 보완해보자