Today I learn..."1차 프로젝트 회고록"

mr.ginger·2021년 6월 20일
1

1차 프로젝트를 돌아보며

말도 많고 탈도 많았고, 끝날듯 끝나지 않던 1차 프로젝트가 마침내 그 끝을 맞이했다.

결코 길지는 않은 시간이었지만, 이제 막 개발자를 시작하게 된 나로서는 하나를 붙잡고 진행 된 2주란 시간은 아직 짧은 시간이라 느끼지 못하는 시간이었다.

어떤 프로젝트였나?

우리가 담당한 클론 대상 웹사이트는 오아시스 마켓이라는 커머스 사이트로, 사실 눈여겨 보던 사이트는 아니었다.

관심이 없었다기보다는 애당초 첫 프로젝트였기에, 어떤걸 해야겠다 하는 생각 보다는, 뭐라도 괜찮으니까 열심히 하자라는 생각이 더 앞섰다고 생각한다.

나는 프론트엔드 팀으로 참가 했기에, 리액트를 활용하여 웹사이트의 레이아웃과, 사용자가 조작할 버튼, 혹은 컨텐츠를 제작하는 역할을 맡았었다.

어떤 기능을 맡았나?

내가 맡은 페이지는 우선 페이지의 상단과 하단에 있는 HeaderFooter를 1차적으로 담당했고, 그 이후엔 메인 페이지에서 각각의 상품을 클릭 했을때 넘어오는 상세페이지, 그 다음엔 장바구니 페이지를 담당 했었다.

사실 HeaderFooter 자체는 복잡한 로직이 없었기에 꽤나 수월하게 작업을 끝마칠 수 있었고, 상세페이지쪽의 로직도 크게 복잡하지는 않았다.

문제는 장바구니였다.

어떤 문제가 발생하였나?

프로젝트가 끝난 지금 생각 해 봤을때, 생각보다 로직이 어려웠다는 생각이 가장 먼저 들었다.

실제로 이 부분에서 멘토님들께 여러가지 도움 요청을 했던것도 사실이고, 구현이 어려웠다 이전에, 아예 어떻게 구현 해야 할지 감도 안잡히던 부분도 있었다.

어찌저찌 문제를 해결하고 완성 했을때는 꽤나 뿌듯함을 느꼈다.
처음엔 막막했지만 그래도 어떻게든 해냈구나 하는 기분이 들었다.

물론 그렇게 어렵게 짠 코드였기에 마지막까지 로직적으로 큰 문제를 일으키지도 않고 잘 작동 되었으니, 더욱 기억에 남는 페이지가 될것 같다.

장바구니에 대한 코드 리뷰는 다음 포스트에서 작성 할 예정이다.

이번 프로젝트에서 기억에 남는 잘한 점은?

코드에 대한것보다 팀원들과의 협업에 대해 이야기 하고 싶다.
사실 팀원들이 너무 잘 해줘서 내가 잘한점 보다는 팀이 잘 한 점이 더 맞을것이다.

일단 첫번째로, 전반적인 팀의 분위기는 정말 좋았던것 같은 느낌이 든다.
세상에 무조건 맞는 성향의 사람이 있는것도 아니고, 언제나 같은 기분으로 있는 사람도 없다.

이번 프로젝트에서 우리 팀원들은 크고 작은 다툼도 없었고, 서로가 소통이 잘 되었다 라고 말할 정도로 서로에 대한 분위기나 감정은 좋은 상태였다.
이 점은 정말 운이 좋았고, 거기에 맞춰 함께 열심히 소통한 나도 잘한 점이 아닐까 한다.

두번째로는 여러가지 툴의 사용에 익숙해진것이다.
팀에서 git등을 다루는것을 대부분 내가 맡았고, 그 덕에 처음 느꼇던 git에 대한 두려움도 사라졌고, 프로젝트시 어떻게 git이 흘러가는가, 충돌이 발생 했을때 어떻게 대처해야 하는가 등에 대해 많이 익숙해진것 같다고 느꼈다.

그저 공지만 기다리던 slack도 마침내 툴처럼 활용 되어, 여러 자료를 받거나 보내거나 하고, 밤이나 주말등에 팀원들과 연락하면서 이것저것 처리 할때 유용하게 활용 되었다.

프론트, 백에서 각자가 맞춰야 할 사항등을 Notion등에 정리한것도 잘 한 일이 아닌가 싶다.

세번째로는 코드의 대한 점이다.
새로운 로직을 생각해내거나 솔루션 받은 패턴을 다른곳에 응용 시켜본것도 물론 좋지만, 저번 인스타그램 클론때 새롭게 배운 코드들을 이번 프로젝트에서 꽤나 자연스럽게 사용했던것이 이번 프로젝트때 코드 면에서 얻은 가장 큰 수확이라 생각한다.

이번에도 꽤나 많은 코드가 등장했고, 그걸 다음 프로젝트때도 잘 활용 할 수 있었으면 좋겠다.

아쉬운 점, 반성할 점은 무엇인가?

가장 아쉬웠던 점은 의외로 소통에 있었다.
기록 하는 습관이 들지 않아 회의때 이야기가 나오고 이미 정해진 상황에 대해 몇번인가 나중에 되물은 적이 있었기 때문이다.
그덕에 메모하는 습관이 들기 시작하였지만, 아쉬운점이 아닐 수 없다.

그 다음은, 디버깅에 대해서다.
발표 전날 밤에 에러를 발견한것이다. 팀원들이 모두 달라 붙어 해결 하려 노력해서 발표는 어떻게 잘 끝났지만, 이 글을 쓰고 있는 일요일 밤까지 디버깅은 계속 되었었다.

디버깅 자체가 시간이 걸리는건 어쩔 수 없다고 생각하지만, 앞으로는 조금 더 시간 안배를 잘 해서 디버깅에 관한 시간을 확보 해야겠다고 생각했다.

다음은 나 자신에 대한 반성인데,
완성품을 봤을때, 내가 처음에 만들려고 했던 기능보다 적게 구현 했다고 느꼈다.
백엔드쪽에서 먼저 구현한것도 있었는데, 내가 조금 더 빨리 기능을 구현하고 그 기능으로 넘어갔으면 충분히 구현이 가능하다고 생각 했던 것이었다.
때문에, 더 잘 할 수 있지 않았나, 정말 이게 최선이었나 하는 생각이 들었다.

또 느낀것은, 실무에서는 이것보다 더 복잡하게, 더 타이트하게 개발이 이루어 질 것인데, 거기에 내가 적응 할 수 있을까 하는 생각이 들었다.
그때를 위해서라도 더 많은 공부와, 체력을 키워야 겠다는 생각이 들었다.

하고 싶은 말

이것저것 하고 싶은 말은 프로젝트가 끝난 뒤 회식때 다 이야기 했던 기분이 든다.
내가 말하고 싶은 한마디는, 모두가 고생한 프로젝트이고, 이번 프로젝트를 발판 삼아 더 나은 개발자로 가는 길을 각자가 찾았으면 좋겠다 라는 말을 하고 싶었다.

총평

칭찬할 점도, 아쉬운 점도 분명히 많은 프로젝트였고, 냉정하게 봤을때 만족스러운 프로젝트는 아니었다 생각한다.

하지만 다음 프로젝트를 위한 발판은 확실히 만들어졌다고 생각한다.
오히려 잘한 점도 아쉬운 점도 많은 프로젝트이기에, 이 다음 프로젝트, 그리고 더 나아가 실무에 나가서도 내가 어떻게 행동해야 하는지에 대한 하나의 실마리를 얻은 듯한 기분이 든다.

사람은 잘한 일보다 아쉽고 반성 할 일을 더 오래 기억하는 생물이기에, 나를 위한 더 큰 과제를 남겨주었다고 생각한다.
또한, 내가 어떤 개발자인지, 어떤 방향을 선호하고 나아가고 싶은지에 대한 과제도 받은것 같은 느낌이 든다.
그 과제를 어떻게 풀지는 앞으로의 내가 담당하게 될것이다.

아래는 우리가 담당했던 프로젝트의 README.md파일이다.

🌽 O Jus Maket (오져스 마켓) Team

개발인원 (7명)

Frontend | 김명준, 김민기, 이기완

Backend | 박준영, 박지우, 장동국, 현상협

"소통은 무조건 중요하다! 사랑해요 오저스마켓팀" - ojusmarket -

개발기간

2021.06.07 ~ 2021.06.18


✔오아시스마켓 클론 프로젝트 선정이유

커머스사이트의 다양한 회원가입, 결제, 배송 서비스들이 실제 구현되어있는것에 도전의식을 느꼈고,

레시피가 제공 될 뿐만아니라 레시피에 사용된 제품추천 기능 모델링에 호기심을 느끼며 직접 구현 해 보고자 선정하게 되었습니다.

✔️오저스마켓 프로젝트 소개

오아시스마켓의 깔끔한 디자인과 서비스를 변형하여 클론한 "오저스마켓" 입니다!

오아시스 마켓이 제공하는 판매상품들로 적용할 수 있는 레시피의 연결성에 주목하였고, 메인페이지에서 “주문도하고 요리도하고” 탭을 추가적으로 구현하여 기존 오아시스마켓과 서비스기획의 중점을 달리하여 클론하였습니다.

결제서비스를 제외한 영상에서 보이는 부분들은 모두 실제 사용할 수 있는 서비스 수준으로 초기세팅부터 백앤드 연결까지 구현하였습니다.

🔎 적용 기술 및 구현 기능

적용 기술

  • HTML
  • SASS
  • JS
  • React

로그인/ 회원가입

  • 정규표현식사용하여 유효성검사 적용
  • fetch 받은 데이터를 이용하여 아이디 중복체크검사 적용
  • 카카오 POST API를 사용하여 주소창 구현

메인페이지

  • 배너 자동 무한 슬라이더 구현
  • 캐러셀 기능 추가
  • Advanced Router를 통해 카테고리 변경 (Query Parameter 사용)

상세페이지 (제품,요리레시피)

  • 상세정보를 fetch메소드로 전달받아 상세페이지 구현
  • 동적 라우팅 (Path Parameter 사용) 으로 리스트페이지와 연결

장바구니

  • map 함수와 spread-operator를 사용, 상품 데이터의 수량 변경 기능 구현
  • spread-operator와 map, filter, Array메소드를 적절히 사용하여 물품 선택, 삭제 구현
  • filter를 사용하여 백엔드에 보낼 삭제된 물품 데이터와 view에 비출 남은 물품들의 데이터를 분류

배송지페이지

  • 유저의 주소정보를 fetch 받아 기본배송지 구현

결제페이지

  • 장바구니로 부터 location.state로 데이터를 전달받아 구매 목록 구현
  • 구매자의 배송지 와 총 구매가격을 구매자에게 알려주는 UI구현

Reference

  • 이 프로젝트는 오아시스 마켓 사이트를 참조하여 학습목적으로 만들었습니다.
  • 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
  • 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.

1개의 댓글

comment-user-thumbnail
2021년 6월 20일

1차 프로젝트 고생많았어요 밍기님~~ 다음 2차 프로젝트도 힘내봐요! 장바구니 코드 잘 참고했습니다 감사합니다!!

답글 달기