BODYLIKE Project 회고록

 

 

 

 

 

 BODYLIKE Project 란?

 

 

 

 

 

 

 

 

 

https://youtu.be/_TEbHw0EREg

 

👆 시연영상 링크

 

 

 

 

 

 

개발기간

 

2022년 8월 16일 ~ 2022년 8월 25일 (10일)

 

 

 

팀 코너 (Team coner)

 

프론트엔드 개발자 : 최규선, 조은지, 조민재

백엔드 개발자 : 이지현, 백민석

 

 

 

기술 스택

 

프론트 엔드 : React / React Router / SASS

백엔드 : node.js / MYSQL / express / NODEMON / JSONWEBTOKENS / Postman

 

커뮤니케이션 : Slack, Trello, google SpreadSheet Editor (API 명세서)

 

 

 

프로젝트 설명

 

Wecode 36기 1차 프로젝트 BODYLIKE

바디 용품 커머스 사이트 '바디럽'(https://bodyluv.kr/)을 모티브로 구현 

외부 라이브러리 사용 없이, React CRA 툴을 사용하여 구현

 

 

 

 내가 구현한 부분 

 

 

 

 

 

로그인-회원가입창, 상세페이지 (장바구니 모달 제외)

 

 

 

 

 

 

---

 

 

 

 

 

인스타그램 클론(로그인 - 메인 페이지) 이후의 첫 작업으로, 이번 프로젝트에서 로그인, 상세페이지 구현을 맡았다. 2주간 진행되는 프로젝트였기 때문에 팀원들과 합을 맞추어 아주 효율적으로 돌아가야했는데 이는 혼자 작업했던 것과는 또 다른 경험이었다. 

작업의 결과물만큼 서로의 소통이 중요하다는 것을 알게 되었는데 Slack을 제외하고도 Trello, googleSpreadSheet, googleDrive 를 써 작업물을 공유했다.

 

 

 

Trello

 

 

 

혼자가 아닌 여럿이서 한 페이지를 구현했기에 가장 중요한 것은 작업 상황 공유였다. 팀코너는 이를 위해 트렐로를 이용했는데 컴포넌트 나누기, fetch 함수 등 아주 작은 부분까지 나누어 서로가 작업 진행 상황을 자세히 알 수 있게 했다. 

 

또, 오전 10시마다 전체 회의(Stand up meeting)를 가져 간단하게 어제 한 일 / 오늘 할 일 / 블로커 (어려웠던 점) 을 공유했다. 이때 팀원 전체가 회의에 없어도 되는, 도움이 필요한 부분이나 상의가 필요한 일엔 따로 시간을 맞추어 작은 소회의를 약속을 잡았고 소회의 내용 또한 트렐로에 적어 다른 팀원들과 공유했다.

 

 

Team Coner Trello

 

 

 

 

팀 코너에서 프론트 엔드는 나 포함 3명이었는데 전체 회의에서(백엔드 팀원도 있었기에) 자세히 나누지 못한 컨벤션 정하는 등 프론트엔드 업무를 위해 자주 소회의를 가졌다. 점심 후 거의 매일 30분씩 진행했는데 특히 블로커 관련해서 의견을 많이 공유했다. 이 덕분에 다른 기능을 구현할 때 겪는 어려움이나 관련 로직들을 공유할 수 있었고 해결 방안에 대한 서로의 의견을 들을 수 있었다

 

 

이번 프로젝트를 시작하면서 처음 써본 트렐로는 팀원들과 일정을 공유하기 더할 나위 없이 좋고 직관적인 협업 툴이라 느꼈다. 초반엔 카드 나누는 것부터 애먹었지만 트렐로에 익숙해질수록 편리함을 느꼈다. 조금 아쉬운 점은 지라 같이 하나의 카드에 1,2,3 점수를 매길 수 있으면 좋았을 거 같다. 1부터 어려워지는 일일수록 숫자가 커지는 것. 한 스프린트가 끝나면 그 총합을 더해 해당 팀의 한 스프린트에 소화가능한 작업량을 알 수 있다. 다음에 기회가 있으면 지라를 써보고 싶다는 생각이 들었다.

 

 

 

 

 

 

 

 

google SpreadSheet (API 명세서 공유)

 

 

 

 

백엔드와의 소통에서 가장 중요한 건 API 명세서였다. post, description, url, params, header, body(data 형식), status-code 모두 공유해 fetch 관련 함수 짤 때 너무 유용했고 목데이터를 만드는 것도 어렵지 않았다. 특히 후반에 URL 주소가 자주 바뀌었는데 이를 명세서에 바로 확인해 볼 수 있어서 큰 혼선이 없었다. 

 

 

 

 

 

 

flow-chart 

 

 

 

 

 

프로젝트 5일차, 회의와 프로젝트를 이행하고 있지만 프론트엔드-백엔드와의 소통이 부족하다고 느꼈다. 전체적인 시나리오가 필요하면 좋을 거 같아 예시를 들고 전체 회의를 요청했는데 시나리오보단 다같이 플로우 차트를 짜보면 어떻겠냐는 팀원의 제안에 모두 1시간 넘게 회의를 진행하며 플로우 차트를 그렸다.

 

전체적인 흐름을 되짚어보는 시간이었고 백엔드-프론트 엔드 작업에 대해 세세하게 회의할 수 있었다. 초반부터 이 흐름을 그렸으면 어땠을까 아쉬움이 남지만 작업을 중간 점검하고 또 서로 소통이 어긋났던 부분을 잘 체크할 수 있었다.

 

 

 

 

 

프로젝트를 통해 얻은 것

 

이번 프로젝트를 통해서 느꼈던 것은 바로 '소통'이 중요하다는 것이었다 . 실제로 몇 번의 회의가 이어져 코딩하는 것보다 회의하는 시간이 더 길게 느껴졌다는 팀원들이 많았음에도 제품 카운트 중 재고 설정 이상으로 넘으면 에러 메세지는 누가 띄우는 지, 가격 계산은 누가 하는지 등 세세한 일로 계속 물어보게 되는 일이 많았다. 이때 중요한 것은 서로가 서로의 업무에 대해 잘 모르므로 질문과 요청은 가능한 조심스럽게 해야한다는 것이었다. 

 

특히 프로젝트 후반부로 갈수록 통신 연결 때문에 서버를 열어달라는 요청을 계속하게 됐었는데 다행히 백엔드 팀원분이 너무나 흔쾌히 열어주시고 옆에서 같이 콘솔 찍어보며 오류를 봐주셔서 좋은 경험과 기억으로 남았다. 서버 연결이 안 된다면 가장 먼저 알아야할 것은 데이터 문제인지, 프론트 엔드의 코드에 실수가 난 것인지 판별하는 것인데 누구 하나 탓하지 않고 오류를 즐겁게 해결하는 자세를 직접 배울 수 있었다.

 

 

개발자란 새로운 지식을 끊임없이 추구하고 가지고 있는 지식을 공유해야한다고 생각한다. 하지만 나의 일에 집중하고 있을 때 남의 코드를 같이 고민하고 해결하려드는 것이 쉽지 않은데, 오류를 들고 찾아가면 진심으로 같이 고민하고 공부했었던 팀원과 위코드 36기 모두에게 공유의 자세를 몸소 배웠던 시간이었다. 

 

이제 개발 공부를 시작한지 한 달 정도 되었다. 한 달 전에 코드 한 줄 치기도 어려웠던 내가 이렇게 번듯한 홈페이지를 만들다니 신기하기도 하지만 결과물을 보면 즐겁다. 이번 프로젝트는 어쩌면 과정이 힘들다면 힘들었지만 백엔드와의 소통, 프론트 엔드와의 소통 등 여러모로 소통의 방법을 배웠던 소중한 시간이었다 느꼈다.

 

 

 

 

 

 

 

👇 기능 구현 포스팅

 

 

https://0119eunji.tistory.com/40

BODYLIKE 로그인/회원가입 창 구현

https://0119eunji.tistory.com/41

BODYLIKE 상세 페이지 구현