-
Notifications
You must be signed in to change notification settings - Fork 0
Home
이 페이지는 프로젝트의 CS 리팩토링과 AI 기능 추가를 위한 과정을 상세히 정리하기 위한 Wiki입니다.
초기 버전의 Github 레포지토리와 Wiki는 해당 링크를 참고해 주세요
프로젝트 완성도 높이면서 부족한 CS 학습
Why?: 이전 개발 과정에서 기능 구현에 치중하여 성능 최적화나 확장성에 대한 고민이 부족했던 점이 아쉬웠습니다. 서비스가 커질수록 성능 저하나 유지보수의 어려움이 발생할 가능성이 크기에, 이를 개선하며 안정적이고 효율적인 코드 작성 습관을 기르고자 합니다. 또한 Blockly 커뮤니티에 서비스 공유 및 글로벌 사용자들의 접근성을 높이고자 다국어 적용 및 사용자 가이드 개선을 진행하고자 합니다.
- 품질 개선: 리액트 렌더링 최적화
- 사용성 개선: 다국어 적용 + 코치마크 개선 (수치화 - 휴리스틱 알아보기)
코드 품질 향상, 기존 기능 개선하기, 프로젝트 완성도 높이기
Why?: 지난 그룹 프로젝트 기간동안 구현한 기능에 성능 최적화를 하여 완성도를 높히고, 또한 Suspense와 같은 React의 기능들을 사용해보고 싶었습니다.
- 코드 분리가 안된 부분 분리하기 (코드 품질 향상)
- tanstack query suspense 기능 써보기 (useSuspenseQuery 등등)
- 스토리북 api 연동하기
- 기존 무한스크롤 대신 virtual scroll 적용하기
사용자의 사용성 개선 + 사용성 개선을 위한 성능 개선
Why?: 프론트엔드와 관련이 깊은 CS를 깊이 공부하고 싶어 네트워크나 운영체제 쪽을 깊게 공부하고 싶었습니다. 그래서 관련 주제로 리팩토링을 진행하고 싶었습니다.
- 워크스페이스 저장 편리하게(socket)(사용성 개선 + 수치화 o + CS 공부용)
- 창 사이즈 조절(드래그 앤 드롭 + 탭 컴포넌트 접었다가 피기)(사용성 개선 + 수치화 x(naver 애널리틱스는 뭐노)… + 상태 관리 공부용 + 플러그인 공부용)
- 썸네일 이미지 저장 최적화(성능 개선 + 수치화o + iframe이랑 렌더링 + 수치화 도구 공부용)
“수치화” + “남이 봤을때 이해하기 좋은 코드”
Why?: 두루뭉술하게 개선했다고 말하는 대신, 정확한 데이터를 기반으로 성능을 개선하는 프론트엔드 개발자의 습관을 갖고 싶었습니다. 또한, 기능 구현에만 치중하다 보니 시간이 지나 내가 쓴 코드조차 이해하기 어려울 것 같다는 생각이 들었습니다. 이를 개선하여 협업 효율과 코드의 유지보수성을 높이는 작업을 직접 경험하고자 했습니다.
- 구글 애널리틱스 등록으로 유입률 수치화
- HTTP/1.1 -> 2.0 -> 3.0 개선
- 코드 하이라이팅 코드 품질 개선
- Blockly 커스터마이징 플러그인화
빌드 및 배포 속도 개선, 라이브러리 커스터마이징을 개선하여 개발 효율성 높이기
Why?: 그룹프로젝트 기간동안 아쉬웠다고 생각하는 작업들 중 수치화 시켜 성능개선을 명시적으로 보일 수 있는 작업을 선택하고자 했었기에 docker 이미지 최적화와 cicd 속도 개선을 골랐습니다. 그리고 블록 커스터마이징 작업 중 하드코딩을 하거나 몽키패칭인 부분들을 개선하여 blockly의 다른 블록들처럼 어떤 옵션을 추가하던 자연스럽게 블록을 만들어서 사용할 수 있도록 코드를 개선하여 작업자 관점으로서 개발 효율성과 편의성을 높이고 싶어 라이브러리 커스터마이징 개선 작업을 선택했습니다.
- cicd 속도 개선
- 도커이미지 최적화
- 블록 커스터마이징 수정