공부혜옹

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

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

요약 실제로 DOM을 변경하지 않고 Virtual DOM을 사용한다 Virtual DOM에서 변경사항을 반영하고 실제 DOM과 비교하여 바뀐 부분을 모아 DOM에 전달하여 단 한번의 리렌더링만 일어나도록 한다 (Batch Upadate) 이러한 프로세스를 Reconciliation이라고 한다 💡 DOM이란? DOM은 document object model의 약자로 HTML, XML과 같은 문서구조를 프로그래밍 언어로 연결해주는 api이다. 트리구조로 표현된다 렌더링 과정 업데이트한 전체 UI를 Virtual DOM에 적용한다 실제 DOM과 생성된 Virtual DOM을 Diffing Algorithm을 이용해 비교한다 ReactDOM.render()가 React element를 container DOM에..

1. React app생성하기(터미널) $ npx create-react-app my-app 이때 my-app은 자신이 원하는 앱 이름을 입력해준다. 2. my-app으로 directory 이동하기 $ cd my-app 3. start 스크립트 실행 $ npm start 4. Production build 생성하기 $ npm run build 5. Serve 설치하기 $ npm install -g serve 개인적으로 참고한 강의에선 -g 은 글로벌 옵션이기 때문에 설치한 컴퓨터 모든곳에서 사용가능하고 super user여야 글로벌 명령어를 설치할 수 있기 때문에 sudo를 앞에 붙인다고 설명하셨으나, 본인은 sudo를 붙일때 오히려 Command Not Found 에러가 떠서 sudo를 제외하고 실행했..

React란? : 화면을 만들기 위한 자바스크립트 라이브러리 -> 웹페이지를 쉽게 만들 수 있게 도와주는 녀석! 라이브러리란? : 자주쓰는 기능들을 모아놓은 것 React의 장점 : 1. Virtual DOM을 사용해 빠른 업데이트와 렌더링 속도 최근의 웹페이지들은 사용자들과 상호작용이 굉장히 많이 이루어진다. 버튼을 클릭하거나 누를때, 입력을 할때 등과 같은 상호작용으로 인해 페이지에 업데이트가 수시로 이루어지게 되는데 이때 웹페이지 전체를 업데이트하는 것은 성능면에서 굉장히 비용이 많이 발생하는, 비효율적인 작업이다. 이러한 부분을 React에서는 실제DOM(위 그림에선 Browser DOM)을 수정하는 것이 아닌, Virtual DOM을 사용하여 수정하여 실제DOM에서는 수정이 필요했던 최소한의 부..