공부혜옹

MSW(Mock Service Worker) 사용이유 react query 테스트 코드 작성 중 실제 api를 호출해서 실제 db에 접근하는것을 방지해야겠다는 생각을 하였고 mock server를 어떻게 구성할까 서치하던 중 msw를 발견하였다. MSW의 기본 컨셉 test시 실제 api 호출이 일어나면 해당 호출을 가로챈 후 내가 커스텀해놓은 mock server code를 통해 reponse를 돌려 준다 따라서 실제 data에 접근하지 않는다. MSW 라이브러리 설치 $ npm i -D msw server setup 나는 test 폴더 하위에 mock 폴더를 생성하여 mockserver setup과 그 과정에서 사용할 mock data를 정의해주었다. 아래와 같이 특정 api 주소를 호출 시 어떤 r..

문제경위 jest를 추가해 axios 호출 후 데이터요청하는 custom hook 테스트코드를 짜고 돌려보던중 fail이 떴다. 테스트 하던 import문에서 에러가 났길래 babel이 뭔가 transform을 잘못해주고 있는게 아닌가 싶어 구글링을 통해 config파일을 이것저것 설정해보았는데 해결이 되지 않았다. (제안해준 what you can do쪽도 도움이 되지 않았다) 에러 코드 전문 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not ..

React-Query는 캐싱을 위해 유니크한 query key를 사용하는데 한 컴포넌트에서 쿼리를 실행한 후 다른 컴포넌트에서 동일한 쿼리를 실행했을때 캐싱되어있는 쿼리가 있다면 가져온다. 이렇게 동일한 캐싱된 데이터를 Key하나로 여기저기서 사용할 수 있는데 이때 쿼리값을 대부분 useQuery(["test"],fetch) 이런식으로 문자열 배열과 같은 값들을 하드코딩 해준다. 내가 생각한 문제 이때 나는 의문이 들었다. 여러 컴포넌트에서 사용할 Key인데 어떻게 무결성을 유지하며 사용할까..? useQuery(["test"],fetch) useQuery(["tast"],fetch) 다양한 컴포넌트에서 동일한 query를 사용해야할때 오타가 난다면? 내가 가져올 데이터를 위한 Query Key가 이미 ..

사용 이유 비대한 store의 크기를 예방하고, store에서 비동기 코드와 client state 코드를 분리하고 싶었다. 무엇보다 캐시 이용과 호출 상태에 대한 기능을 제공한다고 해서 꼭 경험해보고싶었다! 이번에 기술공부를 위한 토이프로젝트에서 github API를 사용하여 user정보를 불러올 일이 있었다. 본래는 redux-saga를 사용해 user정보를 호출하려고 하였으나 이전 사용 경험에서 api 하나당 많은 보일러 플레이트 코드들이 필요했고 복잡하여 유지보수가 쉽지 않았던 경험이 있었다. 그래서 이러한 이슈를 해결하고자 React Query를 공부하여 적용해보기로 하였다. React Query 개념 React Query는 React 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데..

NextJS가 getStaticProps를 쓰는 동적페이지를 사전렌더링하지 않는 이유 NextJS는 모든페이지를 사전에 만들어두지만 getStaticProps를 쓰는 동적페이지는 만들어두지 않는다 (동적페이지란 파일이름이 대괄호로 되어있는, 템플릿은 같으나 데이터가 바뀜으로 인해서 다른페이지로 인식되는 페이지를 말한다) 그 이유는 데이터에 따라 [id].tsx 페이지의 경우 1번 페이지 2번페이지 3번페이지…등등 몇개의 페이지를 생성해야될지 알 수 없다 따라서 기본적으로는 동적 페이지를 사전 렌더링 하지 않는다 따라서 getStaticPaths을 통해 라우팅되는 경우의 수를 집어넣어 빌드 타임 때 정적으로 렌더링할 경로를 설정해야한다 getStaticPaths 구조 paths: 어떤 path의 페이지들을..

React CSR VS NextJS SSR,SSG React는 CSR(client side rendering)을 사용해 SPA를 구현한다. 이 경우엔 페이지 소스를 확인해보면 거의 텅텅 빈 html 파일과 js 파일을 담은 코드 한줄을 읽을 수 있는데 이와 같이 비어있는 코드 덕분에 SEO(검색엔진최적화)에서 어려움을 겪는다. 반면, NextJS는 SSR(Server side rendering), SSG을 사용한다. 첫페이지를 사전렌더링 해놓고 출력하기 때문에 꽉 차 있는 html 파일을 제공한다. 학부생 레벨에서의 토이프로젝트는 이와같은 사실이 상관 없을 수 있으나 기업단위의 서비스를 제공할 땐 사용자들에게 많이 노출되어야 하는점이 중요하기 때문에 SEO가 중요하다 따라서 요즘은 NextJs를 사용하는..

기존에 사용하고 있던 React의 프레임워크이기 때문에 React와의 차이점이 무엇인지, React의 어떤점을 보완하고자 하는 기능인지 최대한 인지하면서 공부해보려고 한다 React 코드기반 라우팅 VS NextJS 파일기반 라우팅 nextJS는 기존 React와 달리 파일 기반 라우팅을 실행한다 기존의 React는 라우트와 관련된 코드를 따로 구현해 주어야했다 const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); NextJS는 이와 달리 파일기반으로 라우팅하기에 코드작성이 따로 필요 없다 다만 폴더 구조와 파일명을 조금 더 신경써서 설계 후 작명해주어야 한다 → 폴더 구조와 파일..

이 글에선 tailwind CSS의 초기 세팅 및 사용법에 대해서 설명하지 않는다. 해당 내용은 공식문서에 가장 잘 설명이 되어있다. tailwind CSS를 사용하며 느낀점과 문제점, 그리고 해결과정에 대해서 설명한다. 실제 적용 화면 Tailwind CSS란? Tailwind CSS는 Utility-First CSS 프레임워크이다 Utility-First CSS? 미리 프로젝트에 맞게 세팅되어있는 유틸리티 클래스를 활용하여 html 코드내에서 스타일링 할 수 있게하는 css 사용계기 기존에는 프레임워크 없이 SCSS를 사용하고 있었는데 최근 다수의 기업들이 CSS 프레임워크를 사용한다는것을 알게되면서 사용시 이점이 무엇인지 궁금하여 사용해보게 되었다 CSS framework에는 emotion, bul..