| 이미지 업로드 |
form data와 json 동시에 업로드할 경우, spring과의 협업에서는 json을 Blob을 통해 타입을 지정해주고 append를 하여야 한다. |
| 무한스크롤, useQuery의 refetch, useState 동시 사용 시, 무한 루프에 빠진다 |
state 변환 → 리렌더링 → 이때 다시 useQuery 호출 |
| 네비바를 특정 라우터에만 보이도록 해야하는데, 각각 라우터 컴퍼넌트 안에서 사용하게 되면 네비바도 리렌더링이 되어 비효율적이고, click 애니메이션이 적용이 안된다. |
router-dom의 Outlet을 도입 |
| react-draggable 라이브러리를 이용해서 swiper 버튼을 구현하려 하였으나, touch이벤트에서는 movement값이 주어지지 않음 |
start의 위치와 move의 위치값들의 차이를 구해 계산한다 |
| 친구 검색 filter에서 input에 입력하는 값을 백엔드에 전달 할 때 useState를 사용하면 입력된 변경사항이 즉시 반영되지 않음. 또한 useState를 사용했을때 계속해서 리렌더링이 일어남 |
useRef는 업데이트 시 리렌더가 일어나지 않는 가변 값을 저장하는 데 사용 할 수 있음. useRef로 input값을 넘겨줌. |
| draft.js의 입력칸의 overflow가 발생하여 제한이 필요함 |
줄바꿈되는 케이스 분석 -> 1) \n 이 입력되어 줄바꿈됐을 때, 2) 줄의 길이가 최대 길이가 넘어 줄바꿈이 될 때 -> 1)의 경우는 getPlainText()의 \n 으로 split된 배열의 길이로 구함 -> 2) 배열의 요소가 한 줄의 최대길이를 나눈 몫으로 줄바꿈 횟수 구함 -> 1) + 2)의 합이 줄의 길이 -> beforeInput과 beforePaste에 최대 줄이 넘어가지 않도록 제한 |
| Image Shape의 구현을 위해 useImage 훅을 사용해야 하는데, Hook들은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출할 수 있기에 다수의 Image Shape들을 동적으로 적용할 수 없는 문제에 봉착함 |
컴퍼넌트 내부에서 useImage 훅을 사용하여 Image shape에 대한 딕셔너리 자료구조를 만들고, 인덱스를 사용하여 동적으로 접근할 수 있도록 함 |
| Image Shape의 transform 이후 바로 저장시 회전 정보만 저장이 안되는 문제 |
onTransformEnd의 onChange 속성을 추가하여 tranform 이후 회전 정보가 state에 반영되도록 함 |
| 스티커를 옮기기 위해 드래그할 때, 펜이 시작시점에 잠깐 그려지는 문제 |
모드 state를 STICKER와 DRAW를 분리하여 STICKER 모드일 때 펜 관련한 어떤 이벤트도 동작하지 않도록 함 |
| 모바일 환경에서 펜을 그리기 위해 touch를 할 때, overscroll이 되는 문제 |
touchmove 이벤트 발생 시, preventDefault 적용 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent