개발기록창고

taskgrow 프로젝트에서 할 일 리스트를 유저가 중요도에 따라 자유롭게 순서를 변환할 수 있도록 UX 개선이 필요하다. 불필요한 리렌더링을 줄이기 위해 useRef를 사용해서 구현했다. 순서를 바꾸는 구현에 있어 생각이 많았다. 단순한 것이지만 드래그라 쉽게 변경 가능함 -> 많은 요청 으로 유저가 최종적으로 수정을 마친 후 한 번만 요청을 보낼 수 있도록 생각을 해보았지만.. 클라이언트에서 순서 저장해두고 있다가 해당 테스크를 벗어나면 변경된 order 서버에 요청 -> 순서 옮기고 브라우저 창을 닫으면 적용 안됨 순서 변경 버튼 생성 -> 버튼 클릭 후 자유롭게 순서 변경 가능 -> 확인 버튼 클릭시 변경된 order 서버에 요청 -> 유저 번거로움 와 같은 문제로 딱히 좋은 방법이 떠오르지 않았..

Taskgrow라는 뽀모도로 프로젝트에서 UX를 개선하기 위한 작업을 시작했다. 현 서비스는 뽀모도로(타이머를 활용해서 25분간 집중해서 일하고, 5분간 휴식하는 기법)를 제공하고 있다. 페이지에서 타이머 시작을 클릭해놓고 다른 페이지에서 작업을 진행할 때 몇 분이 남았는지 매번 확인하기 위해서는 페이지를 방문해야하는 불편함이 있다. 이를 해결하기 위해 HTML title에 남은 시간을 표시하고 favicon은 시간의 흐름에 따라 시간의 흐름을 보여주면 1. 유저가 굳이 페이지를 클릭후 남은 시간을 확인할 필요없이 title로 남은 시간 확인 가능 2. favicon으로 시각적으로도 어느정도 흘렀는지 체크 가능 UX 개선이 가능했다. 항상 정적으로 만들다가 동적으로 처음 만들어보는 거라서 어렵지 않을까 ..

프로젝트를 하면서 데이터 캐싱이 필요하여 상태관리의 필요성을 느끼게 되었고 그중 react query에 대해 알아보고자 유튜브에서 kakao tech와 우아한 테크세미나에서 좋은 내용을 보게 되어 이를 정리하고자 게시글을 작성하게 되었다. 눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유 / if(kakao)2022 1. React-Query 조금 알아보기 React-Query는 주로 데이터 패칭, 캐싱, 동기화 작업을 한다. React에서도 위의 작업은 가능하나 많은 테스트와 시간을 필요로 함 > 자체적으로 hook 만들어야함 ContextAPI, useState, useEffect, useCallback, 캐싱, 에러핸들링 등 많은 고려사항을 가져가야함 하지만 R..

프로젝트를 하면서 컴포넌트를 어떻게 나눌 것인지, 재사용을 극대화하는 방향에 대해 고민하던 중에 아토믹 디자인을 알게 되었다. 그리고 디자인 시스템인 아토믹 디자인을 알게 되면서 리액트가 컴포넌트 기반의 프로그래밍인 것은 알고 있었으나 이 개념을 충분히 활용하지 못했다는 것을 깨달았다. 아토믹 디자인이란? 컴포넌트를 가장 작은 단위부터 상위 컴포넌트까지 만들어서 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인은 컴포넌트 중심 설계 패턴에서 주목받게 되었다. 원자(atom), 분자(molecule), 유기체(organism), 템플릿(template), 페이지(pages)로 효과적인 인터페이스 시스템을 만든다. 1. 원자 가장 작은 단위의 구성 요소 (분해 될 수 없음) 애니메이션, 색상 팔레트..

처음 리액트 환경 세팅할 때 무작정 npx create-react-app 로 시작을 했었는데 오늘 프로젝트를 위해 환경 세팅을 알아보다가 Vite를 알게 되었다. CRA로 프로젝트를 생성할경우 기본 제공되는 react-scripts 번들러를 사용하게 되는데 이 라이브러리 내부에서 사용되는 것은 webpack인데 Vite보다 속도도 느리고 메모리도 많이 사용되어 무겁다. 리액트는 JSX로 작성되어 JS로 컴파일 하는 과정이 필요한데 CRA는 코드가 바뀌면 모든 코드를 새로 번들링하기 때문에 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다. 하지만 Vite는 Esbuild를 이용하여 변경된 부분만 새로 번들링한다. (물론 처음에 전체적으로 한 번 번들링한다) 그렇게 때문에 이번 프로젝..