배민문방구 | 1차 프로젝트 최종 후기

지난 2월 15일 월요일부터 2월 26일 금요일까지 진행했던 1차 프로젝트 - 배민문방구 클론코딩이 무사히 끝났다. 위코드에 다니기전에는 정말 코딩에 대해서 1도.. 단 1도 모르던 내가 6주만에 한 사이트를 통째로 클론코딩하는 프로젝트를 할수있을것이라고 생각치도 못했는데 내가 그래도 많이 성장했구나,,,를 알수 있었던 프로젝트였던것 같다.

클론코딩하는 사이트 🌈

배달의민족에서 운영하는 배민문방구가 당첨 되었다! 깔끔한 UI와 심플한 기능이 돋보인는 배민문방구는 1차프로젝트로 하기 딱 적합한것 같다는 생각을 했다. 지금까지 배웠던것을 복습하고, 내가 원하는대로 더 응용해서 적용할수 있는 요소들이 많았던것이 좋았다.

200문방구 🌈

백앤드 세명, 프론트 세명으로 구성된 우리팀은 일주일차에 필수구현을 최대한 끝내고, 이주차에는 추가구현 및 필수구현 리팩토링을 위주로 진행하기로 결정했다. 프론트에서 구현한 UI와 기능들은 다음과 같다. (내가 구현한 페이지들은 🍎 표시를 해놨다)

프로젝트 기간

2021.02.15 ~ 2021.02.26 (총 12일)

프론트앤드 기술스택

• React
• React Router
• SASS
• Restful API
• React-slick / React-slick-Carousel
• React-datepicker
• React-daum-postcode

구현한 페이지

• 회원가입 페이지
• 로그인 페이지
• Navigation Bar🍎 (+동적 라우팅 기능)
• Footer🍎
• 메인 페이지🍎
• 상품 리스트 페이지 (+필터링 기능)
• 상품 디테일 페이지
• 장바구니 페이지🍎
• 결제 페이지🍎
• 마이페이지 - Nav Bar, 메뉴탭
• 마이페이지 - 메인🍎
• 마이페이지 - 주문목록🍎
• 마이페이지 - 리뷰 모달창

내가 구현한 페이지 결과물

(각 중요 페이지에 대해 쓴 후기를 제목에 링크 걸어둠!)

- Navigation Bar 🍎

- 메인페이지🍎

- 장바구니 🍎

- 결제페이지 🍎

- 마이페이지 🍎

기억하고 싶은 코드 🌈

가장 기억하고 싶은 코드는 무조건 장바구니의 체크박스 코드다. 진짜 가장 많은 시간을 투자했고 가장 많은 기능들이 들어가 있다고 생각한다. 장바구니 페이지를 구현하면서 내가 레벨업하는게 느껴졌다 🤩 내가 원하는 기능을 구현하기위해 구글링하고, 또 구글링하고, 다른 사람들에게 자문도 구하고, 또 구글링하고, 이것저것 다 시도해보고 결국 해내었을때 기분은 정말 너무 좋았다.

개인적인 프로젝트 후기 🌈

여러가지 복합적인 감정들이 들었던 프로젝트였던것 같다. 내가 무엇을 구현할수 있는지 전혀 모르는 상태에서 시작했고 어떤 conflict를 마주하게 될지 몰랐기때문에 초기 목표를 최대한 현실적이게 잡으려고 노력했다. 팀원 모두에게 첫 프로젝트이기 때문에 굳이 목표를 100으로 잡고 하나하나 제대로 짚지 않고 90까지 후다닥 성공 시키는것보다 목표를 50까지 잡고 80까지 깊이있게 성공시키는게 더 맞다고 생각했던것 같다. 결과적으로 말하자면 개인적인 목표를 80까지 잡았고 90정도까지 성공 시킨것 같아서 꽤 성공적인 프로젝트였다고 할수 있는것 같다.

이번 1차프로젝트를 통해 하나의 웹사이트가 구축이 될때 어떤 기능들이 어떤식으로 구현되는지 더 알게되었고 백앤드와 프론트앤드가 어떤식으로 조율하고 어떤식으로 소통해야하는지 알게되었다. 우리팀 같은경우에는 개인적으로 소통이 굉장히 잘된팀이라고 생각한다. 처음 팀이 만들어졌을때는 거의 대부분 인사말고는 말을 해볼 기회가 없었던,,,,분들이랑 팀을 하게되었지만 진짜 거의 2주동안 가족보다 더 많이 보고 그 누구보다도 같이 밥을 많이 먹어서 그런지 한 배를 탄 기분이 들었다 ㅋㅋ 그냥 이분들과 같이 팀을 하게 되면서 2021년 운을 다 쓴건가..?! 싶을 정도로 운이 좋았다 + 좋다 ~ 🥳 라는 생각을 더 했던것 같다. 2주동안 다 같이 배우는 입장이기때문에 정말 많은 얘기를 서로 거리낌없이 했던것 같고 그러면서 서로 배우는점이 많았을꺼라고 믿는다...!

아쉬웠던점 👻

개인적인 모토가 후회하지말자!여서 과거를 뒤돌아보면서 후회하며 스트레스받진 않지만 굳이 아쉬웠던점을 꼽고 나중에 이렇게하지 말아야지!라고 생각한것이 있다면 초기세팅을 꼼꼼히하지 않은것이 아쉬웠다. 우리팀은 초기세팅에서 eslintrc와 package-lock.json때문에 고생한 몇몇팀들중 하나였고, 결국 마지막까지 merge를 할때마다 문제가 발생했다 ... 다음번에 프로젝트를 할때는 팀원들과 함께 초기세팅을 더 꼼꼼히해서 .scss 같은 경우에도 SASS의 기능들을 더 많이 사용하면서 코드가 더 가독성이 좋고 간결하게 만들려고한다.

좋았던점 👍

우리팀 포함, 모든 팀의 프론트분들이 진짜 많이 힘들어했었다 ... 백앤드에 비해 숫자가 적은만큼 백앤드 팀원들이 구현해내는 데이터에 맞출려면 정말 각자 최소 1.5인분은 했어야해서 3시가 넘어가는 모각코에는 프론트분들만 남은날이 정말정말 많았고 날이 가면 갈수록 프론트분들이 너무 피곤해보였다 ... 그런데도 불구하고 각자 본인 프로젝트가 바쁜 와중에 내가 이팀 저팀 이것저것 물어보러 다니면 진짜 열심히 가르쳐주셔서 너무 고마웠다. 정말 내가 구현한 모든페이지에 각 팀의 프론트분들의 도움이 다 깃들어져있다 🙌 다 함께 배우러온 입장이니만큼 경쟁자로써 서로를 견제하는게 아니라 다른분들과 얘기하면서 하나라도 더 배우고 하나라도 더 지식을 나눔하려고 하는 동료들이 있다는게 너무 좋았던것 같다. 🙏

최종 후기 🤖

6주전에 위코드에 다니기전에는 진짜 코딩에 대해서 1도 ... 단 1도... 진짜 1도 모르던 내가 한사이트의 UI와 기능들을 구현할정도로 많이 성장했구나~를 체크할수 있었던 프로젝트였던것 같다. 마지막날전까지는 새벽 4시전에 잔적이 없었을정도로 과몰입,,을 하면서 미친듯이 달렸던것 같다... 지금까지 대학이나 회사의 많은 그룹 프로젝트들을 진행해왔지만 끝나고 이렇게 후련하고 아쉬움이 하나도 안남았던 프로젝트는 처음인것 같다 ㅋㅋ 프로젝트를 시작하기전에 같이 일하고 싶은 팀원, 같이 일하면 편한 팀원, 다가가기 편한 팀원이 되고싶어서 정말 많이 노력했는데 내 노력이 팀원분들에게 닿았길 바란다..ㅋㅋ 🙏 매일매일 열심히 해준 팀원들에게 너무 고맙고 다들 2차프로젝트때는 본인이 더더욱 만족할만한 결과물을 내길 바란다 ❣️