프로젝트 회고

개요AI 개발을 위한 플랫폼으로, RAG와 프롬프트 엔지니어링, llmops 기능 등을 제공하여 사용자가 AI 솔루션을 쉽게 구축하고 배포할 수 있도록 하는 앱기간: 2024.5 ~ 2024.12 (진행 중)인원: 프론트엔드 1명(나), 백엔드 2명, RAG 모듈 1명, PM 겸 기획자 1명, 디자이너 1명, 영업 1명내 역할: 프론트엔드 전체내가 사용한 기술:모노레포 - turborepo, pnpmSSR, SSG, CSR - Next.js 14 앱 라우터디자인 시스템, 스타일링 라이브러리 - shadcn/ui, tailwind상태 관리 - react query, zustand타입 안전성 - typescript폼 관리 - react hook form, zod테스트 - rtl, Jest개발모노레포 구축처음..

개요콜센터 운영, 관리 솔루션 (모니터링, 상담사 관리, 챗봇 관리 등)에 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 호출(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으로 연결한 후에 최초 메시지로 테스트할 정보(사용자(쓰레드) 수, 호출 횟수 등)을 보내고 서버에서..

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

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

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..

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

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..