[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event를 사용하여 구현하기기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Dro..
[React] Drag & Drop (DnD) 직접 구현하기 (1). Drag Event를 사용하여 구현하기크루루 서비스는 기획 단계에서 부터 칸반 형식으로 지원자들을 보여주는 걸 선택했습니다.우리 서비스의 핵심 가치 기능은 ‘지원자의 관리’라고 생각했습니다. 따라서 우리는 ‘지원자가 어떤 단계에 있는지 한 눈에 볼 수 있는 대시보드’가 우리 서비스의 핵심 기능이라고 생각했습니다.초기 단계 우리는 시중에 서비스되고 있는 ATS(Applicatn Tracking Service)에서 칸반 형식을 채택하고 있는 것을 확인하였습니다. 따라서 검증된 방식이라 판단하였습니다.따라서 칸반 보드 형식을 결정한다면 “한 눈에 볼 수 있는”의 기능을 충족시킬거라 생각하였습니다.그러나 우리는 사용자 테스트(UT)에서 이러한..
이 글은 ‘우아한 테크코스 6기’ 과정의 Level3 글쓰기 과제로 작성한 글입니다.서문레벨 2 글쓰기에서 저는 낭만에 대한 주제로 ‘마음가짐을 드러내기’에 대해서 이야기하였습니다. 이전 글을 읽으시면서 낭만에 대해 조금 사유하는 시간을 가졌으면 좋겠다는 바램입니다. 자신만의 낭만을 조금이라도 찾으셨을까요? 아니면 아직 낭만이라는 것이 현실과 동떨어진 허울로만 느껴지시나요?어떻게 생각하시던 좋습니다. 조금이나마 사유하셨다는 것만으로 저에게 큰 의미가 있습니다.이번 글에서는, 낭만을 통해 어떻게 더 유연한 사람이 될 수 있는지, 성숙한 사람이 될 수 있는지에 대해서 이야기하려 합니다. 어찌 보면 낭만과 동떨어질 수 있는 이야기로 느껴질 수도 있겠습니다.성숙우리는 모두 각자만의 방법으로 성숙해지기 위해 노력..
[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..