저번주 수요일부터 열심히 개발하고 있는 부트캠프 후기를 남겨보려합니다.
짧은 기간내에 동시로 개발하는 프로젝트라 컨벤션과 문서화가 중요하다고 생각했습니다. esLint prettier의 도움을 받아 코드를 일관성있게 포맷팅하고 있으나
DOM 조작을 다양하게 하고, 중복되는 코드가 많이 보이는 문제가 있습니다.
각자 페이지를 개발하면서 필요하면 컴포넌트를 만들고 공유하자 했으나 이 부분이 잘 공유되지 않았고 마음이 급해서 그런지 남의 코드를 그대로 갔다 쓰면서 컴포넌트화 제안은 안하는... 사태가 발생했습니다.
팀원이 5명이라 수월하겠지 생각했는데 피그마 작성 때부터 한 분이 아무것도 참여하지 않아서 ㅎㅎ
언젠가 이런 일도 생길 것이라 예상은 했지만 한 명 빠진 게 타격이 좀 있었습니다 ㅜㅠㅜ
그래도 부트캠프 시간동안은 꼭 자리에 앉아서 이상한 부분이 있으면 바로 질문하고 답하는 식으로 진행했습니다. 계획은 월,수,금만 데일리 스크럼을 하려했는데 1주 조금 넘는 기간동안은 이 방법이 더 알맞아 보였습니다. PR을 올리고 다른 사람의 허락을 받고 코드를 머지하는 습관도 좋았습니다.
하지만 이 과정에서 마음이 약한 저는 리팩토링을 더 적극적으로 제안하지 못했습니다... 이 점도 아쉬움으로 남네요
지금은 firebase의 Realtime Database 를 사용해 서버를 연동하고 있습니다.
관리자 페이지쪽 CRUD가 많은 편이라 그쪽에서 여러 번 데이터를 날렸지만ㅎ 특정 시점으로 복구가 가능해서 다행이더라구요
중간에 현직자에게 멘토링을 받으며 싱글톤 패턴 도입, 이미지 최적화에 대한 팁을 얻었는데요.
기존에는 이미지 포맷을 바꾸거나 크기를 줄여 파일 사이즈 자체를 줄이는 방법을 사용했는데
이미지 스프라이트 기법(여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법)과 Intersection Observer를 이용한 lazy-loading 기법(특정 위치에 도달했을때 이미지를 로딩)에 대해 알게 됐습니다!
저희 프로젝트는 공지 목록, 직원 목록 등에서 이미지 부하가 발생하는 편이라 무한 스크롤을 구현하며 동시에 이미지 lazy-loading을 구현해보려합니다.
그리고 로컬 스토리지를 사용해 사용자의 user_id 저장하고 그 값으로 각 컴포넌트에서 api를 사용해 사용자의 부재 데이터, 출결 데이터를 불러왔는데요. 이걸 다른 파일로 분리해 컴포넌트에서는 인스턴스를 생성하고 데이터를 사용하려고 합니다.
발표를 준비하며 다른 분들의 KPT 회고를 수집했는데 다들 저와 비슷한 생각을 하고 있었습니다.
- 중복 코드를 줄이고 최대한 공통 컴포넌트를 통해 재사용하기
- 컨벤션을 사전에 정의했지만 일관성이 떨어지는 부분 수정하기
- 컴포넌트 설계 시 재사용성과 확장성 우선 고려하기
- 성능 최적화를 위한 데이터 캐싱 전략 도입
- 사용자 경험 향상을 위한 피드백 시스템 구축
이 부분을 모든 팀원이 고려하고 있습니다. 발표가 끝나고 추가 피드백을 수집해 리팩토링도 열심히 해보겠습니다!!
