내 인생에서 개발자로서 첫 프로젝트를 마쳐서 감격스러운 마음으로 회고록을 작성해보고자 한다.
우선 같이 프로젝트를 진행하며 많은 고민과 문제 해결을 함께해준 팀원들에게 감사의 마음을 먼저 전한다.

Nonfiction Clone Coding

• 서비스 소개 : 심플하고 모던한 디자인으로, 고유한 향을 바탕으로 다양한 카테고리의 제품을 판매하는 e커머스 웹사이트
• 필수 구현 사항 : 회원가입/로그인, 상품 목록, 상품 상세, 장바구니, 상품 검색, 메인 페이지 애니메이션
• 추가 구현 사항 : 리뷰, 반응형 페이지, 스토어 지도 기능, 한/영 페이지 전환
• 구성 인원 : Front-end 4명 Back-end 2명

사용된 기술

• React UI Framework를 활용한 Component 계층 구조 디자인 (class로 정의된 component, state/props 사용)
• Component Life Cycle 관련 메소드 활용
• JavaScript ES6 문법 사용
• CSS Preprocessor인 SCSS 활용 (Nesting, Ampersand)

내가 맡게 된 역할

웹사이트의 상품 리스트 페이지를 맡게 되었다.

• 전체 상품 리스트 페이지
• 모달창
• 모달창 내 select option 선택 및 mini 장바구니 구현

❗️Cooperate (프로젝트 협업 경험)

프로젝트에 들어가기 전에, 이전 직장에서 해외영업을 하면서도 소속된 팀 내에서 팀에 할당된 매출을 채우기 서로 의지하며 으쌰으쌰했던 기억이 생각났다. 그렇지만 실제 개발자로서 처음 프로젝트를 진행해보니 비슷한 점도 있었지만 새로웠던 부분도 있었다!

우선 제일 큰 차이점은 이전에는 계속 봐왔던 팀원들과 계속해서 같은 목표를 향해 나아갔다면, 이번 1차 프로젝트는 이전에는 같이 협업한 적이 없었던 사람들과 같이 프로젝트를 하게 되었다는 것이다. 누군가는 '그게 뭐 어때?'라며 사소하다고 생각할 수도 있지만, 나에겐 이것부터가 첫 관문이었다. 우선 팀 분위기가 좋아야지 프로젝트를 하면서 더욱 좋은 시너지가 발생한다고 생각하기 때문이다. 그래서 먼저 팀원들에게 다가가려고 노력했고, 가끔씩은 사소하게 커피나 군것질 거리를 사서 같이 먹으며 분위기를 cool-down 시키며 즐겁게 프로젝트를 하려고 했던 것 같다. 지금 돌아보면 확실히 모든 팀원들이 이번 1차 프로젝트를 회상하면서 서로 의견 충돌 없이 분위기 좋게 마무리했다고 얘기한다. (우리팀 짱짱 👍🏻👍🏻) 처음에 '프로젝트에서 내가 맡은 부분을 과연 잘 구현해낼 수 있을까?' 걱정이 되었지만 기한 내에 맡은 부분을 팀원들과 함께 잘 구현해내서 내 자신이 대견스럽기도 했다. 혼자 했다면 할 수 없었을지도 모르지만 팀으로 같이 개발을 해서 그런지 좋은 시너지와 협업으로 이뤄낸 결과라고 본다.

이번 프로젝트를 진행하면서 아쉬웠던 점은, 모두가 첫 프로젝트이다 보니 각자 할 일에 너무 바빴고, 서로의 blocker를 공유를 잘 못했던 점이다. 서로의 blocker를 각자 또는 다른 팀원이나 멘토에게 조언을 구하면서 해결을 해나갔기 때문에 전체적인 공유는 안 되었던 것 같다. (아마 프로젝트 경험이 없다보니 그랬던 게 아닌가 싶다. 다음 프로젝트에서는 조금 더 활발하게 blocker를 공유하는 습관을 들여야겠다.) 그리고 개인적으로 조금 아쉬웠던 점은, 내가 맡은 페이지를 구현하기에도 급급해서 주변 팀원들의 blocker를 해결해주지 못했다는 것이다. 만약 내가 조금 더 잘했더라면, 다른 팀원에게 조금 더 도움이 될 수 있었을텐데.. 하는 생각이 들었다. 하지만 지금의 내 실력으로는 무리인 걸 인정하고, 나만의 보폭으로 어제보다 개발 실력이 더 느는 개발자가 되어서 꼭 미래에는 프로젝트를 하면서 주변 팀원들에게도 개발적으로 도움이 되고 기댈 수 있는 사람이 되고 싶다고 느꼈다.

인상 깊었던 코드

처음에는 상품 목록을 맡게 되어서 '음.. 전체적인 레이아웃을 짜고, component 시키면 금방 되겠구나?'라고 생각했지만 그것은 나만의 착각이었다.. 상품 리스트 레이아웃을 만들고 나서 보니, 버튼을 누르면 모달창이 뜨게 만들어야 했고, 모달창에서는 option 선택을 통해 모달창 내 선택한 제품과 수량이 뜨게 만들어야 했고, 선택한 제품의 숫자 Up & Down을 통해서 가격 변경을 나타내야했다. (그래도 이전에는 레이아웃 만드는데도 오래 걸렸는데 이제는 레이아웃보다는 기능 구현을 더 중요하게 생각하고, 기능 구현을 어떻게 할지 고민하는 내 모습을 보며 점점 개발자가 되어간다는 생각이 들었다.)

Life Cycle 를 활용한 상품 리스트 페이지 구현

처음 상품 리스트 페이지로 들어갔을 때는 componentDidMount를 통해 상품 목록이 나왔으나, 다른 카테고리를 눌렀을 때 URL 주소는 바뀌는데 상품 목록이 업데이트가 되지 않았었다. 그래서 componentDidUpdate를 통해서 인자로 이전 props를 받아서 이전과 현재의 props.location.search가 다를 경우 fetch를 통해 백에도 받아온 데이터를 구현하도록 만들었다. (URL이 변경되면 업데이트를 통해 search 값이 변경되서 지금의 목록이 나타나기 때문이다.)

state와 함수를 활용한 드롭다운 구현

state 값을 false로 지정해놓고, 함수를 활용해서 button을 누를 때마다 state boolean 값을 변경되도록 만들었다. On(=true) & Off(=false) 될 때마다 각각 지정한 className에 따라 SCSS로 나타나고 없어지도록 만들었다. 추가적으로 transition을 통해 자연스럽게 나올 수 있도록 구현했다.

state, event target, if, 구조 분해 할당 활용한 미니 장바구니 구현

• state에서 option 선택된 값을 inputValue로 지정하고, 선택된 제품의 데이터를 state에 currentProduct 빈 배열에 객체로 만들었다.
• 만약 선택된 옵션이 '선택 안함'이라는 값이면 아무것도 일어나지 않도록 하고
• selectedProduct 변수에 선택한 option과 동일한 제품의 option인지 find 메소드를 통해 값을 주고
• isAlreadyExist 변수에 selectedProduct의 boolean 값을 줬다
• 그래서 만약 존재하지 않는 (처음 선택된) option 이라면 해당 제품을 불러와서 나타내고, 만약 이미 선택된 option이라면 수량을 +1 하도록 구현

미니 장바구니에 나타난 백엔드 DB에 지정된 상품 id 번호, option id 번호, 상품 수량을 fetch를 통해 백엔드에 POST 방식으로 보내줬다. (장바구니 페이지에서 내가 보낸 데이터를 백으로부터 받아서 화면에 나타낼 수 있도록 구현)

마무리

개발자로서의 첫 프로젝트여서 너무 떨리면서도 설레었던 기억이 있다. 처음에 정말 계속 '과연 잘 끝낼 수 있을까?'라는 의문이 내 마음 속을 복잡하게 했지만, 좋은 사람들과 좋은 마무리를 지었던 내 인생의 첫 개발 프로젝트로 평생 기억될 것 같다. 부족했던 내용을 잘 다듬어서 다음 프로젝트에서는 더욱 멋진 모습과 향상된 개발 실력으로 우리팀과 세상에 좋은 영향력을 끼칠 수 있는 개발자가 되도록 노력하자!! 😄