짧은코딩

Mutation mutation은 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 하는 것이다. 데이터를 추가, 수정, 삭제할 때 사용된다. 그렇기에 mutation을 활용하면 optimistic update를 구현할 수 있고, 쿼리 캐시를 업데이트할 수 있으며 클라이언트에 있는 데이터를 최신 상태로 유지할 수 있다. useMutation useMutation은 useQuery와 비슷하다. 하지만 데이터를 저장하지 않아 key는 필요가 없다. 그리고 isLoading은 있지만 데이터를 저장하지 않으니까 캐시 된 항목이 없어서 isFetching은 없다. 기본값으로 재시도는 하지 않지만 설정할 수 있다. 사용법 블로그 댓글을 삭제하는 예시이다. const deleteMutation = useMutat..

isFetching vs isLoading isFetching은 비동기 쿼리가 해결되지 않았음을 의미한다. 즉, feching을 완료하지 않았다는 의미이다. async 함수가 해결되지 않았고 아직 데이터를 가져오는 중이다. isLoading은 isFetching의 하위 집합이며 데이터를 가져오는 상태라는 것을 의미한다. 쿼리 함수가 해결되지 않았고 캐시 된 데이터가 없다. 표시할 캐시 데이터도 없다는 의미이다. 즉, isLoading 상태이면 isFetching은 참이다. => 별 차이가 없어 보일 수 있지만 페이지네이션을 할 때, 캐시 된 데이터가 있을 때와 없을 때를 구분해야 한다. -예시 if (isFetching) return Loading...; 이 코드에서는 캐시 된 데이터의 존재와 상관없이 ..

prefetching페이지네이션을 하고 다음 페이지로 넘어갈 때, prefetching을 하지 않으면 "로딩중..." 이런 메시지가 보이게 된다. 이는 사용자 경험에 좋지 않다. 그렇기에 prefetching을 해야 한다. prefetching은 데이터를 캐시에 추가하며 구성할 수 있지만 기본값은 stale(만료) 상태이다. 그러고 데이터가 필요할 때 stale 상태에서 데이터를 다시 가져오고 이때 캐시에 있는 만료되지 않은 데이터를 이용한다. 그렇기에 추후에 사용자가 사용할 법한 데이터를 prefetching 하면 좀 더 개선된 사용자 경험을 제공할 수 있다. 페이지네이션에서는 다음 페이지의 데이터를 prefetchig 하면 된다.사용 방법페이지네이션을 예시로 들면 다음 페이지로 넘어가는 버튼을 눌렀을..

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 잘못된 코드 const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id) ); 이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다. 해결 방법 const { data, isLoading, isError, error } = useQuery( ["comments", post.id], () => fetchComments(post.id) ); 이 경우 key를 ["comme..

리액트 쿼리란 클라이언트에서 서버 데이터가 필요할 때, fetch나 axios를 사용하지 않고 리액트 쿼리 캐시를 요청할 수 있다. 즉, 리액트 쿼리는 해당 캐시의 데이터를 유지 관리하는 것이다. 데이터 관리는 리액트 쿼리가 하지만 새 데이터로 캐시를 업데이트하는 시기를 개발자가 설정할 수 있다. 클라이언트 캐시에 있는 데이터가 서버 데이터와 일치하는지 확인하는 방법은 2가지가 있다. 1. 명령형: 쿼리 클라이언트에 기존에 있던 데이터를 무시하고 새 데이터를 서버에서 가져와 교체하는 것 2. 선언형: 예를 들어 브라우저 창을 다시 포커스 하면 refetch하는 트리거 조건을 구성한다. 혹은 시간을 설정하여 그 시간이 지나면 다시 데이터를 불러올 수 있게 할 수 있다. 리액트 쿼리는 서버에 대한 모든 쿼리..

http 상태 코드는 서버에서 클라이언트 요청의 처리 상태를 알려주는 기능이다. 그리고 http 상태 코드에는 100~500번대 에러가 존재한다. 100번대 100번대 상태 코드는 요청이 수신되어 처리 중이라는 의미이다. 100번대는 실무에서 거의 사용하지 않는다. 200번대 200번대는 클라이언트의 요청이 성공적으로 처리되었다는 것을 의미한다. 보통은 200이나 (200, 201) 이렇게 1~2개만 사용한다. 200 "OK"이며 요청 성공을 의미한다. 201 요청이 성공하고 새로운 리소스가 생성된 것을 의미한다. ex) 회원 가입이 성공하면 응답 Location의 필드에 "/members/50" 이런 식으로 온다. 202 요청이 접수되었지만 처리되지 않은 상태를 의미한다. ex) 요청 접수를 하고 1시..

HTTP API API URI를 설계할 때 가장 중요한 것은 리소스 식별이다. 만약 회원을 등록, 수정, 조회하면 이때 리소스는 회원이라는 개념이다. 따라서 리소스를 식별하고 그 리소스를 대상으로 하는 행위를 분리하면 된다. 예를 들면 리소스는 회원이고 행위는 조회, 등록, 삭제, 변경이다. 메서드 종류 주요 메서드는 get, post, put, patch, delete가 있다. 자주 사용하지 않는 메서드로는 head, options, connect, trace가 있다. GET get은 리소스를 조회할 수 있다. 보통 서버에 전달하고 싶은 데이터는 query(쿼리 파라미터, 쿼리 스트링)으로 전달을 한다. get도 메시지 바디를 통해 데이터를 전달할 수 있지만 실무에서는 get에 body를 넣지 않는다...

HTTP(HyperText Transfer Protocol) 현대 http는 1.1 버전에서 나온 기능을 많이 사용한다. 현재 나와있는 http2, http3는 모두 http 1.1 버전 기능의 성능을 높인 것이다. http2까지는 TCP 위에서 동작한다. 하지만 HTTP3는 UDP를 기반으로 개발을 하고 있다. 그 이유는 TCP가 3-way hand-shake를 하기 때문에 속도가 느리고 데이터가 너무 많아서 빠른 메커니즘이 아니기 때문이다. TCP는 이미 많이 설계가 되어 있어 수정이 불가능한데, UDP는 수정이 가능하여 새로 설계하여 http3을 개발하고 있다. HTTP 구조 HTTP 메시지 구조는 위 사진처럼 되어 있다. 3번째에 있는 공백 라인은 데이터가 없어도 무조건 있어야 한다. -HTTP ..

다이나믹 라우팅 sns에서 게시글의 아이디를 활용하여 게시글을 불러오는 페이지를 만들려고 하면 next.js에서는 다이나믹 라우팅을 사용할 수 있다. 파일 구조 파일 구조는 이렇게 post 폴더 안에 [id].js를 하면된다. 코드 const router = useRouter(); const { id } = router.query; useRouter를 이용하면 url에 뜨는 게시글의 id를 받아올 수 있다. getServerSideProps에서 id 찾기 context.store.dispatch({ type: LOAD_POST_REQUEST, // context.params.id 혹은 context.query.id라고 하면 useRouter에 똑같이 접근할 수 있다. data: context.params..

CSR과 SSR CSR CSR은 데이터를 얻기 위해서 요청이 2번 간다. 사용자가 새로고침을 하면 프론트 서버에서 HTML과 JS를 브라우저에 주고 그 이후에 또 요청을 하여 추가적으로 데이터를 불러온다. SSR SSR은 데이터를 얻기 위해 요청이 1번 간다. 서버에서 즉시 렌더링 가능한 html 파일이 만들어져 있기 때문에 바로 렌더링이 된다. 이로 인해 초기 로딩 속도가 빨라진다. 즉, 사용자는 콘텐츠가 빠르게 보이는 느낌을 줄 수 있다. SSR 적용 방법 index.js useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); 처음 시작이 되는 페이지인 inde..