Home

🛠️ 리팩토링 Wiki

이 페이지는 프로젝트의 CS 리팩토링과 AI 기능 추가를 위한 과정을 상세히 정리하기 위한 Wiki입니다.

초기 버전의 Github 레포지토리와 Wiki는 해당 링크를 참고해 주세요

🧓 권나연

프로젝트 완성도 높이면서 부족한 CS 학습

Why?:

• 품질 개선: 리액트 렌더링 최적화
• 사용성 개선: 다국어 적용 + 코치마크 개선 (수치화 - 휴리스틱 알아보기)

🤵 이영재

코드 품질 향상, 기존 기능 개선하기, 프로젝트 완성도 높이기

Why?: 지난 그룹 프로젝트 기간동안 구현한 기능에 성능 최적화를 하여 완성도를 높히고, 또한 Suspense와 같은 React의 기능들을 사용해보고 싶었습니다.

• 코드 분리가 안된 부분 분리하기 (코드 품질 향상)
• tanstack query suspense 기능 써보기 (useSuspenseQuery 등등)
• 스토리북 api 연동하기
• 기존 무한스크롤 대신 virtual scroll 적용하기

🧑‍🦲 이유진

사용자의 사용성 개선 + 사용성 개선을 위한 성능 개선

Why?:

• 워크스페이스 저장 편리하게(socket)(사용성 개선 + 수치화 o + CS 공부용)
• 창 사이즈 조절(드래그 앤 드롭 + 탭 컴포넌트 접었다가 피기)(사용성 개선 + 수치화 x(naver 애널리틱스는 뭐노)… + 상태 관리 공부용 + 플러그인 공부용)
• 썸네일 이미지 저장 최적화(성능 개선 + 수치화o + iframe이랑 렌더링 + 수치화 도구 공부용)

🙍 최경일

“수치화” + “남이 봤을때 이해하기 좋은 코드”

Why?: 두루뭉술하게 개선했다고 말하는 대신, 정확한 데이터를 기반으로 성능을 개선하는 프론트엔드 개발자의 습관을 갖고 싶었습니다. 또한, 기능 구현에만 치중하다 보니 시간이 지나 내가 쓴 코드조차 이해하기 어려울 것 같다는 생각이 들었습니다. 이를 개선하여 협업 효율과 코드의 유지보수성을 높이는 작업을 직접 경험하고자 했습니다.

• 구글 애널리틱스 등록으로 유입률 수치화
• HTTP/1.1 -> 2.0 -> 3.0 개선
• 코드 하이라이팅 코드 품질 개선
• Blockly 커스터마이징 플러그인화

🧜 홍현지

빌드 및 배포 속도 개선, 라이브러리 커스터마이징을 개선하여 개발 효율성 높이기

Why?: 그룹프로젝트 기간동안 아쉬웠다고 생각하는 작업들 중 수치화 시켜 성능개선을 명시적으로 보일 수 있는 작업을 선택하고자 했었기에 docker 이미지 최적화와 cicd 속도 개선을 골랐습니다. 그리고 블록 커스터마이징 작업 중 하드코딩을 하거나 몽키패칭인 부분들을 개선하여 blockly의 다른 블록들처럼 어떤 옵션을 추가하던 자연스럽게 블록을 만들어서 사용할 수 있도록 코드를 개선하여 작업자 관점으로서 개발 효율성과 편의성을 높이고 싶어 라이브러리 커스터마이징 개선 작업을 선택했습니다.

• cicd 속도 개선
• 도커이미지 최적화
• 블록 커스터마이징 수정