programming study/Trouble Shooting (5) 썸네일형 리스트형 useCallback과 클로져 그리고 의존성 배열 1. useCallback이란? useCallback은 함수를 전달받아 메모이제이션한다. 불필요한 렌더링을 방지하여 성능 최적화를 위해 사용되는 React Hook이다. 이 Hook 또한 useEffect와 마찬가지로 두번째 인자로 의존성 배열을 전달할 수 있다. 의존성 배열에 전달된 변수가 변경이 일어나면 콜백함수는 재차 메모이제이션된다. const exampleCallback = useCallback(() => exampleFunction(a), [a]); 2. 이슈 발생 최근에 지인이 진행하던 프로젝트에 합류하게 되었다. react-dnd를 활용하여 생성된 리스트를 drag & drop으로 옮길 수 있는 기능을 구현했는데, UI 자체는 이동이 되나 그 데이터가 제대로 적용이 되지 않는 이슈가 발생했.. 브라우저 호환성 1. 슬라이더 이미지가...! 2021년 12월 어느날, 서비스 중인 회사 웹 페이지의 슬라이더의 UI가 깨지는 이슈가 인입되었다. 진행중인 프로모션 이미지를 보여주는 슬라이더였는데, 슬라이더를 구성할 모든 이미지가 쭉 나열되어버리는 것이었다. 2. 상황 재현 해당 이슈의 상황 재현은 다행히도 어렵지 않았다. Safari에서만 재현이 되었고 Chrome에서는 정상적으로 슬라이더가 정상적으로 보였다. 즉 브라우저 호환성 이슈였다. 3. 원인 파악 각 브라우저에서 지원하는 CSS Property는 차이가 있다. 그러므로 슬라이더에 적용된 Property 중 Chrome에서는 지원하지만 Safari에서는 지원하지 않는 것을 찾아내야 했다. 의심되는 Property는 overflow였다. 보여지지 않아야할 요소.. iOS Button Text Color 1. Button Text Color 이슈 2021년 9월 어느날, 서비스 중인 앱 내 버튼 컬러들이 blue로 바뀌어버린 이슈가 인입되었다. 일관적인 UI를 제공하기 위해 해당 이슈는 해결되어야했고 내가 그것을 맡게되었었다. 2. 상황 재현 다행히도, 상황을 재현하는 것은 어렵지 않았다. iOS에서만 해당 상황이 재현되었던 것이다. 그것도 최근에 업데이트를 한 기기에서. 때문에 원인을 파악하는 것도 쉽게할 수 있었다. 3. 원인 파악 원인은 2021년 9월 경에 iOS 15버전 업데이트였다. 이때 Safari도 대거 업데이트 되면서 엔진 Webkit 또한 업데이트 되었다. Text in HTML Buttons is blue on iOS 15 에 따르면, 버튼에 명시적인 color 지정이 없는 경우 Us.. replaceAll is not a function 1. 화이트 아웃 이슈가 발생하다. 회사에서 운영중인 서비스의 결제 페이지에서 화이트아웃 이슈가 발생한 적이 있었다. 해당 사항은 CS팀에서 개발팀으로 빠르게 전달되었고 중요한 페이지에서의 오류인 만큼 핫이슈로 처리되어야했었다. 2. 상황 재현 원인을 파악하기 위해서 상황을 재현해내어야 했다. (프론트엔드 에러 로그 시스템이 전무하다...) 결제 페이지를 webpack dev server에서, 다른 브라우저에서, real 서버에서 접근을 하여도 상황이 재현되지 않았다. 이를 보아, 기기에서 재현되는 오류일거라고 생각한 나는 테스트 기기를 사용하여 해당 페이지에 접근하였는데 특정 AOS 기기에서만 상황이 재현되었다. 곧바로 해당 기기를 연결하여 웹뷰 디버그 모드로 에러 메시지를 확인했는데, replaceA.. setInterval과 클로져 1. React에서 직면한 클로져 이슈 사용자가 검색 조건을 입력하면, API를 호출하여 해당 조건의 결과를 보여주는 용도의 페이지를 작업한 경험이 있다. 이에 더해서, 입력된 검색 조건을 토대로 6초마다 호출하여 결과를 최신화하는 기능도 구현해야 했었다. 당시에 아래와 같은 코드로 해당 기능을 구현하려고 하였었다.(회사 코드를 가져와 설명할 수는 없으므로 예시로 대체하겠다.) 첫번째 시도 각 검색 조건을 useState로 다루도록 함 각 검색 조건에 해당하는 UI가 있고 이벤트 핸들러에 의해 set~ 이 호출 useEffect로 컴포넌트가 마운트된 시점에서 타이머를 세팅 6초단위로 호출되도록 하였음 언마운트 시점에서 타이머를 클리어 // 검색 페이지 컴포넌트 function searchPage = ().. 이전 1 다음
