치춘짱베리굿나이스

Optimistic Update 이전 게시물에서 쿼리 키를 싹 정리하였다 좋아요 버튼을 눌렀을 때 쿼리를 refetch 하고 나서야 화면에 변화가 생기는데, 이건 사용자 입장에서 엄청나게 느린 동작이 아닐 수 없다 Optimistic Update 를 적용하여 반응을 빠르게 만들어보자 사전 지식 Optimistic Update? 낙관적 업데이트 라는 뜻 요청을 보내고 응답을 기다리는 동안, 응답이 올 때까지 화면 UI 업데이트를 중단하지 않고 미리 결과를 예측해서 화면 UI를 미리 업데이트하는 기법이다 서버 응답이 당연히 성공할 것이라고 가정하고 화면 업데이트를 진행하기 때문에 낙관적 업데이트라고 불리는 것 예를 들어, 좋아요 버튼을 눌렀을 때 좋아요 post 요청이 서버로 보내진다 클라이언트에서는 “어차..

매직 리터럴 이제 안녕 💩 리얼월드 in Vue (뷰얼월드…) 프로젝트를 수행하면서 Tanstack Query 를 도입했는데, 규모가 그다지 크지 않은 프로젝트를 수행했을 때의 습관이 남아서 (+ 데이터 캐싱 용도로만 TQ를 대충 사용했어서… 😕) 쿼리 키를 전부 제각각인 문자열로 다뤘더니 혼돈의 도가니탕이 되었다 쿼리 키를 전부 하드코딩한 탓에 어떤 상황에서 어떤 쿼리 키를 사용해야 하는지 혼란스러워진 것;;; 추후 좋아요 버튼에 Optimistic Update 를 적용하고 싶은데, 이를 위해서 사전 작업을 할 필요도 좀 느끼게 됐다 따라서 이번 시간에는 쿼리 키를 객체로 적절하게 다뤄보는 연습을 할 것이다… 기존 쿼리 키 관리 코드 export function useGetArticles(page: R..

Husky 설치 $> npm i husky --save-dev $> yarn husky --dev 개발 과정에서만 사용하는 툴이므로 devDependency에 추가하는 것을 잊지 말자 설명 git hook을 쉽게 도입해줄 수 있게 해 주는 툴이다 조금만 설정해 주면 팀원 전체에게 깃 훅이 적용되어 커밋이나 푸시 등의 이벤트 발생 전에 특정 로직을 수행하게끔 할 수 있다 강제로 특정 로직을 수행하게 하는 이유? 가장 큰 이유 중 하나는 통일성이 되겠다 eslint, prettier를 아무리 열심히 설정해도 팀원들이 매번 지키지 않으면 린터 또는 포매터가 적용되지 않은 (통일성에 어긋나는) 코드가 레포지토리에 올라가므로 설정한 의미가 사라진다 이를 강제로 git hook을 통해 커밋 전이나 푸시 전에 특정 ..

내보내기 리액트 컴포넌트 또는 html 요소를 구성하면 이를 pdf로 만들어주는 기능이 필요했다 라이브러리를 알아보니 크게 두 가지로 갈리는 것 같은데 두 라이브러리를 모두 써보고 느낀 점을 적어보려고 한다 사실 라이브러리 선택하기 위해 팀원 보여주려고? 설득하려고?.. 쓴 글임 최근까지도 업데이트가 활발한 두 라이브러리 케이스를 가져와 보았다 React-pdf 링크 https://github.com/diegomura/react-pdf https://react-pdf.org 설명 리액트를 이용하여 pdf를 생성해주는 라이브러리 pdf 뷰어는 https://github.com/wojtekmaj/react-pdf 쪽으로 가라고 한다 자체적으로 지원하는 컴포넌트들을 조합하여 pdf 페이지를 구성하고, 이를 바..

Socket.io https://socket.io/ 사이트와 라이브러리명이 같다 (ㅋㅋ) 트랜센던스 하면서 가장 많이 신세진 라이브러리인데, 미루고 미루다가 이제야 글을 적게 되었다… 설치 $> npm i socket.io // 서버 측 $> npm i socket.io-client // 클라이언트 측 $> yarn add socket.io // 서버 측 $> yarn add socket.io-client // 클라이언트 측 npm 링크 https://www.npmjs.com/package/socket.io yarn 링크 https://classic.yarnpkg.com/en/package/socket.io 설명 WebSocket 프로토콜 위에서 동작하며, 소켓 통신을 손쉽게 설정 및 수행할 수 있는 라..

삽질의 기록 스토리북 설치, 타입스크립트 지원 및 scss 로더를 통한 컴파일은 성공했으나 scss 변수 import가 계속 실패해서 엄청난 난항을 겪는 중 하나하나 적어볼까 함 특히 게시글들이 다 Webpack 기준이었어서 해결법이 더 찾기 어려웠던 것 같다... Storybook 설치 npx storybook@latest init 번들러 고르기 Vite, Webpack 중 하나를 고르자 나는 번들링 속도가 빠르다는 Vite로 골라봤다 사실 항상 Webpack으로 프로젝트를 설정하다 보니 한번쯤은 Vite를 쓰고 싶어서… 프로젝트 유형 고르기 화살표 아래로 내려보면 ember, preact, svelte 등의 다양한 프레임워크들이 사용 가능하다 react 컴포넌트를 만들 것이므로 react로 선택하였다..

Axios instance 트랜센던스를 하면서 axios 호출부를 싹 개편할 일이 있었는데 팀원이 Axios instance에 관해 공부하고 트센에 도입하는 게 좋을 것 같다는 의견을 주었다 (gosu) 근데 이전 프로젝트는 fetch 를 썼었고 Axios 는 정말 오랜만에 쓰는 데다가 instance 기능은 안 써봤기 때문에 정리할 필요가 좀 생겼음 Axios 관련해서도 한번 글로 쭉 엮고 가야하는데 귀찮으즘이 아주… instance 쓰기 전의 axios 함수 구성 axios Wrappers export async function axiosGet(uri: string): Promise { return axios .get(`${process.env.REACT_APP_SERVER}${uri}`) .then..

Cypress JavaScript Web Testing and Component Testing Framework | cypress.io JavaScript Web Testing and Component Testing Framework | cypress.io Test. Automate. Accelerate. With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds. www.cypress.io 설치 npm npm: cypress npm install cypress --save-d..