Stack Over Flow 클론 코딩 프로젝트

첫 협업 프로젝트, 팀 단위로 백엔드 개발자와 협업하여 Stack Over Flow 사이트를 구현

git-workflow, 칸반을 사용해 실제 개발 업무에서 사용되는 팀 단위 업무 수행 방법을 학습

개발 기간

22년 10월 20일 ~ 22년 11월 4일 (약 2주, 주말을 제외한 개발 기간은 12일)

그래도 모두 주말까지 불태우며 정말 열심히 만들었고, 멋진 Stack Over Flow 사이트를 완성할 수 있었다.

개발 인원

• Front-end : 3인
• Back-end : 3인

구현 항목

• 회원가입, 로그인, 로그아웃
• 질문(작성, 조회, 수정, 삭제)
• 답변(작성, 조회, 수정, 삭제)

내가 구현한 부분

• Stack Over Flow의 Footer(Stack Overflow의 이동 링크가 담겨있는 컴포넌트)
• Ask(질문 게시글 작성)
• Question(질문 글 확인, 추천/비추천, 답변을 작성할 수 있는 게시글 상세 페이지)

프론트엔드 기술 스택

React, Fetch, React-router-dom, Styled-components

프로젝트를 하면서

첫 프로젝트라 심적으로 부담되었다. 내가 잘 할 수 있을지 걱정되었지만, 프리 프로젝트를 어떻게든, 온전히 잘 마무리 하는 것이 목표였다. 잘 몰라도, 결국은 구글에 다 답이 있을거야! 그러니까 밤을 새서라도 찾고 해결하자! 하는 마음이었다.

나중에는 정말로 찾고 헤매느랴 새벽 5시쯤에 잠들기도 했는데 어떻게든 목표한 작업은 달성하려고 노력했다.

프로젝트에서 맡은 작업 중 Question(게시글 상세 페이지) 부분은 API 호출이 많고 생각보다 디테일적으로 많은 작업이 필요했지만, 열심히 구글링 하고, 모르는 부분은 적극적으로 물어보면서 CRUD 기능이 있는 게시글 상세 페이지를 완성할 수 있었다.

구현 과정에서 일부 기능에 대한 문제가 발생했지만, 이를 해결하며 보다 높은 수준의 코드를 작성해나갈 수 있었다.

프로젝트 과정

— 코드 컨벤션 논의하기

• 함수는 화살표 함수로
• 호이스팅을 방지하기 위해 function이 아닌 const 사용
• CSS는 styled Components 사용
• 클래스 이름은 btn—secondary로 기재
• prettier 설정 동일하게 맞추기
• 배열에서 복사할 때 스프레드 연산자 사용 (slice X)
• 변수 명은 카멜 케이스로
• 전역 스타일은 Global CSS, 색상, 폰트 정해서 사용

등의 내용을 정했다.

— Git 협업 관련 내용 공부하기

유튜브 생활코딩님의 영상으로 Git 협업 관련한 내용도 공부했다.

Git 협업을 처음 접하는지라, 혹시나 내 실수로 다른 사람들의 작업물에 피해가 갈까봐 아주 조심스러웠다.

그리고 Github로 팀 프로젝트를 관리하는 것은, 갈등을 최소화 하기 위해 + 내가 나의 작업에 피해받지 않기 위해 꼭 필요했다.

https://www.youtube.com/watch?v=vI8FFvQge2w&list=PLuHgQVnccGMD-XRW1zlqC7U2uCzOxyT8u

— 화면 정의서와 요구사항 정의서 작성하기

그 다음 서비스 기획 및 분석을 위해 화면 정의서와 요구사항 정의서를 작성했다.

화면 정의서는 Home, Ask, Login, SignUp, Nav, Questions 로 총 6개의 페이지를 만들었고

요구사항 정의서엔 각 화면의 필요 기능들, 기능 설명, 우선 순위를 작성했다.

실시간 세션에서 요구사항 설명을 아주 구체적으로 만든 예시를 보여주셨는데
15일 안에 모두 구현하긴 힘들지만 구체적으로 설명을 써주는 것이 좋다고 하셨다.

— 데이터를 받아오는 방식

데이터는 한 번에 받아오고, 선택적으로 뽑아서 사용하기로 했다.

아쉬웠던 부분

— 코드의 구조와 관리 신경 쓰기

아쉬웠던 부분도 있는데, 코드를 분리하지 않고 줄줄 써내려 가다보니 나중엔 그게 어디서 문제가 생긴 건지 찾기가 힘들었다.

이 문제를 체감한 이후 메인 프로젝트부터 코드에서 컴포넌트를 기능별로 조금씩 분리하려고 노력했다.

이렇게 나쁜 습관을 고치면서, 컴포넌트가 어떤 역할을 하는지 쉽게 파악할 수 있고 코드의 유지 보수성을 높이면서 버그를 줄일 수 있게 되었다.

— 커밋 메시지 작성하기

또, 코드를 작성할 때마다 커밋 메시지를 작성해야겠다고 다짐했다. 변동 사항마다 커밋 메시지를 작성함으로서, 어디서 문제가 생겼는지 좀 더 쉽게 추적할 수 있었다.

— 팀원이 만들어 둔 코드 재사용하기

팀원이 만들어 둔 재활용 코드를 잘 쓰지 못했다. 내가 다른 팀원들이 효율적으로 코드를 재활용 할 수 있도록 만들어 두지도 못했다. 이후에 차차 다른 코드를 읽으면서, 어떻게 쓰는 것이 효율적인지 공부하고자 한다.

— git 사용시 에러 대응

git 을 다루는 부분에 있어서 처음 보는 에러들로 시간을 많이 잡아먹었다. 프론트 팀원들끼리 다같이 모여서 오류 해결하는데 시간을 다 쏟곤 했었다. 그래도 프리 프로젝트때 에러로 고생하다 보니, 메인 프로젝트 때 좀 더 유연하게 대처할 수 있었던 것 같다.

첫 프로젝트를 마치며

첫 프로젝트가 끝나고 나 스스로 아쉬운 부분이 많았던 것 같다. 더 깔끔하게 잘 쓰고 싶었는데, 그러지 못한 부분도 있었고 아직 부족하다고 느낀 분야가 많았기 때문이다.

로그인 관련된 내용 공부하기

jwt token 등을 아직 이해하지 못했다. 메인에서는 훨씬 복잡한 방법으로 진행했는데 프리, 메인 프로젝트의 로그인 코드를 보면서 따로 공부하려고 한다.

타입 스크립트 공부하기

프로젝트를 하면서 타입 스크립트를 이해하지 못해 적용 못한 부분들이 있었다 (Ask의 Editor 부분에서 타입 스크립트를 이용한 코드 예제가 있었다)

타입 스크립트는 요즘 프론트엔드 개발자의 우대 사항에 빠지지 않는 부분이기도 하고.. 반드시 공부해야 할 것 같다.

Recoil 사용해보기

프리 프로젝트니까 상태 관리를 그냥 props 내려주는 방식으로 하기로 했는데, 프리 프로젝트여도 생각보다 꽤 필요한 상태들이 많았다. Recoil을 사용한 상태 관리 방법도 공부하려고 한다.

팀원들간의 코드 리뷰는 어떻게 진행되는지 찾아보기

프리, 메인 둘 다 코드 리뷰를 받아보지 못했다. 다들 시간이 촉박했고 구현하기 바빴어서 실제 코드 리뷰는 어떻게 진행되는지, 내가 코드 리뷰를 작성 한다면 어떻게 작성해야 하는지에 대해 찾아봐야겠다.

이번 프리 프로젝트로, 앞으로 팀 프로젝트를 할 때 어떻게 진행해야 할 지 갈피를 잡을 수 있었다. 백엔드와의 협업으로 프론트엔드 개발에 대한 재미를 느끼게 되었다.

-프리 프로젝트에서 만난 팀원들과 현재는(23년) 타입 스크립트 스터디까지 함께 진행하면서 연을 이어가고 있다. 함께 훌륭한 프론트엔드 개발자가 되기 위해 꾸준히 노력할 예정이다 :)