1. 리액트 마무리
엄밀히 한달을 따지자면 첫주는 리액트 과제 마무리+코드리뷰+반영 기간과 백엔드 찍먹이 있었다.
첫주 중 4일간의 기록은 WIL에서~
2. 팀 프로젝트 "모모"
4개월차 MIL 주 내용은 팀 프로젝트 회고가 되겠다.
한달동안 지정된 서버 API를 이용한 소셜 네트워크 서비스 개발 프로젝트를 마쳤다.
일단 자랑하는 내새꾸 모모 - 바로가기
"모두의 모임" 모모는, 누구나 쉽게 모임을 만들고, 참여할 수 있도록 도와주는 모임 일정 관리 서비스 이다!
2-1. 기획
프로젝트 기간 전부터 프로젝트에 고민이 많아지면서, 아이디어를 먼저 모아두자고 제안했다.
며칠동안 모으면서 여러 아이디어가 모였는데, 이미 비슷한 서비스가 존재하는 것, 지정API의 한계로 어려운 것 등등 아쉬움이 조금씩 남아서 회의가 길어졌다... 그러던 중 캘린더에 일정 표시 + 모임관리를 합친 서비스면 당장 우리도 필요하겠다는 생각이 들어서 이야기했고 하나 둘씩 살이 붙어가면서 기획으로 확정 땅땅
그리구 한일
0. 노션 페이지 세팅
1. 와이어프레임 만들기
2. 유저스토리 작성
3. 최종 UI 구상하기
4. 개발 TASKS 정리하기
회고 ☃︎
이해의 간극은 발생한다
같은 기획을 하고 있어도 사소한 부분에서의 이해의 차이는 없을 수 없다. 모두 내 의견을 100% 이해했고 나와 똑같이 생각중 일거라고 착각하면 안된다. 중간에 의문을 가지고 이 차이를 발견하고 바로 잡아서 다행인거고, 서로 평행선 마냥 계속 다른 생각을 이어나갔다면 아찔..
역할의 중요성
나는 팀장을 맡게 되었는데, 그 외엔 어떤 뚜렷한 역할 배정이나 분담이 없었다. 개발 외적으로도 나눠서 해야 할 일은 많아서 팀원들에게 각자의 역할을 주었다. 이게 굉장히 좋은 영향을 주었다고 느꼈다. 특히 참여도 부분에서 많은 차이를 보여주셔서 너무 좋았다!
디자인은 어려워
어떤 UI구상이 효과적일까, 유저 경험에 어떤게 좋을까?는 정답을 내릴 수 없었다. 레퍼런스도 찾아보고 서로서로 의견을 던지며 최선을 다했지만 최최고의 디자인인지는 의문이다.. 디자인 자체까지 잘하는건,, 어렵다
2-2. 개발 세팅
- 개발 컨벤션 정하기
협업이니까 eslint, prettier 같은 코드 스타일 규칙과 깃허브 커밋과 브랜치 등 커밋 컨벤션을 정했다.- 코드 스타일 컨벤션
이렇게까지 맞춰놓고 프로젝트를 한 적이 없어서, 번잡하게 느껴지기도 했는데 이후에 사용하면서 필요성과 중요성을 십분 느낄 수 있었다. 선언과 네이밍 등이 규칙 없이 생기면 다른 사람은 이해하는데에 어려움이 생기고 이게 결국 개발자 경험이라고 생각했다. 물론, 엄하게 정해놓은 규칙 때문에 개발하면서 골치아파진 경우도 많았지만 중간에 바꾸진 않았다! 그만큼 정확하고 올바르게 고쳐가는 과정이라고 여겼다. - 깃허브 컨벤션
커밋명, 브랜치 전략, PR 규칙, Merge 규칙
- 코드 스타일 컨벤션
- 기술 스택
확정인 리액트와 타입스크립트 외에 사용할 기술들을 정해보았다. 단연 상태관리 라이브러리 선택이 제일 고민이 되었다. 이번 프로젝트 규모나 러닝 커브를 생각하면 다른 기술도 많았지만, 한번쯤 열심히 배워서 프로젝트에 써보고 싶었던 리덕스툴킷에 욕심이 있었다. 다행히 팀원들도 비슷한 생각을 하여 채택하게 되었다.
컴포넌트 구현시에 스토리북을 활용했는데, 테스트나 그때 그때 수정에 있어서 굉장히 편리했다! 추천!
그 외에도 선정하는 기술 스택에 대해 선정하고 싶은 이유와 필요성을 같이 이야기했다.
회고 ☃︎
깃허브 컨벤션 중 issue에 대해서는 제대로 활용하지 못한 것 같다. 깃허브 프로젝트도 써보고 싶었는데 처음부터 이용하던 노션에서 옮겨가게 되질 않았다. 그리구 위키나 마일스톤 등 깃허브에 있는 써보지 못한 기능들을 여전히 써보지 못한 것도 아쉬움으로 남는다. 뚜렷한 사용 이유를 가지고 있지 않아서 적극적으로 사용하지 않게 되었는데, 써보면서 느껴보고 싶기도 하다.
이슈와 PR 템플릿이 있었는데, 안에 내용을 성실하게 적지 못했던 점을 반성한다. 변경사항이나 PR 포인트를 구두로 설명하고 나서 PR을 하기도 해서 생략하는 경우가 많았는데, 그 때만을 위한 건 아니니까 꼼꼼히 적어뒀어야 했는데!
2-3. 스프린트
sprint1 - common components
프로젝트 내에서 공통으로 쓰일 컴포넌트들을 설정해서 미리 개발해두었다.
모임카드, 버튼, input, profile, icon, tag, comment, header, tooltip, spinner 정도?
스타일링에 혼란이 없기 위해서 디자인시스템도 만들어 두었다.
그럼에도 불구하고 실제 화면에 붙이면서 변경사항은 정말 많았다. 그래서 컴포넌트 개발 시기에 너무 핏하게 개발할 필요가 없다고 느꼈다. props도 조금 더 유연함을 주어야 하고 스타일도 마찬가지였다. 다음 프로젝트에서도 컴포넌트 개발을 하게 된다면 이 확장성을 더 많이 고려해봐야 겠다.
sprint2 - UI
앞서 만든 컴포넌트를 활용해서 실제 화면을 구현하기 시작했다. 크게 MainPage, DetailPage-본문, DetailPage-타임테이블, MyPage로 나누어 분담했다. 각자 만든 컴포넌트가 주로 쓰일 페이지를 담당하게 되어서, 나는 메인페이지를 맡았다. 구현 내용은
- 유저 목록 및 유저 검색
- 모임 검색
- 날짜 미정 모임 목록
- 날짜 확정 모임 목록
- 페이지네이션
정도가 되었다.
그리고 api 연결에 앞서 customAxiosInstance와 요청 함수를 만들었다.
이 기간 후반분에 중간점검이 있어서, 기획서 정리와 발표 영상까지 제작했다.
sprint3 - fetching
마감까지 1주일 정도 시간이 남았고, 그에 비해 완성이 더뎌서 걱정이 많았다. 아직 각자의 UI단에서 수정 보완이 이뤄지고 있는 상황이었어서 develop 브랜치에 합쳐놓은 결과물이 없어서 그렇게 생각될 수 밖에 없었다. 진행 상황 확인과 일정 조율이 필요하다고 느껴서 오프라인으로 한번 만났고, 같이 모여서 각자의 이슈 확인하고 해결하고 develop에 1차적으로 합쳤다. 미리 해둔 리덕스 세팅을 이 브랜치에 연결하고 라우트 연결 설정까지 할 수 있었다. 다시 각자의 브랜치에서 빌드업하기로 하였다.
내가 한일은
- 리덕스 세팅하기
- 요청 함수 수정
- MainPage에서 필요한 리덕스 저장 및 api 요청 완료
sprint4 - issue shooting
이번 스프린트는 아주 짧게 주말 이틀로 두었었다. 크고 작은 이슈들을 찾아내서 노션에 적어두고 각자 진행하고 있는 일에 이름을 붙이면서 작업 상황을 고려했다. 열심히 보완하는 것 만큼 새로운 이슈들이 퐁퐁 터져서 끝이 없더라 ㅎㅎㅎ,,
주말 전 금요일까지 이 작업을 다 끝내고 배포까지 올리는것이 목표였는데 마음만큼 쉽지 않았다.. 각자의 진행 속도도 다르고 태스크도 다르다 보니 기다려야 하는 시간도 많아서 불안하기도 했다.
sprint5 - imployment
배포까지도 많은 여정을 거쳤다 ㅎㅎ..
수정이 끝난 팀원과 일단 배포확인을 위해서 지금까지의 코드를 가지고 배포를 올려보았고 여기서 나는 이슈들을 해결했다. 우선 스토리북에서 이슈가 많이 일어나고 배포 코드에서 필요가 없다고 느껴서 이를 삭제하고 그 외에 타입스크립트 이슈들을 해결했다.
최종 개발 브랜치가develop인데 배포를 위해서 위와 같이 수정사항을 둔 브랜치를 release-develop으로 두었고 실제 배포 서버에 연결할 브랜치를 release로 두었다. 배포 이후부터 개발 수정은 develop이 아닌 release-develop으로 하기로 하였고, 버전 업 정도의 수정 반영이 되고 나면 release로 옮기기로 하였다.
vercel로 배포를 진행하였는데, 브랜치 fork, fork-sync, 배포하는 과정을 헤딩해가면서 제대로 배운 것 같다 ...ㅎ
기간에 더 여유를 두고 사용자 QA를 진행하고 싶었는데 하지 못했다. 마감시간 4시간을 남겨두고 재녹음을 하는 등 개발 외적으로도 준비할 것이 많다 보니 완성 후엔 이슈 찾기나 코드 수정을 멈춰두고 진행했다.
2-4. 개발
useEffect(() =>{
이슈();
수정();
, [개발, 리뷰, 머지])도르마무 도르마무
3. 회고
프로젝트 전반에 대해서 회고 겸 후기를 정리해보려고 한다.
🥰 좋았던 것
- 야간 코어타임 aka야근등대
팀원들과 팀회고를 할 때에도 가장 좋았던 것으로 꼽혔다. 처음 제안할 때에는, 밤에도 어느정도 개발에 강제적으로 시간을 할애하자, 그때 소통에 제약이 없도록 디코에서 같이 모이자 는 목적이었다. 목적은 1000% 이룬 것 같고 효과이자 시너지가 좋았던 것 같다. 다음 팀에서도 제안해볼 것 같은데, 다들 긍정적으로 생각해주셨으면 좋겠다 ㅎ - 컨벤션에 맞춰서 개발하기
혼자 프론트를 맡은 프로젝트를 주로 해보아서 컨벤션 설정이나 브랜치 등 협업 방식에 익숙하지 않았는데, 이번 프로젝트를 통해 경험을 쌓은 것 같다. - 다른 사람들의 코드를 많이 볼 수 있었다.
코드리뷰 요청이 아니더라도 PR이 올라올 때마다 이 수정사항 반영을 위해 어떻게 코드를 고쳤는지 확인해보면서 내 코드에서의 문제점도 상기되었고 새로운 풀이 방식도 배울 수 있었다.
🤔 배운 것
- 일정 관리, 분담 등 팀장으로서 해야할 일에 대해 많이 배웠다. 의사소통 방법과 협업하는 방법을 계속 스킬업할 수 있었던 것 같다.
- 기획 단계부터 스프린트, 코드리뷰 등 체계를 만들어가며 개발하는 과정을 경험할 수 있었다. 부족한 것과 놓친 것도 많았지만 무엇보다 필요성을 많이 느낄 수 있었다.
- 깃허브 브랜치 전략, 이슈 템플릿 등 협업 방식과 브랜치 충돌등을 많이 겪으면서 사용에 조금씩 익숙함을 키워가고 있는 것 같다.
- 리덕스
상태관리 라이브러리 선정때부터 목적이었던 리덕스를 배울 수 있었다. 초기 세팅과 redux-persist 세팅을 맡아서 진행할 수 있었다. 팀원들의 피드백으로 타입스크립트면에서나 추상화에서 도움을 받아서 수정하며 더 배울 수 있었다.
😕 부족했던 것
- 초기 api 이해에 부족함이 많았던 것 같다. 이게 눈덩이가 되어 이후에 계속해서 문제를 발생시켰다. 커스텀 없이 딱 정해져있는 api이기 때문에 더 정확히 이해하고 구상했어야했다고 반성했다.
- 요구사항과 api 세팅에 비해 복잡한 기획을 했던 것 같다.
- 기록. 개발하면서 배운 것들, 트러블 슈팅했던 것들을 다 적어놓고 싶었는데 또다시,, 할일과 이슈에 밀려서 꾸준히 작성하지 못했다..
- 멘토님 커피챗 질문 모아두기
- 노션 정리에 (나름) 진심인 편이라, 이런 저런 템플릿도 찾아보고 내가 많이 바꿔보고 하면서 세팅을 했는데 아쉬움이 남는다. 더더 효율적이고 깔끔하면서 예쁘게 정리해두고 싶은데 끙.. 스프린트 관리나 현재 작업중인 상태 관리가 미흡했다. 보기에나 관리하기에나 비효율적이었던 걸까?ㅠ 아니면 바빠서일까.. 작업 현황이 바로바로 반영되고 있지 않아서 효율적으로 사용하지 못했다고 생각된다. 해야할일 > 그 내부에 자세한 태스크와 배정, 정리 이 작업을 더 효율적으로 해두고 싶다!
- 반성 : 리베이스 이슈를 너무 많이 만들었따 .....
😃 바라는 것
- 코드 퀄리티 높이기. api 응답 구조의 한계는 있지만 요청을 최소화하고 상태관리를 세세하게 재점검해야한다.
- 더 많이 테스트하고 최종_최종_최종으로 PR하기. 다른 사람의 PR 리뷰 적극적으로 코멘트 남기기. 후반부로 갈수록 하나 둘 놓친 상태에서도 PR을 올리고, 설명해주는 부분만 확인해서 코멘트 남기기도 했던 점이 아쉬웠다. 빠르게 다음 단계가 필요해서 어쩔 수 없기도 하였지만, 조금 더 신경을 써야겠다!
- TanstackQuery 공부! 상태관리의 중요성과 라이브러리의 필요성을 많이 느꼈다. 정말 잘 써먹을 기술을 꼭 열심히 배워놔야겠다.
- 이번 프로젝트에서 좋았던 것 유지하기, 배운 것 써먹기, 부족했던 것 개선해서 성장하기
4. 목표
어느새 마지막 팀만을 앞두고 있다. 수료와 본격 취준이 코앞이다.. 걱정이 굉장히 굉장히 많이 들긴 하지만, 그래도 열심히 해야지 잘 해야지 뭐 어떡해 ;
회고를 적으면서 아쉬운 점, 부족했던 점에 유독 할말이 많아졌던 점 마저 반성하며,, 다음 달 계획과 목표를 세워본다!
내가 만든 모모
☐ 모모 프로젝트에서 타입스크립트 보완하기 + 타입스크립트 조금 더 공부하기
☐ 다른 사람들 코드도 보기. axios요청, 상태관리 어떤식으로 했는지 많이 읽어보기 -> 수정반영
공부할 것
☐ TanstackQuery 공식문서 공부하기
취준
☐ 코테 다시 꾸준히 풀기 시작! 강제성이 필요하다 뭐가 좋을까,,
☐ 포트폴리오에 데브코스 공부기록과 모모프로젝트 추가하기
☐ 제출용 이력서, 포트폴리오 템플릿 정해서 내용 채우기
그래 냅다 그냥 하는거지~ 또다시 여전히 킵꼬잉
