회고

통계자동화 솔루션 개발 회고

개요: 팀 ITO에서 사용하는 통계 조회, 엑셀 파일 제작 자동화를 수행하는 솔루션 개발 기한: 2023-01.01~ 2023-01.26 (1달) 맡은 역할: 프론트엔드 전체 개발 (프론트엔드 총 1명) 사용 기술: TypeScript, React, HTML, CSS 개발 개발 환경 설정 CRA를 사용해서 기본 개발 환경을 설정했다. 환경변수를 활용해서 .env.development , .env.production으로 분리하여 개발, 배포시 서버 URL 등을 선언하고 사용했다. 디자인 시스템 디자인 시스템으로 Ant-design 5.1.6을 선택해서 최신 버전 Chrome에서 개발을 진행했다. 어느정도 개발이 진행되고 사내망(크롬 버전이 70~80으로 매우 낮음)에서 번들된 파일을 배포해서 테스트했을 때..

3. 정리 - 사용자 매뉴얼 사이트

배운 점들 ㄱ. intersectionObserver의 활용 목차를 구현할 때 현재 사용자가 어떤 제목 영역을 보고 있는지를 intersectionObserver를 활용해 구현했다.무한 스크롤, 사용자 인터랙션 등 다양한 분야에서 활용되는 intersectionObserver의 활용 능력을 키웠다. ㄴ. 검색 로직 구현 각 매뉴얼들의 본문을 파싱하여 트리 형태로 저장, 이를 재귀형태로 탐색하여 일치하는 부분의 근처 단어들, 속한 제목 영역 정보 등을 다시 트리 형태로 저장, 보여주는 로직을 구현했다. 이는 현재 블로그, 공식 문서등 다양한 분야에서 사용되는 로직이기 때문에 추후에도 활용 빈도가 높을 것 같다. ㄷ. 정규식 활용 ㄴ. 과 이어지는 내용으로 검색을 위해 mdFile을 파싱할 때 정규식을 많이..

4. 정리 - 엑셀 공통 모듈

배운 점들 ㄱ. 공통 모듈 제작 경험 다른 개발자들을 위한 공통 모듈을 제작해 보면서 추상화 과정에서 고려할 것들이 많음을 배웠다. 각 분기에 대해 모두 if 문을 처리하면 간단하긴하지만 중복이 많고 유지 보수가 어렵다. 최대한 공통적으로 적용할 수 있도록 로직을 짜야 공통 모듈로서 의미가 있다고 생각한다. ㄴ. 재귀를 활용한 객체 핸들링 초기 모듈은 switch로 각 데이터 타입마다 처리하는 로직이 분리되어 있었다. 이를 필요 속성을 "a.b.c" 형태로 주고 이를 활용해 객체에서 가져오고자 하는 값을 가져오는 함수를 공통적으로 사용하게 해서 중복된 코드의 양을 많이 줄일 수 있었다. 아쉬운 점들 ㄱ. 많은 중복 최대한 공통적으로 처리하도록 했지만 유효성검사와 같은 로직들은 여전히 각 타입별로 중복되는..