[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event를 사용하여 구현하기기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Dro..
1. React와 TypeScript 설치먼저, React와 TypeScript를 설치하겠습니다. TypeScript 의존성은 .ts 파일을 컴파일하는 데 사용됩니다.npm i react react-domnpm i -D typescript2. Webpack 설치다음으로, Webpack을 설치합니다. Webpack은 모듈 번들러로, 개발 중과 빌드 과정에서 유용하게 사용됩니다.npm install -D webpack webpack-cli webpack-dev-server3. 로더 설치CSS 스타일을 적용하기 위해 style-loader와 css-loader를 설치합니다. 또한, 빠른 번들링을 위해 esbuild-loader를 사용할 것입니다.npm i -D style-loader css-loader esb..
1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..
❤️🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..
이전 시간 카카오와 Supabase앱을 만들어 연동하였습니다. ⬇️ 이전 포스팅을 못보셨다면 아래로 이동하여 세팅을 먼저 해주세요! ⬇️ Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1) 이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authen lurgi.tistory.com 이제 본격적으로 간단한 화면을 구현해 보겠습니다! 우선 Next App을 만들어 줍시다. npx create-next-app@l..
이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free. supabase.com Supabase는 구글의 Firebase와 유사한 서비스인데요, 쉽게 생각하면 백엔드 기능을 가지고 있는 서비스라고 생각하시면 됩니다. 데이터 베이스를 쉽게 다룰 수 있게 해주기 때문에 풀스택 개발에..