프로젝트 회고

콜센터 솔루션 OB 캠페인 기능 추가 회고

개요콜센터 운영, 관리 솔루션 (모니터링, 상담사 관리, 챗봇 관리 등)에 OB 캠페인 기능 추가OB 캠페인: 솔루션에서 전화번호 목록으로 고객에게 전화 걸어서 상담 진행 (상담사가 직접 전화 거는게 아닌 솔루션에서 자동으로 전화 걸고 상담사 or 봇 연결)서비스 주소: https://acencloud.kt-aicc.com/main/serviceInfo기간: 2023.9 ~ 2024.04인원사용자 포탈(고객사 전화번호 업로드, 캠페인 실행,관리) 5명콜인프라(전화 망) 4명PDS(전화 거는 솔루션) 3명상담AP(상담사 사용 상담 툴) 4명챗봇 2명QA 2명프로젝트 관리 2명(나 포함)내 역할: 프로젝트 관리내가 사용한 기술: Jira, Confluence, Gitlab, 사내 업무처리 포탈프로젝트 관리회..

API 플랫폼 개발 회고

개요 api 호출(Postman) + api 테스트(Jmeter) 할 수 있는 웹 앱 배포 주소: https://api-test-project.vercel.app/ 기간: 2023.3 ~ 2024.2 1년 내내 집중해서 한 것은 아니고 실제 개발 기간은 퇴근 후, 주말에 조금씩 해서 1~2달 정도 소요 인원: 프론트엔드 1명(나), 백엔드 1명 내 역할: 프론트엔드 전체 내가 사용한 기술: React 18, Framer-motion, emotion, Recoil, React Query, Chart.js 개발 실시간 대용량 데이터 처리 최적화 API 테스트(Jmeter)의 경우 자체 서버와 websocket으로 연결한 후에 최초 메시지로 테스트할 정보(사용자(쓰레드) 수, 호출 횟수 등)을 보내고 서버에서..

5. 정리 - 엑셀 편집기

배운 점들 ㄱ. 테스트 자동화 경험 github actions, RTL, jest, lint 등을 활용한 테스트 자동화, 추후 배포 자동화나 슬랙 알림 등 다양한 곳에 활용할 수 있다. ㄴ. 성능 최적화 경험 크롬의 lighthouse, performance를 활용한 성능 측정 / 코드 스플릿, 텍스트 압축을 통한 로딩 성능 최적화 ㄷ. emotion, recoil 활용 아쉬운 점들 ㄱ. 렌더링 성능 매우 저조 특정 셀 속성, 값 변경시 다른 셀과 도구상자도 렌더링 되는등 관련 성능이 매우 저조하다. memo를 잘 활용하고 상태관리 구조를 잘 짰으면 훨씬 좋은 성능이 나왔을 것 같다. ㄴ. 버그 매우 많음 리팩토링하면서 복사 기능이 날아가는 등, 버그가 매우 많아졌다... 꼼꼼한 테스트 코드가 있었으면 ..

4. 성능 측정, 최적화

성능 측정 크롬의 lighthouse를 활용해서 성능 측정을 했다. 매우 성능이 안 좋게 나왔다. Opportuity 탭을 살펴보니 js파일이 너무 커서 로딩이 오래 걸리는 것을 알 수 있었다. webpack-bundle-analyzer를 통해 번들 크기를 보니 번들이 1개이고 용량이 매우 컸다. 1. 로딩 성능 최적화 - 코드 스플릿 엑셀 에디터는 페이지가 1개이기 때문에 페이지 별로는 코드 스플릿을 할 수 없다. 따라서 컴포넌트별로 코드 스플릿을 했다. // 기존 import { Header } from '@/layout' // 변경 const Header = lazy(() => import('@/layout').then(({ Header }) => ({ default: Header, })) ) dy..

3. 테스트 자동화

Github Actions와 RTL, Jest로 만든 테스트코드를 이용해서 테스트 자동화를 해봤다. 테스트 코드 각 컴포넌트, 기능(features 디렉토리) 별로 테스트 코드를 작성했다. RTL의 user-event를 활용해서 사용자 행동기반 테스트코드를 만들었다. /// Functionbar.test.tsx describe('', () => { test('선택셀 좌표 input 렌더링한다.', () => { render() const coordInput = screen.getByTestId('coordInput') expect(coordInput).toBeInTheDocument() }) test('선택셀 좌표 input default값인 "A1"이 담겨있다', () => { render() cons..

2. 개발 시 어려웠던 점들

시트별 상태관리 어려웠던 점 처음에는 여러 개의 시트를 고려하지 않고 시트가 1개인 엑셀 에디터를 제작했다. 초기 상태는 다음과 같다. cells(표 각 cell의 정보), historyInfo(작업 내역 스택), selectedArea(드래그한 cell영역), selectedCell(클릭하여 선택한 cell), copiedArea(복사한 영역) 해당 상태들을 context에 담아서 하위 컴포넌트에서 사용했다. 엑셀 에디터를 시트가 여러 개인 형태로 변경하면서 최대한 기존 구조를 유지하면서 시트 여러개 활용(ms excel처럼)하도록 변경하는 것이 어려웠다. 해결 각 시트별로 해당 상태를 저장해야 했는데, 최대한 기본 구조 수정을 하지 않으면서 변경하기 위해서 context위에 recoil을 뒀다. re..

1. 개요, 기본 구조

1. 개요 이전 통계 자동화 페이지에서 통계 엑셀 파일 미리보기 기능을 개발했었다. 토이 프로젝트로 해당 기능을 좀 더 발전시켜서 엑셀 파일을 웹에서 편집할 수 있는 에디터를 제작해봤다. 2. 구조 type 관리 공통적으로 사용하는 type들은 루트 디렉토리의 types 디렉토리의 editor.d.ts에서 관리했다. // editor.d.ts declare module 'editor' { export interface IFile {/* 생략.. */} export interface ISheet {/* 생략.. */} /// 생략.. } 각 컴포넌트의 prop, return등의 타입 정보는 해당 컴포넌트 소스코드에서 관리했다. // ToggleButton.tsx interface ToggleButtonPr..

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

개요: 팀 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으로 매우 낮음)에서 번들된 파일을 배포해서 테스트했을 때..