<aside> 💡 프로젝트 목표: 초등학교 3학년 AI 영어 교과서 개발

</aside>

프로젝트 개요

1) 구현하고자 했던 기능: 초등학교 3학년 교과서 책 내용을 Web으로 구현

• 교과서 총 본수: 2401본

2) 프로젝트 스펙:

• Package Manager: npm
• Tool: Vite
• Lib: React, Recoil, Styled-Components, Typescript
• Etc: Nx, gitLab

3) 구성원:

• PM: 1명
• 개발자(Front-End): 16명

4) 프로젝트 기간: 24.07 - 24.08

Keep(잘했던 것, 좋았던 것)

<aside> 😊 가장 잘했던 것

</aside>

• 전체 페이지 단원 아이콘 추가
  • History: 검수 과정에서 2048본의 페이지에 아이콘을 추가하는 요청이 발생
  • 해결방안: 공통 함수를 만들어서, VSCode Replace 기능을 이용해 기존 입력된 Props 일괄 수정
  • 기대효과: 5일의 작업수요 기간을 1일로 단축
• 녹음 기능 오류 발생 1
  • History: 개인정보 이슈로 공통 Recorder 컴포넌트의 수정 후 녹음 후 데이터 입력이 되지 않는 이슈 발생 → 개발쪽 문제로 인지하여 모든 녹음 관련 페이지의 코드 수정 수요 발생
  • 해결방안: 공통 컴포넌트의 변경 사항을 추적하여, 오류 발생 코드 수정요청 (MR요청)
  • 기대효과: 공통 컴포넌트 변경으로 개발 비용 제로
• 녹음 기능 오류 발생 2
  • History: 검수 과정에서 녹음 후 데이터는 입력되나 평가결과가 노출되지 않는 이슈 발생
  • 해결방안: 공통 컴포넌트의 변경 사항을 추적하여, 오류 발생 코드 수정요청 (MR요청)
  • 기대효과: 공통 컴포넌트 변경으로 개발 비용 제로

Problem(프로젝트 중 겪었던 어려움)

<aside> 🗣 가장 어려웠던 점

</aside>

• 스테이징 환경, Store 에러
  • History: 검수 환경에서 A 페이지에서 사용되는 Store 데이터가 B 페이지에서도 사용되어 페이지 초기 렌더링시 데이터 참조 오류 발생 원인: 검수환경을 제공하는 T업체에서 디버깅 환경을 제공하지 않아 정확한 원인을 파악불가
    • 예상되는 원인 1: 검수환경에서 사용되는 Iframe의 key값 미입력으로 인한 컴포넌트 언마운트 이슈
    • 예상되는 원인 2: 프로젝트 전반적으로 API통신에 사용되는 WebSocket의 disconnect 이슈 → 페이지 이동 시 Websocket이 connection 상태로 A 페이지의 API 통신이 B 페이지에서 실행

Try(Problem중에 해결된 사항 해결법, 해결 안 된 문제에 대한 피드백)