[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event를 사용하여 구현하기기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Dro..
[FE] 디자인 시스템에 아토믹 디자인 패턴 도입하기크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다.서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다.이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다.하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다.우리는 다음과 같은 컴포넌트 구조를 가지고 있었습니다.📦components ┣ 📂app..
Minify주석 공백, 줄바꿈 등을 삭제하여 소스코드의 사이즈를 줄이는 것을 말합니다.가독성에는 문제가 생기지만, 단순히 불필요한 코드를 제거하는 것이므로 코드 구조는 변하지 않습니다.// Before minificationfunction add(a, b) { return a + b;}// After minificationfunction add(a,b){return a+b;}Uglify코드의 크기를 줄이는 것뿐만 아니라, 변수명 축약과 같은 난독화 과정을 포함합니다.코드를 읽기 어렵게 만들어서 보안성을 강화하는 동시에 파일 크기를 더 줄이기 위한 목적으로 사용됩니다.// Before uglificationfunction addNumbers(a, b) { return a + b;}// After..
기본적인 skeleton을 구현한다면, 이미지를 불러오는 동안 (로딩 되는 동안) 스켈레톤 UI가 잘 작동 하지만, 이미지를 불러오고 나서, 렌더되는 사이에 오른쪽에서 왼쪽으로 버벅거리며 렌더되는 현상이 있습니다.Image의 src를 Control할 수 있게 state로 변경하여, 이를 개선해보고자 합니다.import { useEffect, useState } from 'react';import styles from "./index.module.css";function ImageComponent(props) { const [imageBlob, setImageBlob] = useState(null); const [isLoading, setIsLoading] = useState(false); useEf..
1️⃣ 왜 MSW를 도입했는가?1. CORS 이슈백엔드와 함께 협업하는 과정에서, CORS(Cross-Origin Resource Sharing) 문제를 만났습니다. 이를 해결하기 위해서 webpack의 Proxy를 사용하여 클라이언트 측에서 해결했습니다. 당시에는 CORS에 대한 지식이 부족해서, 이렇게만 하면 되는 줄 알았습니다.// webpack.config.js//...proxy: [ { context: ['/api'], target: process.env.REACT_APP_CRURU_API_URL, pathRewrite: { '^/api': '' }, changeOrigin: true, }, ],2. 예기치 않은 API 요청 문제이후 문제없이 개발..
1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..