stack overflow 클론 코딩(Pre-project 회고)
코드스테이츠 과정 중 처음으로 한 프로젝트로 스텍오버플로우를 클론코딩해보았다.
클론 코딩이라는 것은 이번에 처음 접해보고 경험해봤다.
클론 코딩이란 실제로 서비스를 하는 사이트의 기능을 동일하게 구현해보면서 실제 웹 사이트가 어떻게 구성되고, 기능하는지 알아가는 공부방식이라고 할 수 있다.
pre-project
기간 : 2주
팀 구성 : back 3, front 3
주제 : stack overflow 클론 코딩
기술 스택 : React, java
프론트앤드 사용 라이브러리 : react-quill, react-pagenations, redux, style-component, react-state, axios, react-router-dom
기능
- 로그인/로그아웃
- 회원가입
- 질문 조회, 질문 Detail *
- 질문 작성, 수정, 삭제
- 댓글 작성 *
- 질문, 댓글 추천, 비추천 *
- 회원정보 조회/수정
- User List
- pagenation
- 질문 검색
- AWS 배포
세세한 기능도 있지만 큰 기능만 정리하면 이 정도 될 것 같다.
내가 혼자 담당하여 구현한 기능은 *가 붙은 기능들이다. 초반에는 기능을 역할분담하여 구현하였고, 마무리하는 3-4일간은 함께 한 기능을 구현하는 방식으로 진행하였다.
CSS는 stackoverflow를 따르지 않아도 됐지만 기능 구현이 먼저라고 생각했기 때문에 비슷하게 가는 방향으러 정했다.
과정
1. 사용자 요구사항 정의서 정리
2. 피그마로 구현하기로 한 페이지 UI/UX 구상
3. 구상된 페이지를 기반으로 화면정의서, 테이블 명세서 등 작성
4. 코드 컨벤션 회의
5. 개발 시작 (git을 이용한 협업)
이슈사항
1. git
git을 이용한 협업이 처음이여서 공용으로 레포지토리를 관리하는 것도 익숙치 않았다.
그래서 이 부분에서 많이 헤맸던 것 같다.
그러다 한 번 팀 내에서 pull을 하지 않고 push를 했다가 client쪽 파일이 날라가버리는 경험을 한 뒤에는 방식을 바꿔서 dev 파일부터 fe/be로 나누어서 관리를 하기로 했다. 또한 merge를 할 때는 프론트, 백엔드 각각 팀원들에게 공지한 후 merge하는 방식으로 진행했다.
깃의 중요성을 알 수 있었던 기회였던 것 같다.
2. 코드 컨벤션
미리 정할 수 있는 부분은 정해서 코드 내에 통일감을 줘야 하는데 막상 정해볼까요?했을 때 어떤 것을 어떻게 정리해야할지 감이 오지 않았다.
그래서 넘기고 나중에 코드를 합치고 통일했을 때가 되서야 아 이런걸 맞추라고 컨벤션을 하는구나를 알 수 있었다.
그 외에 기능구현 할 때 이슈사항은 많았지만.... 그 점은 천천히 하나씩 올려보려고 한다.
마무리
엄청 숨 쉴틈도 없이 바빴던 건 아니였는데 처음하는 프로젝트였다보니 이슈정리가 잘 되지 않았다는 생각이 들었다.
문제가 발생하면 정리하기보다는 해결하기 바빴고 나중에 생각하려니 당연히.. 자세하게 생각나지 않아서 정리하기 힘들었다.
이제 다시 시작하는 메인프로젝트에서는 어떤 상황에서 어떤 문제가 생겼고 어떤 방법을 이용해서 해결했는지 그때 그때 정리하는 습관이 필요한 것 같다.
그래도 지금까지 배웠던 이론을 이렇게 직접 처음부터 구현하면서 사용해보니 이제야 React에 대해서 더 잘 알 수 있는 시간이였던 것 같다
같이 페어했던 분과 프리 프로젝트 끝나고 이야기를 나누었는데 나왔던 말이 프로젝트 3번하면 좋겠다 였다. 그만큼 확실히 프로젝트 하면서 많이 배웠던 것 같다