이슈 로그

package 버전 문제 (lock 파일의 중요성)

이슈 발췌일: 2022.10.28 (금) 문제 상황 갑자기 Popup의 레이아웃이 깨지는 현상을 발견했다. 확인해보니 Viewport 사이즈 별로 css를 적용하기 위해 세팅해주는 className이 Popup에 세팅되지 않아서 발생한 문제였다. 문제 원인 분석 해당 상황이 발생했을 때는 내가 Popup 컴포넌트를 수정하는 작업을 하고 있을 때였다. 그래서 혹시 내가 뭘 잘못 건드렸나 싶어서 지금까지 한 작업을 브랜치를 따서 커밋하고 develop 브랜치에서 확인해보았다. 해당 이슈는 develop 브랜치에서도 발생하고 있었다. 그럼 예전부터 문제가 발생했다는 걸까...? 망했다...근데 다행히도 production에서는 문제가 발생하지 않더라... 일단 해당 이슈가 처음 발생한 commit 지점을 찾아..

[React] Input Focusing이 없어지는 현상

이슈 발췌일: 2022.08.26 (금) 이슈 내용 입력 폼 안에서 어떤 Input에 값을 입력하고 다른 Input으로 포커싱을 옮기기 위해 클릭을 했을 때, 포커싱이 없어지는 문제점이 있었다. 두 번 이상 클릭해야만 포커싱이 정상적으로 되었다. 해당 현상으로 인해 사용자가 폼에서 데이터를 입력하기 불편해졌다. 전체 폼을 입력하는 시간이 이전보다 길어지게 되는 문제점이 발생했다. 문제 원인 파악 당장 문제 현상만 봤을 때는 어떤 오류인지 감이 잘 잡히지 않았다. 따라서 예상되는 원인을 나열해보고 확인해보는 방식으로 문제 원인을 파악해보려고 했다. 일단 가장 유력한 원인으로 "컴포넌트의 불필요한 리렌더링"을 예측했다. Input 컴포넌트가 클릭되는 순간 어떤 state값이 변경되어 컴포넌트가 리렌더링 되었..

웹 구글 지도 마커 렌더링 최적화

이슈 발췌일: 2022.03.11, 14, 15 (조사 및 구현)문제 상황마커 5000 ~ 7000개 정도를 표출하는 구글 지도를 사용하는 페이지에서 아래와 같은 이슈가 발생하고 있었다.화면 초기 렌더링이 5~6초 정도로 지연됨지도 확대/축소 시 지연 시간 발생, 확대/축소를 짧은 시간 내에 여러 번 실행 시 페이지가 먹통이 되는 현상도 발생함해결 방법 조사서버에서 직접 클러스터링 처리이동/확대/축소 시 현재 viewport에 포함되는 마커, 클러스터 정보를 서버로부터 받아서 표시한다.직방 사이트가 이와 같은 방식으로 마커를 표시하고 있었다.클러스터링 기준을 직접 설정하여 표출 할 수 있다는 장점이 있다. 맵 라이브러리가 제공하는 클러스터링 기능보다 빠른지는? 잘 모른다.클라이언트 단에서 보이는 부분만 ..

[React] useMemo를 사용한 캐싱으로 중복 호출 방지하기

이슈 발췌일: 2022.09.05 (월) 현재 회사에서는 UI 컴포넌트 라이브러리로 Devextreme을 사용한다. 오늘은 Devextreme의 기능 중 CustomStore를 사용하면서 있었던 이슈에 정리해보려고 한다. Devextreme의 DataGrid나 Lookup 컴포넌트를 사용할 때, 대부분 CustomStore를 만들어주고 이를 컴포넌트에 전달하여 해당 CustomStore로 데이터를 가져오도록 되어있다. Pagination이나 Filter, Sort 등이 필요한 경우에 CustomStore를 사용하면 옵션 값이 바뀌었을 때 알아서 데이터를 다시 가져올 수 있기 때문이다. 사용자의 인터랙션으로 옵션의 값이 바뀌면, CustomStore는 load 함수를 다시 실행하여 데이터를 다시 가져온다...

z-index가 동작하지 않는 이유, 같은 위계에서 비교하기

오늘도 룰루랄라 신나게 프로젝트 코딩을 하던 도중에 UI가 깨지는 부분을 발견했다! 오호~ 이건 당연히 z-index 문제겠지! 하고 메뉴 화면 Element에 z-index를 줬지만...! 여전히 문제는 해결되지 않았다. 흠...왜 z-index가 안먹히는거지? menu1 menu2 menu3 메인 텍스트 position도 넣고 z-index도 넣었는데 왜 안되지? 나는 분명히 저 메뉴 Element에 position: absolute도 설정해주고, z-index도 1000으로 설정해줬다. 혹시 메인 콘텐츠에 z-index를 따로 설정했나? 하고 확인해봤는데 z-index가 따로 설정되어 있지도 않았다. 그럼 z-index 순서가 밀린 것도 아닐텐데... 내가 아는 선에서 머리를 데굴데굴 굴리며 메뉴 ..