본문 바로가기

분류 전체보기

 (133)
(상태 관리) createSlice, useDispatch로 상태관리 한번 더 최적화 앞선 프로젝트 회고에서 useState를 useReducer로 최적화하는 방법에 대하여 살펴보았습니다.  "회사 프로젝트 후기 - (5) useReducer로 상태관리 최적화" 회사 프로젝트 후기 - (5) useReducer로 상태관리 최적화5월부터 참여하고 있는 프로젝트는 S 보험사에 납품되는 C/S Application의 커스터마이징 작업을 수행하는 프로젝트입니다. 그러나 어제 대상포진 발생으로 인해 긴급 휴가를 내야 했습니다. 오늘은jobcoding.tistory.com앞선 글에서 언급된 방법은 몇 가지 문제점을 가지고 있습니다. 첫째로, 리듀서 함수와 액션 생성자 함수를 개별적으로 관리해야 합니다. 이는 코드를 여러 곳에 분산시켜 유지보수를 어렵게 만들 수 있습니다. 둘째로, 액션 함수를 사용할..
(상태 관리) 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 프로젝트였다는 점입니다. 다소의 주..
(sql) mariadb 외부 접속 허용 방법 Mariadb 외부 접속이 안되는 경우, 외부 접속을 하기 위해서 외부 접속 차단을 해제해야 한다. 다른 설정없이 1) 간단하게 외부 접속 허용하는 방법과 2) 특정 클라이언트 IP만 접속 허용하고 그외는 차단하는 방법이 있다. 터미널에서 root 외부접속 허용 방법 1. root 계정 접속 $ mariadb -u root -p 2. 외부 접속 허용 use mysql grant all privileges on *.* to 'root'@'%'identified by '비밀번호'; flush privileges; 3. exit
(sql) Incorrect string value: '\xBC\xAD\xBF\xEF\xBF\xAA' for column `seoulmetro`.`subway`.`sname` at row 1 node.js로 간단한 서버 구축하여서 mariaDB insert 작업을 하고 있다. insert 하는 데이터의 형태는 varchar 형태로 설정하였고 프론트와 백엔드를 연결하였다. insert request를 아무리 날려도 계속해서 log 창에 failure 만 뜨니 도대체 오류를 찾을 수 없었다. CMD 창으로 해당 테이블에 직접 insert를 해주었다. mysql에서 한글로 된 값을 입력할 시, 위와 같은 오류가 발생한다면 charset을 utf8로 변경해 주어야 한다. ALTER TABLE 테이블명 CONVERT TO CHARSET UTF

티스토리툴바