Orange

aaant, 2023.01~2023.06, 개발팀, Front-End Developer

• 전임상 시험 연구를 데이터로 기록하고, 문서로 편리하게 관리할 수 있는 서비스

문서 페이지 개발

• 문서 추가, 정보 조회, 목록 조회, 검색, 수정, 삭제 기능을 개발하여 FE 전문성 강화

RESTful한 API를 위해 FE에서 데이터를 처리

• 데이터 연동 기능을 맡아 react-query의 기능을 사용하여 비동기 처리
• 다양한 데이터의 형태를 통합하고 관리하는 것에 대한 도전 과정을 경험

디렉토리 구조: 재귀를 사용한 렌더링, Folder와 Item 컴포넌트 개발

• 검색 기능을 FE에서 구현하기 위해 전체 데이터 요청 후 원하는 형태로 변환 후 렌더링
• Folder와 Item 컴포넌트로 재귀를 활용해 디렉토리 구조를 구현하여 코드 품질을 개선

템플릿 기능 도입으로 중복 작업 최소화

• 문서 템플릿 생성, 템플릿을 문서로 사용, 문서를 템플릿으로 만들기 기능을 구현하여 문서 생성 시 입력된 데이터가 문서에 연동되도록 설계

카카오 전자서명 기능 통합

• 카카오 전자서명 기능 구현하여 사용자 편의성 향상
• 외부 API 연동을 통한 문서 확인 및 처리 경험으로 프론트엔드 역량 강화
• react-hook-form을 사용하여 form의 상태관리 코드 단순화 및 일관성 확보
• 리렌더링 횟수 감소와 성능적 향상을 위해 react-hook-form을 도입

사용 기술 및 개발 환경

• React, TypeScript, Recoil, react-query, vanilla-extract 환경에서 개발 진행