공부혜옹

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..

정답코드는 맨 하단에 기입해놓았다. 오랜만에 효율성에서 애먹은 문제를 만나 나중에 까먹지 않으려고 포스팅한다. 먼저 stones의 배열 크기와 원소 크기를 보고 그냥 구현하면 시간초과 나겠거니 해서 이분탐색으로 풀었다. 범위가 많고 배열을 순회하며 값을 찾아야할땐 이분탐색이 적절한 케이스가 많은것 같다. 문제 코딩테스트 연습 - 징검다리 건너기 문제풀이방식(이분탐색) 스톤의 원소들이 모두 1이라면? 한사람밖에 건널 수 없다 하지만 2억이라면? 2억명의 친구들이 건널 수 있다. 따라서 배열 stones의 최소 원소가 건널 수 있는 친구의 최저(left), 최대원소가 건널 수 있는 친구의 최대(right)인것이다. stones 배열을 copy하고, 중간값(mid)을 구해 배열을 순회하면서 mid를 빼준다. ..

문제경위 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 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데..

최근 구현중인 과제에서 세자릿수의 숫자를 사용자 표준입력으로 입력받는데 입력받은 값을 유효성 검사하고 예외처리 하는 과정에서 다시 알게된것을 포스팅한다 문제 상황 세자릿수를 입력받아야하기 때문에 특수문자나 문자가 입력되었을시 throw로 에러를 발생시켜주었는데 이 검사과정에서 나는 isNaN 함수를 사용하였다 if(isNaN(value)) throw ... isNaN의 파라미터로 숫자가 아닌 그 어떤값을 넘겨주어도 Number(value) 처리하여 숫자로 변환한다. 이 과정에서 숫자나 문자열이 아닌 경우는 숫자가 아니라는 뜻의 NaN(Not a Number)값을 갖게 되고, NaN이 되면 isNaN 함수는 true를 return 한다. 내가 넘겨준 value는 문자열이었는데 테스트시 ‘1c4’ 혹은 ‘4..

c++로 주로 알고리즘을 풀었기 떄문에 그래프 문제가 나오면 vector를 사용하여 풀었는데 js는 다양한 풀이방법이 많은것 같다. js로 풀이할땐 주로 객체에 삼항연산자를 사용하여 key와 value가 이미 있는지 체크하고 넣어주는 식으로 풀었는데 이에 더하여 concat과 reduce를 활용하여 푼 풀이가 있어서 공부해보았다 const edge = [ [3, 6], [4, 3], [3, 2], [1, 3], [1, 2], [2, 4], [5, 2], ]; const nodeObj = edge.reduce((Graph, [from, to]) => { Graph[from] = (Graph[from] || []).concat(to); Graph[to] = (Graph[to] || []).concat(fro..

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