❤️🔥 나의 첫 프로젝트!!! 조금 많이 뒤늦게 프로젝트 회고록을 옮겨볼까 한다. 메모장에 써두고, 정리를 미뤘었는데 역시 플젝은 정리... 문서화... 더 까먹기 전에 옮겨놔야겠다는 생각이 들었다.
❤️🔥42byte
42좋은 42사람들을 위한 익명 커뮤니티이다. 팀원들은 42슬랙에서 크게 말을 하지 않는 사람들로... 우리도 편하게 대화할 수 있는 익명 커뮤니티가 있으면 좋지 않을까? 라는 생각으로 시작되었다.
초반에 팀원도 바뀌고, 42과제로 12월은 기획 회의만 하고 과제하기 바빠 실질적으로 코드 시작은 1월이 넘어서 시작하게 되었다.
- 개발 기간: 1월 ~ 3월 14일(첫 오픈)
- 기술 스택: React, typescript, styled-components, Figma
👊 나의 역할
복수전공을 하면서 ux/ui 기획쪽 수업을 몇 번 들었는데, 그게 도움이 되었다. 다들 코드부터 시작하려는 것을 말리고... 구현에 필요한 기능들을 갖춘 간단한 infomation architecture를 만들고 들어가자고 하고, 와이어프레임을 만들고 들어갔다. 학부때는 잘 몰랐는데 이렇게 써먹어서 신기했다.
코드적으로는 주로 글 상세 페이지, 댓글, 대댓글 부분을 구현했다. 이 외에도 에러페이지, 로딩페이지 등을 만들었는데, 중후반부터는 수정은 이것저것 다 했다.😊
또 이 프로젝트를 할 즈음에 레트로에 빠져서 디자인 아이디어를 냈는데, 예쁘게 잘 마무리되어서 뿌듯하다. 처음에 약간 어중간한 레트로였는데 큰 도움과 용기를 주신 휴파님께 감사를-😎
‼️ 느낀점
🚨 Git 관리
프로젝트를 마무리하고 나서, 휴파님이 처음 깃 레포를 짤 때 만들어 주신 깃 이슈 템플릿, 커밋 템플릿, pr 템플릿을 설정해주고 셋팅을 해주고 갔다. 그때는 왜 이렇게까지 꼼꼼하게, 또 귀찮게 하고 간거지? 했는데 지나고 보니 정말정말정말 협업에서 중요한 셋팅이었다.
비록 프론트에서 팀원이 2명이긴 하지만 그래도 서로가 어느 부분을 하고 어떻게 했는지 매번 말하지 않아도 알 수 있어서 정말 편했다. 또 꽤 시간이 지난 지금 들어가도 언제 뭘 누가 했는지 알 수 있다. 진짜 최고👍
우리가 오프라인으로 전체로 딱 2번 만났음에도 잘 굴러갈 수 있었던 이유 중 하나가 깃이다!
📌 탄탄한 기획
백엔드도, 프론트엔드도 프로젝트가 처음이라 일단 기존의 게시판 사이트 레퍼런스를 보며 필요한 페이지, 기능, api를 구현하고 연결했다. 그리고 필요하면 좋을 것 같은 추가 기능을 추가하는 방식으로 진행되었다. 사실 기획쪽에 큰 시간을 쏟지 않아서 초반에 만든 와이어프레임과 많이 달라지기도 했다. 그래서 각 페이지, 컴포넌트에서 사용하는 데이터도 자주 바뀌다 보니 백엔드에 수시로 수정과 추가를 요청했어야 했는데, 탄탄한 기획과 계획이 있었더라면 이렇게 자주 요청하지 않아도 되지 않았을까.... 하는 아쉬움이 있다.
😞 제대로 알지 못하면 나중에 고생한다.
모호하게 알고 있는 것은 나중에 항상 에러를 뿜는다. 꼭 다시 나타나 나를 괴롭힌다. 내가 헷갈리거나 애매하게 알고 있는 것은 다시 한 번 찾아보고 정리해야 한다는 것을 느꼈다. 이번 프로젝트는 너무 빠른 템포로 흘러갔고, 프로젝트가 뭔지도 제대로 모르고 지나갔기에 정리하지 못하고 넘어간 부분이 너무 아쉽다.
🗯 오버커뮤니케이션!!!
백쪽이 생각하는 형식과 우리 프론트에서 생각하는 형식이 다른 것을 많이 느꼈다. 백 팀원들도 처음이기 때문에 어떤 형식이 베스트인가도 잘 몰랐던 것 같다. 그래서 무언가를 요청할 때, "이런 데이터가 필요한데 이게 왜 필요하고, 어떻게 쓰일거고, 그래서 어떤 형태로 보내줬음 좋겠어요"라고 구체적으로 요청할 줄 알아야 한다.
특히 우리는 코로나 이슈로 프로젝트 기간에 서로 만난 횟수가 딱 2회... 따라서 게더타운에 만나서 회의하는 시간이 정말 중요했다.
그리고 고민을 이야기하는 것만으로 해결이 되는 경우도 있다. detail 페이지를 만들면서 페이지에서 글과 댓글 데이터를 모두 받아와 댓글 하나만 입력되어도 페이지 전체가 재렌더링 되는 게 걱정이었는데, 그 고민을 이야기하면서 게시글과 댓글 api를 나눠야겠다는 생각이 들었다. 이렇게 이야기를 나누면서 문제가 해결되는 과정이 신기했다.
📝 정리하고, 요청하자
위의 오버커뮤니케이션과 연결되는 내용인데, 나도 정리가 안 된 상태에서 오버커뮤니케이션 하면 결국 서로가 더 애매하고 혼란스러진다. 그래서 프론트 측에서도 어디서 어떤 에러가 나고, 어디를 어떻게 고쳐달라고 조금만 더 신경써서 정리된 후에 추가사항이나 수정사항을 요청하면 서로가 더 편해진다는 것을 느꼈다.
☄️ 백엔드도 어느 정도 알아야겠는데?
백쪽도 어느 정도 알아두면 서로의 실수를 빨리 찾고 고칠 수 있으므로 좋을 것 같다는 생각이 들었다. 특히 백-프론트가 데이터를 주고 받을 때, 굉장히 자잘한 실수가 많이 일어나므로 전체적 흐름 정도는 아는 게 좋을 것 같다.
테스트 서버로 테스트를 하다가 이제 본 서버로 연결을 해야 되는데 로그인 과정에서 자꾸 에러가 나는데 대체 문제 뭘까... 오랜 시간을 헤메다가 휴파님이 나타나서 딱 백쪽 코드를 보고 잘못 연결된 부분을 찾아내는데 멋져 보였다.😎
❤️🔥 Thanks to
좋은 기회를 주신 jinhyupa님에게 감사드립니다. 외부 라이브러리 사용도 알려주시고, 배포도 많이 도와주시고 저에게는 전문가입니다.😎
내 친구이자 똑부러지는 jihyukim🍒 당신은 flex의 신 grid의 신이야...!!! 또 배포의 신...!👊
또 처음 백엔드를 하지만 누구보다 열심히 공부하고, 프론트에서 데이터 바꿔주세요, 이거 빼주세요, 이거 다시 넣어주세요 요청에도 너무 흔쾌히 들어준 nheo님, donghyuk님, 감사합니다! 같은 팀원이어서 재밌었어요😊 서로가 다 처음이어서 너무 재밌었습니다.
