짧은코딩

이전 구현 방식 https://shortcoding.tistory.com/534 전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer 구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 shortcoding.tistory.com 저번에는 무한 스크롤에서 데이터를 불러오고 데이터 저장을 items를 따로 만들어서 하였다. 이번에는 공식 사이트에서 준 예시를 보고 구현해 보겠다. 전체 상품을 불러오는 페이지를 구현하는 것은 쉬웠다. 하지만 검색 상품을 가져오는 페이지에서 설정 방법..

무한 스크롤을 구현하고 나서 아이템을 많이 불러왔을 때, 맨 위로 올리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 맨 위로 올라가는 버튼을 만들려고 했는데 스크롤을 다루기가 은근히 까다로워서 글로 기록하려 한다. 사용한 라이브러리는 "react-custom-scrollbars"이다. useRef도 같이 사용해서 구현했다. 구현 설계 1. 스크롤이 어느 정도 내려가고 나서 위로 올라가는 버튼이 나타난다. 2. "/"와 "/searchitem" 경로에서만 버튼이 나타나도록한다. 구현 const App = () => { const { pathname } = useLocation(); const ref = useRef(null); const [positionY, setPositionY] = useState..

MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨는걸까? MSW의 worker가 API를 가로채서 mock 데이터를 보내주는 것인데 정의되지 않은 주소를 가로챘기 때문에 발생한다. 따라서 요청에서 무시하거나 허용하는 onUnhandledRequest를 사용하여 지정해야한다. 해결법 onUnhandledRequest 이 속성은 setupWorker 초기화 이후에 Request handler를 등록하기 위해 사용된다. https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest start() Register the ..

구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 불러오도록 했다. (다음엔 serializeQueryArgs, merge, forceRefetch도 같이 이용하여 구현해보려 한다..!) 구현 RTK Query 우선 RTK Query의 endpoints에 위와 같이 코드를 작성했다. fakejs 백엔드와 위 데이터 형식으로 소통하기로 했기에 fakejs를 통해 위 데이터 구조를 만들었다. import { faker } from "@faker-js/faker"; export function createRandomItem..

HMR이란? HMR은 Hot Module Replacement의 줄임말이다. HMR을 활성화하면 모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다. 즉, 브라우저를 새로고침 하지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다. 새로고침을 위한 LiveReload 대신에 사용할 수 있다. 이로 인해서 코드를 수정하고 바로 웹 애플리케이션에 반영이 되게 할 수 있다. 조심할점으로는 HMR은 프로덕션용이 아니고 개발용으로만 사용해야 한다. 동작 방법 애플리케이션은 HMR 런타임에 업데이트된 내용이 있는지 확인 요청 런타임에서 업데이트된 내용을 비동기적으로 다운로드받고 애플리케이션에 알림 애틀리케이션은 런타임에 업데이트 요청 런타임은 업데이트..

이번에 프로젝트를 리팩터링하는 과정에서 로그인에 대한 부분도 수정을 하였다. 기존 방식 기존에는 로컬 스토리지에 accessToken을 저장하는 방식을 사용했었다. 하지만 로컬 스토리지에 있는 데이터는 브라우저가 닫혀도 삭제되지 않기 때문에 보안상 관리가 쉽지 않다. 수정된 방식 JWT 대신에 Cookie에 httponly 옵션을 설정하여 사용하기로 했다. 간단하게 방식을 말하면, httponly 옵션 때문에 브라우저에서 쿠키에 접근할 수 없으니까 새로고침을 하면 쿠키가 존재하는지 확인할 방법이 없다. 그렇기에 쿠키에 다른 값을 넣어서 로그인 확인을 하기로 했다. 로그인 전략 우선 로그인을 하면위 사진처럼 쿠키가 들어오게 설정했다. 위에서 말했듯이 httponly라서 JS로 쿠키에 접근할 수가 없다. ..

FE 개발자는 API가 만들어질 때까지 마냥 기다리고 있을 수만은 없다. 그렇기에 MSW를 이용해서 Mock 데이터로 미리 테스트를 할 수 있다. 또한 MSW를 이용해서 테스트 코드도 작성할 수 있다는 장점이 있다. 이번 글은 MSW를 설치하는 방법에 대해 정리해 보겠다. 참고로 이 프로젝트는 처음에 제로초님의 인프런 강의 "Sleact 만들기"에서 사용한 폴더를 그대로 가져와서 시작한 것이라 CRA로 만든 것이 아니다. 그래서 설치 중간에 좀 고난이 있었다. MSW 공식 사이트 https://mswjs.io/ Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io 설치하기 msw 설치 npm install msw -..

이번 wayc 이커머스 프로젝트를 리팩터링 하는 과정에서 Redux Toolkit을 적용하기로 했다. 그 과정에서 통신을 어떤 방식으로 할지 많이 고민을 했다. 요즘 유행하는 것이 React Qeury, RTK Query, SWR 등이 있다. React Query는 팀원 모두가 다른 프로젝트에서 사용해 봤고, SWR은 맨 처음에 만드는 과정에서 사용했다. SWR은 Next JS에 좀 더 잘 어울린다는 말이 있기에 이번에는 RTK Query를 사용해 보기로 했다! (이번 글은 https://www.youtube.com/watch?v=pnpO3o8mLBU&t=1626s 생활코딩님의 유튜브 강의를 보고 작성한다. 생활코딩님께 감사드린다!!) 실습 코드 링크 https://codesandbox.io/s/rtk-..