pre-project 늦은 회고

1. Stack Overflow 클론 코딩하기

프리프로젝트는 2주간 스택오버 플로우를 클론 코딩하기가 과제였다. 짧은 기간이라 모든 기능을 다 구현할 수는 없었다. 그래서 가장 핵심 기능인 질문하고 질문에 대해 답하는 기능을 중점으로 구현하였다.

 

최종 구현한 기능 및 페이지

- 로그인 및 회원가입 페이지

- 전체 질문을 볼 수 있는 메인 페이지

- 질문의 상세내용을 볼 수 있는 페이지

- 질문을 작성하는 페이지

- 질문을 수정하는 페이지

- 댓글을 수정하는 페이지

- 답변을 수정하는 페이지

 

나의 담당

- 답변 CRUD

- 사이드바

- 사이드에 붙어 있는 메모

 

사용한 기술

- React

- Zustand

- CSS Module

- React Quill

2. 어려웠던 점

2-1. 기본 세팅 및 담당 나누기

일단 다들 처음 프로젝트를 시작했기 때문에 어떤걸 먼저 해야하고 어떻게 할 일을 나눠야할 지부터가 문제였다. 게다가 팀장님이 며칠 동안 참여를 하지 못해서 더욱더 진행이 더디었던 것같다. 나는 이때 팀원들과 별로 성격이 맞지 않는다고 생각했었다...😂 그래서 며칠동안 화면정의서 만들고 백엔드분들이 만들어준 요구사항정의서를 그냥 같이 좀 보고있었다..

팀장님이 돌아오시고 나서 이전 기수가 한걸 참고해서 역할을 나누고 기본 파일 세팅은 팀장님이 맡아서 해주셨다. 그때도 감사했지만 지금생각해봐도 팀장님이 너무 잘 이끌어주신 것 같다. 최대한 협조할려고 디코에도 칼답하고  이모지도 열심히 찍었는데 도움이 되었겠지..?

2-2. 깃허브 사용하기

깃허브로 협업해보는 것은 처음이였기 때문에 괜히 내가 다른 사람 작업코드까지 날려버리까봐 매우 무서웠다. 그래서 회의에서 알려준 방식대로만 했다. dev-fe로 pull, 내 작업 브랜치로는 push이 것만 반복했던 것 같다. 

중간에 파일명의 앞글자만 대문자로 바꿀려고 했다가 난리가 나길래 겨우 되돌리고 그냥 소문자 파일명해도 되는지 팀원들의 허락을 구했다. 단순하게 반복했더니 그후로는 큰 문제가 발생한 적은 없었다.

2-3. 갑작스러운 일정 발생

프로젝트 일주일정도 지났을 때 부모님이 교통사고가 나셔서 급하게 노트북만 들고 새벽에 병원으로 가게되었다. 결국 엄마의 보호자로 병원에서 생활하게 되었다. 

거의 프로젝트 후반 부분이였어서 서버와 api테스트를 진행과 배포가 남아있는 상황이 였다. 내 노트북은 윈도우와 운분투 멀팅 부팅이 가능하고 우분투에서만 코딩작업을 했었다. 그런데 노트북이 좀 오랜된 거라 그런지 start하는데도 너무 느리고 결국 install을 반복하다가 디스크 부족으로 start가 완전 막혀버렸다. 결국 더 이상 작업 진행은 어려울거라 생각해서 일단 팀원에게 테스트를 대신 부탁했었다.. 🥲 그래서 노트북을 그냥 리셋시켜야 겠다 생각했는데 초기화하고 윈도우 버전 업데이트하는데만 하루가 걸렸다.. 진짜 노트북 새로 살까 엄청 고민했다...

후반은 적극적으로 참여를 할 수 없었고 그 부분이 다시 생각해도 많이 아쉽다. 이번 상황을 보면서 메인프로젝트에도 초반에는 적극적인 참여가 힘들 것이라 생각해 코드스테이츠 측에 기본 3인팀이 아니라 4인 팀에 참여할 수 없냐고 문의하였고 4인팀으로 지정해주겠다는 답변을 받았다.

3. 배운 점 및 느낀 점

3-1. 프로젝트의 전체적인 진행 과정

나 혼자 리액트 연습해볼 때는 cra를 그래도 사용했었는데 이번 기회를 통해 필요 없는 부분을 삭제하고 아이콘 설정이나 앱이름 설정하는법도 처음 알게 되었다. 그리고 기본 적으로 다른사람들은 파일 구조를 어떻게 하는지 css 초기 셋팅을 어떻게하는지 스크립트를 활용하는 법 등을 알게 되었다. 난 json server 항상 터미널에 명령어는 다 입력했는데 입력할 때마가 기억 잘 안나서 찾아봤었는데 스크립트에 명령어로 지정해 두면 훨씬 간단하게 사용할 수 있단는 것을 알게 되었다. 스크립트는 알고 있었는데 왜 활용해볼 생각은 못해봤을까 지금이라도 알아서 다행이다

3-2. 다른 사람들의 코드를 통한 학습

사실 이번 프로젝트에 만난 팀원들이 다들 나보다 잘 하신는 분이 었다. 특히 팀장님이 이전에 퍼블리시 일을 하셨던 분이라서 css 어려운 부분은 많이 물어보고 도움을 받았었다. 그리고 다른 사람들이 코드를 작성하는 것을 보고 이렇게도 사용할 수 있고 새로운 것만 많이 배울 수 있었었다. 이번 프로젝트의 가장 큰 성과가 아니였을까 싶다.

먼저 axios 사용하는법

로그인 로그아웃 토큰 및 프록시의 위험성

커스텀훅의 다양한 활용(모달 시 배경 고정하기) 스크롤 위로 올리기,

라우터를 통해 데이터 보내기

내가 어렵다고 생각부분을 다른 사람들이 뚝딱해내는 모습을 보고 내 부족함을 많이 느겼다..

3-3. CSS Module과 Zustand

처음에는 taillwind 사용할려고 했는데 다들 사용해본적은 없었기 때문에 기간이 짧으니 좀 더 익숙한 걸로 사용하기로해서 css Module로 바꿨다. css Module 사용은 처음이 였는데 팀장님이 잘 알려주셔서 쉽게 사용할 수 있던것같다. 사실 처음 설정만 조금해주면 사용법은 css 와 동일 했기 때문에 크게 어렵지는 않았었다.

 

처음에 리덕스 툴릿을 상태관리 라이브러리로 설정했었는데 생각보다 전역으로 관리해야할 게 없어서 그냥 간편하게 사용할 수 있는데 Zustand 바꾸게 되었다. 이거 써보니깐 왜 다들 리덕스 안 쓰고 다른 라이브러리 사용하는 알것같다. 넘 편하다 😊

3-4. 커뮤니케이션의 중요성

아무래도 대부분이 프로젝트가 처음이다보니 커뮤니케이션에 있어서도 부족한 부분이 있었었다. 각자의 현재 상황이나 어려움을 공유하지 않다보니 서로의 불만점을 잘 알 수 었었던 것 같다. 그러다 팀장님의 너무 서운하다는 말을 하셨고 그후에 다들 좀더 서로의 상황에 대해 솔직하게 말하고 고민사항을 다같이 공유하게 되었다. 다른 사람의 입장을 알게되니 그사람이 왜 그렇게 행동했는지 이해할 수 있게되었다. 우리는 그후 매일 5시에 모여서 다같이 merge를 진행하고 현재 상황을 공유하기 시작했는데 그게 팀프로젝트 진행하는데 많이 도움이 되었던 것같다. 그리고 다른 사람들이 하는 부분은 내가 잘 모를수 있는데 약간이라도 함께 공유하면서 새로 알게된 점들도 있어서 좋았다.

 

후반을 마무리에 저극적인 참여을 하지 못해서 아쉬웠던 프로젝트였지만 팀원들에게 많은 것을 배울수 있었던 프로젝트였다.