본문 바로가기

Issues

 (14)
(상태 관리) useReducer로 상태관리 최적화 5월부터 참여하고 있는 프로젝트는 S 보험사에 납품되는 C/S Application의 커스터마이징 작업을 수행하는 프로젝트입니다. 그러나 어제 대상포진 발생으로 인해 긴급 휴가를 내야 했습니다. 오늘은 휴가를 내고 병원에 가서 치료를 받으며, 일보의 후퇴의 마음으로 이번 기회에 '계약서 관리 시스템' 프로젝트 코드를 회고하는 시간을 가지려고 합니다. 저는 지금까지의 저의 블로그를 통해 '계약서 관리 시스템' 의 프론트엔드 개발자로서 사용성 관점에서 UI 개선 작업에 대한 회고를 작성했습니다. 이번에는 코드적인 리뷰를 통해 개선해본 사항들을 정리하고자 합니다. 특히, 이번 주제에서는 useReducer를 활용한 깔끔한 상태 관리 방법에 대해 다루어 보려고 합니다. 이는 계속해서 하게 될 프로젝트의 효율성을..
(UI / UX) 사용성 관점에서 UI_검색 근황지난 주에는 고객사로부터 추가 개발 요구사항을 접수하여 작업을 진행하고 완료하였습니다. 해당 요구사항에 대한 개발 결과를 문서화하여 요약된 보고서를 작성하고 이를 이해 관계자들과 공유하였습니다.   현재 저희 회사는 상장을 위해 C/S 기반의 자바 솔루션인 캐시카우 영역에 주력을 하고 있어 웹 개발에 집중하는 것이 일시적으로 어려운 상황입니다. 그러나 제가 프론트엔드 개발자로서 기술적으로 기여할 수 있는 부분에 최선을 다하고 있습니다. 평소에 사용성과 비즈니스 가치를 중요시하는 프론트엔드 개발자로서의 자세를 가지고 일하고 있습니다. 아직까지는 특정한 도메인에 종속되지 않고 다양한 웹 프론트엔드 개발 역량을 키우고자 하며, 사용자 인터페이스 개발, 사용자 경험 개선, 웹 성능 최적화, 반응형 디자인, ..
(UI / UX) 사용성 관점에서 UI_계약서_추가 지난 2월에 이직하여 웹 서비스 팀에서 "계약서 관리 시스템" 프로젝트에 프론트엔드 개발자로 참여하게 되었습니다. 이 프로젝트는 React와 Node.js를 기반으로 개발되었으며, 서명이 날인된 계약서를 전자적으로 관리하는 시스템입니다. PDF 파일의 계약서를 시스템에 업로드하면 OCR 기술을 이용하여 계약서의 텍스트를 추출하고, 검색 엔진을 추가하여 문서명과 본문 검색이 가능합니다. 또한, 등록된 계약서의 계약일, 계약 기간, 결제일 등과 같은 중요한 일정을 캘린더로 제공합니다.  현재 새롭게 시작된 새로운 프로젝트에 참여하고 있지만, 지난 프로젝트 '계약서 관리 시스템'을 만들기 위해 보낸 그간의 시간들을 정리하고 프로젝트를 회고하는 기간을 개인적으로 가지고 있습니다. 다소간의 주절거림이 있을 수 있..
(UI / UX) 사용성 관점에서 UI_홈(대시보드)과 계약서 2월 6일 현 직장으로 이직한 후,  웹 서비스팀에 배치되어 계약서 관리 시스템을 개발하는 프로젝트에 참여하게 되었습니다. 어제는 새로운 프로젝트 투입 전 지금까지 계약서 관리 시스템를 만들면서 사용자 관점에서 우리 팀이 직면했던 기술적 이슈, 사용자 관점에서 논의한 후 제품에 반영시켰던 이슈들을 회고하는 시간을 가졌습니다. UI 영역에서는 대시보드, 계약서 리스트 화면 분할, 계약서 정보 조회, 계약서 리스트 목록 개수, 검색 기능 및 검색 바 위치에 대한 언급이 있었습니다. 이러한 UI 개선 사항들은 계약서를 관리하는 담당자의 경험을 개선하고 계약서 검색 및 조회를 보다 쉽게 할 수 있도록 돕는 것을 목표로 하였습니다. 비즈니스 로직 영역에서는 OCR 보정 페이지, 공통 모듈화, 권한 정책에 따른 처..
(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..

티스토리툴바