2주 프로젝트 회고 : GatherCoding, 나의 첫 팀프로젝트 (+122)

 

Section 1,2,3 를 마치고 시작한 2주프로젝트가 어제 끝났다.

​

프로젝트 내내 새벽4시에 자면서도 잠드는걸 아쉬워하는 나를 보며 '난 이걸로 먹고 살아야겠다' 라는 생각을 했다.

​

이번 2주 프로젝트의 가장 큰 문제점은 2주라는 시간동안 너무 많은걸 하려 한 것이다.

​

스터디 모임 주선 홈페이지인데 가장 중요한 '방 참여하기' 기능을 구현하지 못했다.

​

배포도 하지 못한채 만들다가 2주가 가버렸다..

​

결국 그냥 에브리타임, 블라인드같은 게시판홈페이지가 되어버렸다 ... 읽을수만 있으니깐...

​

그래도 프로젝트를 하면서 새로 배운 카카오맵 API, 능숙해진 Redux사용, 버그해결하면서 읽어봤던 공식문서들을 생각하면 등 레벨업을 많이 한것같아 아주 만족한다.

​

다음주 있을 4주 프로젝트도 파이팅하겠다.

 

시작

프론트 2명, 백엔드 2명으로 2주간 프로젝트를 진행했다.

서비스는 '모각코 오프라인 모임 주선'으로 정했다.

타입스크립트를 사용해보려했지만, 우선 배운것들을 똑바로 복습하자라는 의견이 나왔고 그 의견에 동의했기에 Section 1,2,3에서 배운것들만 사용하기로 했다.

내가 다룬 부분 :

• 페이지 이동간에 방, 유저 데이터 흐름 구축
• Kakao Map API 이용하여 약속장소의 주소, 유저 현재위치 핸들링
• React Router 이용한 페이지 변경 및 파라미터 설정
• Header, Sidebar와 그 안에 있는 버튼들

Tech Stack

---

간단한 KPT

Keep

• 약속시간 어기지 않음
• 초기단계에서 더미데이터를 사용하고 나중에 더미데이터를 DB의 데이터값으로 교체하기만 하면 되도록 한 것
• 중복되는 컴퍼넌트들을 미리 예상하고 정리하여 재사용이 용이하도록 한 것 (팀장님 아이디어)
• 저녁시간 2시간
• 먹고자고싸는시간빼고 코딩한것
• 포기하지 않고 '지도에 클릭하여 약속장소 정하기' 기능을 구현한 것 (3일걸렸다..)
• CRUD기능을 다 구현했다.
• 내 예상보다 더 많은일을 한 나 자신에게 박수

Problem

• 처음이다보니 우리 넷 다 SR을 꼼꼼히하지 않고 부딫히며 해결하자! 라는 마인드로 시작했다. 그 결과 역할분담이 명확하지 않았고 후반부에 깃 충돌이 엄청나게 많이 일어났다.
• 서버부분에 원하는게 있으면 내가 만들지 말고 만들어달라고 명확하게 부탁해야한다. 아무리 상의를 잘 해도 나의 영역이 아닌 부분에 손을 댄다면 깃 충돌을 피할 수 없다.
• 밤에 일찍자고 아침에 일찍일어나는게 훨씬 좋겠다.
• 방만들기 모달창에서 검색창을 만들기 귀찮아서 Material-UI 라이브러리를 사용한 것
• 어느순간 TODO 리스트를 보지 않고 의식의 흐름대로 진행
• 시간이 모자라서 가장 중요한 '방에 참여하기' 를 구현하지 못했다..

Try

• API 기능을 아주 세분화하고 철저하게 기획된 API 대로만 개발하자. 후에 API 북을 수정할 일이 절대 없도록 하자.
• 버튼 기능을 가진 컴퍼넌트를 만들기 위해 props에 onClick 함수를 넣어줬었는데, styled component를 통해 버튼기능을 가진 컴퍼넌트를 만들고 재사용도 쉽게 할 수 있다는 것을 알았다. 4주 프로젝트때 사용하자.
• 소켓공부해서 채팅기능 꼭 만들 수 있도록 하자.
• 구글맵이 legacy하지만 내장된 기능,style이 많다고 한다. 검토해보자
• 기획단계에서 한명이라도 PR시 전체가 그자리에서 merge하고 시작하자고 제안하기
• Not To Do 리스트 작성하고 철저하게 지키기.
• 역할분담 명확하게 하기
• 이번에 인증/보안 부분을 하지 않았는데 4주프로젝트에서는 인증/보안 부분을 다뤄보자.
• 첫 화면에 렌더링되는 데이터가 많을지 생각하고 많다면 Next.js를 사용해보자. 

---

서비스 소개

기획 의도 :

온라인 만남들이 다시 오프라인 만남으로 제자리를 찾아가는 위드코로나 시기이다.

 

개발자들이 지역 근처 다양한 개발자들과 만나 모각코 모임을 갖고 교류할 수 있는 플랫폼이 필요하다고 생각했다.

GatherCoding 은 사용자들이 클릭만으로 모각코 모임을 만들고, 참여할 수 있는 플랫폼을 목표로 한다.

 

렌더링 화면 :

1. 첫 렌더링화면

2. 유저가 살고 있는 지역에 방 만들었을때

유저가 살고 있는 지역에 방 만들었을때

3. 유저가 살고있지 않은 지역에 방 만들었을때

유저가 살고있지 않은 지역에 방 만들었을때

홈 화면에는 유저가 살고있는 지역에 있는 방만 표시되고, 내 모임에는 지역에 상관없이 유저가 소속된 모든 방이 표시된다.

4. 방 클릭시 방정보 화면으로 이동한다.

5. TIL버튼을 누르면 사용자의 블로그로 이동한다.

6. 로그아웃을 누르면 홈화면으로 이동하며 로그아웃된다.

---

2주 프로젝트를 통해 새로 배운것들

1. Kakao map API

카카오택시를 이용할때 지도에서 장소를 찍으면 그 장소가 택시기사님한테 전달된다.

이 기능을 약속장소를 정하는 기능으로 구현하고 싶었다.

모각코 모임 장소를 정할때 주소를 적지않고, 지도를 클릭하여 약속장소를 정하는 기능을 구현했다.

순서는 다음과 같다.

1. 지도를 클릭하면 클릭한 지점에 마커가 생긴다. 마커의 말풍선에는 클릭한 지점의 도로명 주소가 적혀있다.
2. 클릭한 지점의 좌표는 주소로 변환되어 DB에 저장된다.
3. 필요할때마다 해당 방의 주소를 DB에서 꺼내올 수 있다.

지도의 주소값이 한 타이밍씩 밀려서 입력되는 버그

아래 gif에서 보다시피 주소값이 한타이밍씩 밀려서 입력되는 문제가 있었다.

해결책은 useEffect를 이용하여 useState를 동기화하는 것

useState가 비동기 작동하고 useEffect로 useState를 동기화 할 수 있다는 사실은 리액트를 처음 공부할때 보았던 내용이다.

콘솔로그가 한타이밍씩 밀리는 것을 해결하려 구글링을 할 때 보았던 내용인데 실전에선 전혀 생각이 나지 않았다.

 

하지만 이번에 하루 종일 고민하고 해결하였으니 이제 머리에 문신처럼 각인되었으리라 생각한다!

const [state,setState] = useState('default')

useEffect(()=>{
//state의 값이 바뀔때마다 실행되는 함수
func()
},[state])

state값이 바뀌면 무조건 func()가 먼저 실행된다.
즉 비동기로 처리되는 useState 를 동기화 하여 렌더링순서를 조작할 수 있게 된다.(당시 잘못된 지식으로 이렇게 작성함)

useEffect는 렌더링후에 실행되는 훅이다, state의 값이 바뀔때만 func()을 실행하게 하여 비동기로 이루어지는 useState를 동기화 할 수 있는것이다.

 

그 결과 아래 gif처럼 주소가 올바르게 출력된다.

이 간단한걸 해결하는데 무려 3일이걸렸다..

 

2. post요청은 req.cookie를 사용하지 못하나??

코드의 복잡한 내용을 다 버리고 간단히 하면 아래와 같다.

1. post요청을 보내면 req.cookies 가 콘솔로그되지 않는다.

2. get요청을 보내면 req.cookies 가 콘솔로그 된다.

해결

get요청과 post요청의 config 설정이 달랐고, 나는 이전까지 config 라는 개념을 전혀 모르고 있었다.

get요청에서와 달리 post요청에서는 { withCredentials : true } 를 headers 값에 저장해서 전달하고 있었다.

post요청을 다음과 같이 바꾸니 해결되었다.

axios.post('http://localhost:4000/users/location-registration',{
          message : 'hi'
        },
        //{headers: {withCredentials:"true",'content-type': 'application/json'}}를 아래처럼 바꾸었다.
        {withCredentials:"true",'content-type': 'application/json'}

  )}

3. 리덕스 숙련도 up

지금까지 리덕스를 사용할 기회가 없었는데 이번기회에 리덕스를 질리도록 사용하며 숙련도가 올라갔다.

하지만 리덕스를 통해 비동기를 처리하는 redux-thunk 는 아직 어렵다.. 이것도 필히 공부해야할 내용이다.

---

4. 반성(별 5개)

 

소통

프론트끼리의 소통은 매우 잘 되었지만, 프론트-서버간 소통이 미흡했던 것 같다.

내가 서버를 바꾸기도하고 서버분들이 프론트의 내용을 바꾸기도 했다. 그러다보니 깃충돌이 사방에서 일어났다.

나같은 경우 몰입하다보니 , 이것만 바꿔야지 이것만 바꿔야지 했는 마음이 생겼었다. 그런 마음을 잘 추스려야겠다.

왜냐하면 이건 혼자잘한다고 끝나는 것이 아니라, 모두가 다같이 잘해야 하는 협업이기 때문이다.

 

축구에서도 팀보다 위대한 선수는 없다고 한다.

 

솔직히 말해서 혼자 많은것을 하는것이 잘하는 것이라는 잘못된 생각을 갖고 있었다.

 

다음프로젝트에서는 이런 마음 버리고 다같이 협동하는 것을 우선으로 하겠다.

 

프론트끼리의 소통은 지금까지 해온것처럼 작업끝날때마다 ~~끝났어요 라고 이야기하고, 문제있으면 꼭 공유하고 그런식으로 해온것처럼 하면 되지 않을까 

 

기록

너무 열심히 하느라 기록을 하지 못했다.

열심히 하고 있고, 기록은 나중에 몰아서 해도 된다고 생각했다.

중요한내용은 기억하고 있을거라고 단단히 착각했다..

 

기록을 짧게 짧게 해놓으니 되돌아보기가 힘들다..

 

다음프로젝트에서는 기록을 꼼꼼히 하기로 한다.

 

---

 

당장 공부할 것:

• react.hooks의 life cycle을 공부해야 리액트의 렌더링순서를 파악할 수 있다.
• axios의 config 공부하기
• 소켓이용하여 채팅기능 만드는 방법