[회고] 마담주 클론코딩

chosh·2021년 9월 26일

클론코딩 회고

프리미엄 과일 커머스 사이트 마담주 클론코딩

팀명

MANNAMCHU

작업기간

2021-08-30 ~ 2021.09.10

팀 인원

총 5명
Front-End 3명
Back-End 2명

개발 도구

Front-End
Javascript, React, Sass

Back-End
phython, Django, MySQL

협업도구

Github
Trello
Slack

주요 구현 사항

네브바

로그인 상태를 이용한 동적 컨텐츠

회원가입/로그인

FE/BE 회원가입, 로그인시 이중 유효성 검사
localstorage를 활용한 토큰 관리
모달창 구현

메인페이지

라이브러리 사용하지 않고 캐러셀 기능 구현
scroll 이벤트를 이용한 동적 페이지

상품리스트페이지

Path parameter 및 query string을 활용한 동적 라우팅 구현
query string을 활용한 Pagination
filter 기능 구현

5. 상세페이지

state 활용한 옵션 선택 및 수량 변경 기능
동적 라우팅 활용하여 원하는 데이터 GET 통신
POST 통신을 이용한 선택한 옵션 장바구니에 추가 기능

6. 장바구니페이지

POST 통신 활용하여 옵션 수량 변경
DELETE 통신 활용하여 옵션 삭제

구현한 결과물

https://www.youtube.com/watch?v=4BvUCdMxRoQ

클론코딩 진행하면서 배운 점

소통

FE끼리의 서로 중첩되는 부분, 공용으로 사용하는 부분, 진행 상황등을 이야기 하면서 맞춰갔기 때문에 소통을 어떤식으로 해야 되는지 알게 되었다
BE와 소통하면서 다룰 데이터, 데이터의 구조, 데이터의 키값을 협의하면서 어떤것들을 대략 어느 시점에 서로 이야기 해야 되는지 알게 되었다

클론코딩 진행하면서 좋았던 점

소통

프로젝트 진행할 때 Scrum 방법론의 Sprint를 통해 소통을 진행했는데, 매일매일 데일리 스텐드업 미팅을 통해서 전체적으로

"어떤것까지 진행"이 되었고(한 일),
"어떤걸 할 예정"이고(할 일),
"어떤 문제가 발생"해서 어려움을 겪고 있는지(블로커)

서로 공유가 되어서
한 일 공유를 통해 비슷한 기능을 먼저 했으면 도움을 받거나,
할 일 공유를 통해서 다른 팀원과 맞춰서 어떤 부분을 먼저 해야 되겠다 하는 계획을 세우거나,
블로커 공유를 통해 내가 알고 있다면 도움을 주거나
하는것이 도움이 되었던거 같다

협업

그동안 팀끼리 협업을 통해 결과물을 만들어 내는게 대강 추상적으로만 알고 있었는데, 팀 프로젝트 진행하면서 어떻게 github를 이용해서 협업을 진행하는지 실질적으로 겪어보고 개념을 잡을 수 있어서 좋았다

javascript

프로젝트 시작전에 javascript를 사용할 때마다 익숙하지 않아서 사용법을 찾아보고, 적용해보고 안되면 다시 찾아보고, 적용해보고를 반복했는데, 프로젝트 진행하면서 많이 사용해보고 고민을 많이 해보니까, 이제 좀 익숙해진거 같아서 좋았던 것 같다

클론코딩 진행하면서 아쉬웠던 점

소통

프로젝트 시작전에 javascript가 너무 어렵다는 두려움이 있어서 빨리 기능구현을 시작해야 한다고 생각했다
그래서 대강 레이아웃을 끝내고(디테일한 부분은 나중에 하려고 생각하고) 기능 구현을 바로 시작해서 아직 ERD 구상 중 일때부터, BE 팀원 분들께 자료구조 어떻게 되는지?, 키값 어떻게 사용할 것인지? 자꾸 물어봤던거 같다...

재촉을 하지는 않았지만, 시작 할 때부터 요청을 해서 스트레스를 드린거 같아 죄송했던 부분이였고... 내가 맡았던 페이지 레이아웃 전부를 디테일한 부분까지 끝내놓고 협의을 해도 되는 부분이였다고 생각이 들어서 나 스스로 아쉬웠던 부분이다

그래도 BE팀원분들이 너그러이 이해해주셔서 너무 감사했던 프로젝트 기간 이였다

2차 팀 프로젝트에서는 내가 담당한 페이지의 레이아웃을 모두 끝내놓고 기능을 구현하면서 데이터 구조나, 키값들을 서로 협의 하도록 해야 되겠다

Agile

프로젝트 진행하면서 처음 팀원끼리 planning meeting을 할 때, 애자일하게 진행하자고 말씀을 해주셨는데, 처음엔 애자일의 뜻은 알고 있었지만 어떻게 애자일하게 해야되는지 몰랐었고, 기능 구현만 생각하면서 이것 저것 동시에 진행 했던거 같다

그래서 나중에 이 기능 저 기능 동시에 완료하고 여기저기 테스트 진행했기 때문에 애자일한 방식으로 진행하지 못한거 같아 나의 작업 방식에 대해서 아쉬웠던 부분이다

2차 팀 프로젝트에서는 기능 추가 작업마다 끈어서 결과물을 내는 방식으로 진행하도록 노력해야 겠다.

Trello 사용

트렐로를 사용해서 프로젝트 진행상황이나, 필요한 것들을 공유하였었는데, 프로젝트가 끝나고 생각해보니까 트렐로를 잘 안보고, 말로 많이 물어봤던거 같다.
트렐로에 나와있는 부분들도 트렐로를 잘 확인하지 않고 물어봤던거 같고, 다른 사람도 나한테 필요한 정보가 있었을텐데 그걸 트렐로에 잘 공유하지 못했던거 같아서 아쉬웠다.

2차 팀프로젝트에서는 내가 공유할 내용을 트렐로에 올리고 물어보기 전에 트렐로를 확인해보고 없으면 물어보는 방식으로 진행해보려고 한다.

코드

기능 구현에만 급급해서 코드가 깔끔하지 않았던거 같다.
중간중간 팀원분들 코드도 보고, 다른 팀 코드도 봤었는데, 확실히 가독성이 좋은 코드들은 이해하기도 쉽고, 내가 다른 사람의 코드를 수정해야 할 일이 있을 때, 어떤부분을 바꿔야 되는지 쉽게 알 수 있을거 같았다

시간이 더 있었다면 리펙토링을 통해서 코드의 가독성을 높였을텐데.. 라고 생각하기도 했지만 처음 코드를 작성할때부터 클린하게 코드를 작성하는 역량이 꼭 필요한거 같다

꼭 시간을 내서 리펙토링을 하고
코드를 작성할 때 어떻게 작성해야 깔끔하게 작성이 될지에 대한 많은 고민을 해야 될거 같다

후기

프로젝트 진행해보면서 여러가지 막막했던 것들이 조금 보이기 시작했던거 같다.

내가 아는걸로 어떻게 사이트가 만들어질까? 했던것들이 하나하나 완성해가다보니까 하나의 사이트가 나왔던거 같고,
내가 아는걸로 이런저런 데이터들을 어떻게 다룰수 있을까? 걱정 했던 마음이 하다보니까 익숙해지고, 개념들을 알아가면서 조금이나마 이런식으로 하면 되겠구나 했던 마음이 생겼던거 같다
내가 그동안 배웠던것들을 이것저것 사용해보면서 결과물을 만들어내니까 정말 재미있게 했던거 같다

기본적인것부터 내가 가장 어려웠던 부분까지 전부 적용해보면서 지나쳤던 기본적인 개념들이 왜 중요한지 알게 되었던 적도 있고(truthy, falsy), 어려웠던 개념이 어떤상황에서 사용되는지도(lifecycle) 알게 되었다 그래서 마음껏 적용해보고 지우고 해보면서 너무 재미있었다.
위의 내용을 적다보니 아쉬웠던 점이 많았는데, 프로젝트 해봤기 때문에 이런 아쉬웠던 점을 느끼고 알 수 있었던 것 같아서 좋았다.

이런 아쉬웠던 점들을 앞으로 하나 둘 고치고, 배웠던 점, 좋았던 점으로 바꾸면 나 스스로 더 발전 할 수 있는거니까 아쉽지만 좋았던 점이 였던거 같다