본문 바로가기

Issues/error

(4)
(트러블 슈팅) 구강 카메라 형광 이미지 촬영 신호 지연 문제 해결 사례 문제 개요 :형광 이미지 촬영 신호 지연 문제회사가 생산 및 판매하는 구강 카메라는 일반 사진뿐만 아니라 바이오 형광 이미지를 촬영할 수 있는 정밀 의료 장비입니다. 하지만 형광 이미지 촬영 시 촬영 신호가 지연되거나 누락되는 문제가 빈번하게 발생해 사용자의 촬영 경험이 불안정했고, 이는 제품의 신뢰성을 떨어뜨리는 요인이 되었습니다.  플랫폼 개발팀은 하드웨어 개발을 직접 담당하지 않지만, 플랫폼의 사용성이 구강 카메라의 성능에 크게 의존하고 있었기 때문에 이 문제를 해결하는 것이 필수적이라고 판단했습니다. 안정적이고 효율적인 사용자 경험을 위해 촬영 버튼의 입력을 신속하고 정확하게 감지하는 것이 필요했습니다.문제 원인: 신호 감지 주기의 불안정성 구강 카메라는 단일 촬영 버튼 클릭 시 1초 후 형광 이..
(트러블 슈팅) Next.js 14 와 Storybook 에서 TailwindCSS 호환 이슈 Next.js 14와 Storybook에서 TailwindCSS를 함께 사용하기 위한 호환성 문제 및 해결 방법(추가 2024. 10) 2024년 10월 기준으로 Next.js 14.2.15, Storybook 9.3.5, TailwindCSS 3.4.14 조합에서는 TailwindCSS가 정상적으로 동작하는 것이 확인되었습니다. 이로써 최신 Storybook에서의 호환성 문제를 해결하고, TailwindCSS를 활용한 디자인 시스템 구축이 원활히 이루어질 수 있습니다. 개발자들에게는 버전 호환성을 주의 깊게 확인하는 것이 중요하며, 최신 버전의 안정성을 보장받기 전까지는 이전 버전을 사용하는 것이 안정적일 수 있습니다. (추가 2024. 07) Storybook 최신 버전 8을 TailiwdCSS와 연..
(error) undefined 에러 처리 2월 초에 이직한 후, 계약서 관리 시스템 솔루션 작업에 투입되어 성과를 내야 했습니다. 빡빡했던 2개월의 작업을 마무리하고 사용자 메뉴얼을 작성하고 운영자 메뉴얼과 함께 영업팀을 통해 고객사에 납품되었습니다. 이 작업을 진행하면서, 체결된 계약서의 업무를 수행하는 계약서 담당자의 관점에서 제품을 만들기 위해 5명의 웹 서비스 팀과 함께했습니다. 우리 팀은 기술적인 이슈를 직면하면서 성장했으며, 이를 해결하기 위해 논의와 협업을 통해 경험을 쌓았습니다. 이 작업에서 사용한 기술과 도구에 대해 계속해서 공유하고 싶었지만, 이제서야 하나씩 정리할 수 있게 되었습니다. 이번 작업이 저에게 의미있는 이유는 분석과 설계의 과정에 참여하여 나온 제품이며, 적당한 규모의 React 프로젝트였다는 점입니다. 다소의 주..
(Redux) Cannot add property 0, object is not extensible Redux와 상태 불변성 유지Redux를 이용해 상태 관리를 하다 보면, 특히 불변성을 유지하는 것이 중요합니다. 기존 useState 기반의 컴포넌트 로컬 상태를 Redux를 통해 전역 상태로 관리하려고 할 때, 이 불변성 원칙을 놓치는 경우 오류가 발생할 수 있습니다. 이번 글에서는 전역 상태인 inquiryList를 체크박스의 상태와 연결하고 이를 안전하게 업데이트하는 방법을 설명합니다. 문제 상황: 불변성 원칙 위배inquiryList는 string[] 타입의 전역 상태로, 체크박스 선택 시 이를 업데이트하기 위해 handleCheckItem이라는 함수를 사용하고 있습니다. const handleCheckItem = (value: string, isChecked: boolean) => { let..