FF 회고

데브코스 프론트엔드 루카스팀 중간프로젝트 회고입니다. 간단한 프로젝트 소개와 느낀점을 남기려고합니다.

Fahsion-Feedback 깃허브

Fashion-Feedback 배포링크

Fashion Feedback

프로젝트의 목표는 패션 피드백이였습니다.

중간 프로젝트의 주제가 SNS 기능으로 제시 되어서 여러가지 아이디어를 고민하다가 결정했습니다. 데이트를 하기전이나 면접을 보러간다던지 혹은 경조사에 참여할 상황이 있다면 자신의 복장에 대한 고민은 누구나 하게 됩니다. 이런 고민이 있을 때 사진과 내용을 공유해서 다른 사람들의 의견을 듣고 피드백을 받는게 목적이였습니다. 해당 서비스로 CRUD나 SNS의 좋아요 댓글 등 여러가지 기능도 적절하게 사용할 수 있다고 판단되어 선정을 하게 됐습니다.

기간은 22.06.06 ~ 22.06.22 17일 동안 4명이서 진행했고 모든 기능은 다 구현은 못했지만 80%이상은 구현을 하고 마무리했습니다.

웹개발을 시작하면서 처음으로 여러명이서 같이 진행한 프로젝트였기 때문에 기대도 많이 했었고 기대 이상으로 좋은 경험을 한 것 같습니다. 반면에 처음이였기에 어려움을 느낀 상황도 많았습니다. 좋은점과 어려움점은 다음 목차에서 적도록 하겠습니다.

좋았던 것

함께 개발하기

항상 혼자만 개발하다가 같은 프로젝트를 함께 개발하게 되니 좋았습니다.
그러기 위해서는 적절하게 일을 배분해야 했는데 공통컴포넌트 -> 페이지 순으로 진행하고 각자 할당량을 분배해서 개발을 해나갔습니다.
개인적으로 일정을 못맞추어 담당했던 알람 페이지를 구현 못했는데 여유가 되신 창헌님이 도와주셔서 감사함도 느꼈습니다.

figma 사용

말로만 듣던 figma를 처음 써봤습니다.
잘 사용한 것을 떠나 왜 많은 사람들이 사용하는지를 직접 알게 됐습니다.

깃헙 이슈 단위 관리

깃헙 이슈로 개발할 내용을 적고 해당 이슈번호로 커밋과 PR을 작성하는 식으로 관리 했습니다.
이런 방식으로 개발을 진행해본적이 없어서 신기했습니다. 현재 등록된 이슈들로 내가 구현해야할 목표화 팀원들이 어떤 개발을 진행하고 있는지를 알 수 가 있었습니다. 또한 깃헙 project와도 연동을 자동화 해서 칸반보드로도 확인할 수가 있었습니다. 그렇지만 저는 칸반보드는 거의 안봤던 것 같습니다. ㅠㅠ

브랜치 전략

브랜치 전략을 사용해 볼 수 있었습니다.
main 브랜치는 배포용, dev 브랜치는 병합용, 그외 브랜치는 label/[#이슈번호]-descript 형식으로 생성하여 구현이 완료되면 PR후 dev에 머지했습니다.
머지할 떄는 리베이스 머지로 진행했습니다. 사실 dev로 머지할 때는 스쿼시 머지를 진행을 했어야 했는데 이해 부족으로 리베이스 머지로 다 진행하게 됐었습니다.

어려웠던 것

기술적 문제

새롭게 사용하는 기술들이 있어 개발하는데 어려움이 있었습니다.
특히 리액트 렌더링 시점과 원리에 대한 이해가 부족했던 것 같습니다. 보통 렌더링할 때 조건이 있으면 early return 느낌으로 if문을 통해 렌더링 할 생각을 하게 됐었는데 리액트 컴포넌트는 하나의 return문에서 렌더링이 필요한 구조였습니다. 이런 생각을 전환하고 받아들이는데 개인적인 비용이 발생했습니다, 이 외에도 react-query를 도입했지만 잘 활용한 느낌은 들지 않았습니다.

공통 컴포넌트의 추상화

여러 곳에 사용하는 공통 컴포넌트들을 정해서 가장 먼저 개발을 시작했었습니다.
그런데 막상 사용하려고 보니 번거러운 점도 있었습니다.
먼저 사용하는 방법이 조금씩 달랐기 때문에 숙지를 해야 원하는 대로 활용할 수 가 있었습니다.
두번째로 wrapper로 감싸준 컴포넌트라면 원하는 곳에 값을 전달하거나 읽을 수가 없으면 해당 부분에 관한 처리가 필요했습니다.
반면에 추상화를 많이한 컴포넌트는 실제 저의 프로젝트에서는 사용하지 않는 항목들도 고려해서 개발을 해놨기 떄문에 오히려 낭비가 되는 부분도 있었습니다.
특히 저는 이미지 업로드 컴포넌트를 개발했었는데 적절하게 만들어 놓지 못해 사용할 때 애를 좀 먹었습니다.

airbnb 린트

많은 곳에서 화를 내는 린트.
그래도 최대한 지키려고 노력했고 몇가지 상황에서를 룰을 제외했습니다. (props spreading, function component 정의 방법, default prop 등)

아쉬웠던 것

코드 리뷰 없음

서로간의 코드리뷰를 거의 안(못)했습니다.
시작할 때 여유가 안될 것 같아 코드리뷰가 필요할 때 요청을 하기로 정하고 개발을 진행했습니다.
그래서 PR을 올리고 머지할 때는 따로 코드리뷰를 받지 않고 스스로 판단해서 머지하는 식으로 했습니다.
기간 내에 완성하는데에는 적절했지만 코드 품질을 올리지 못하고 다른 팀원들의 코드를 이해하는데는 부족했던 것 같습니다.
물론 PR말고 어려운 점 있으면 디스코드에서 실시간으로 화면공유를 통해 해결했지만 기존 과제처럼 서로의 코드를 리뷰 못한 점은 아쉬운 것 같습니다.
그래도 아쉬운거지 기간내의 결과물을 생각한다면 저희 팀에게는 적절했떤 방법이라는 생각도 듭니다.

컨벤션

기본적인 컨벤션은 정했습니다.
lint와 prettier 포맷을 세팅을 하고 파일명, 변수명, 함수명 등 여러가지 컨벤션을 정했습니다.
하지만 개발을 시작해보니 세세하게 정해줘야할 것들을 느꼈습니다.
예를 들어 if문이 한줄일 때 블록을 쓸지 말지, 코드 사이의 엔터를 넣어줄지 말지 같은 스타일은 사람마다 달랐기 때문에 코드를 보면 통일성이 떨어져 보였습니다.
너무 세세한 설정일 수 있겠지만 이런 것도 미리 합의해 두면 조금 더 일관적인 코드를 갖는 프로젝트가 되지 않을까 라는 생각이 들었습니다.

일정관리

일정관리가 쉽지 않았습니다.
거의 10개의 팀중에서 유일하게 팀장이 돌아가면서 하는 팀이 우리였습니다.
기획단계 초기에서 규모를 생각해봤을 때 굳이 팀장이 필요할까라는 생각읻 들었고 기존 그대로 돌아가면서 하기로 했습니다.
팀장이 고정이 아니어도 다 같이 진행하는 일이기 때문에 괜찮다고 생각했습니다.
하지만 전체적인 진행상황을 꾸준히 살펴보고 일정을 조율해야하는 사람이 필요했지만 팀에서는 서로 대화를 하면서 오늘은 이런식으로 개발하자 하며 프로젝트를 진행했습니다.
결국에는 마감이 얼마 안남았을 때 진도가 많이 느리단걸 느꼈고 그 때부터는 더 급박하게 개발을 진행했었던 것 같습니다.
미리 공수를 계산하고 조율을 햇었더라면 조금더 여유있게 했을거라는 생각이 들었고 집중적으로 스케줄링을 해줄 사람이 필요하다는 생각도 들었습니다.

개선할 것

렌더링 최적화

로직대로 필요한 사항을 그려주고 있지만 마음껏, 계속 그려주고 있습니다.
시연영상에서 스크롤 내릴 때 버벅이는 것을 보고 가슴이 아팠습니다.
정확한 원인은 파악은 아직 안했지만 꼭 개선해야할 사항입니다.

TS 도입

TS 적용해보고 싶습니다.
프로젝트 진행시 api 요청을 했을 때 잘못된 타입이 들어가면 서버가 죽어버리는 불상사가 발생했었습니다. 만약에 타입스크립트 였다면 이런 일은 막을 수 있었을 텐데라는 생각이 들었습니다.
프로젝트 끝나고 TS에 대한 강의도 있었기 때문에 적용하면 좋을 것 같습니다.

테스트 코드

기획 단계시는 테스트 코드를 작성하기로 했습니다.
TS, 테스트 코드 둘다 해보기에는 힘들 것 같아서 둘 중에 선택했었던 것이 테스트 코드.
심지어 다 작성하기는 힘들고 컴포넌트에 적용하고 테스트하기 힘드니 유틸 함수 같은 곳에 작성해보라는 멘토님의 조언을 받아들였습니다.
하지만 개발시 여력이 안되 못했습니다.
유틸 함수가 JSON 파싱하는 함수 하나가 있는데 먼저 적용해보고 남은 곳에도 적용할 있으면 좋을 것 같습니다.

서버 구현

이건 조금 더 개인적인 목표입니다.
현재 api가 프로그래머스 측에서 제공하고 있습니다. 그래서 수료후 3개월 이후 정도면 지원이 안되는 것으로 알고 있습니다.
그 이후로 사용못한다면 슬플 것 같아 해당 서버를 구현해 놓고 연동시켜 놓으면 만료기간(?)과 상관없이 계속 사용할 수 있을 것 같습니다.
나름 우선순위가 높다고 생각하는데 그래서 시도는 해볼 생각입니다

마무리

사실 시작하기전에는 더 많은 것을 기대를 했었습니다.

인터넷에서 다른 사람들이 진행했었던 프로젝트들을 보면서 나도 저렇게 꾸며봐야지, 문서화 해봐야지, TDD 해보자 등 여러 생각들을 햇었습니다. 하지만 막상 시작해보니 개발하는데 급급하고 정신없이 했었던 것 같습니다. 심지어 개발속도도 느린편이여서 맡은 일도 다 끝내지 못한 아쉬움도 있었습니다. 하지만 이번 프로젝트를 통해 나의 부족한 능력이 어떤 것들인지 더 잘 알게 됐고 팀 프로젝트시 필요한 항목이 어떤 것들이 있는지 직접 느낄 수 있었습니다.

약 3주간 함께 고생해준 팀원들에게 감사함을 표하고 앞으로도 FashionFeedback은 꾸준히 리팩토링할 생각입니다.