1. 주제
- 영국의 욕실, 바디 위주의 화장품 제작, 판매 브랜드인 러쉬(LUSH) 코리아 웹사이트 클론 프로젝트
- 위코드에서 git, react, django 를 활용한 첫 그룹 프로젝트
- 개발 기간 (2주, 2020.6.22 ~ 2020.7.3)
- 개발 인원 (6명, front-end 3명, back-end 3명)
2. 적용 기술
- React.js (Class형 컴포넌트), JavaScript(ES6), sass, git, Slick.js 등
3. 구현한 주요 기능 (bold 되어 있는 부분이 직접 구현한 기능)
- 회원 가입, 로그인
- 제품, 스파, 매장 등의 리스트 페이지
- 제품 상세 페이지
- 메인 페이지
- 장바구니 페이지
- Nav bar, Footer
- 마이페이지내 배송지 관리 페이지
- 사이트 구현 영상 링크 https://youtu.be/J5wqvOV3fKU
- git hub 주소 - https://github.com/wecode-bootcamp-korea/9-rush-hour-frontend
4. 담당했던 부분 중 특히 신경썼던 부분
- Nav bar hover시 나오는 드롭다운 메뉴, modal 창
- 메인 페이지 슬라이드
- 배송지 관리 페이지에서 fetch함수를 사용한 back-end와의 API 통신 (아쉽게도 마지막 작업 중 코드가 날아가게되어 최종 구현이 되지 않았다.)
5. 기억하고 싶은 코드
- Nav bar에 드롭다운 메뉴 이벤트 적용
- 각 메뉴에 해당하는 컴포넌트들을 만들고 onMouseOver, onMouseLeave, onClick 이벤트를 이용하여 마우스 hover시 드롭다운되는 메뉴와 클릭시 나오는 modal 창을 구현하였다.
처음 코드를 작성했을 당시 각각의 컴포넌트에 적용되는 이벤트들을 개별적인 함수로 만들다보니 코드가 쓸데없이 길어지게 되었는데 activeTab 이라는 state를 활용하여 각 이벤트마다 id라는 인자를 넘겨주어서 모든 드롭다운, 온클릭 메뉴들을 두개의 함수로 구현하게 되었다. (console.log를 삭제하지 않은 점은 반성...)
- 배송지 관리 페이지 API 연동
- 처음으로 백엔드 API와 연동을 해본 작업이기에 기억에 남는다.
POST 방식으로 주소지 data를 DB에 전송한 후 배송지 등록 창이 닫히고 곧바로 저장된 data를 불러와 list에 노출되도록 하였다. (배송지 등록 창의 on/off는 onClick 이벤트로 구현하였다.)
프로젝트 발표를 앞둔 당일에 급하게 작업을 하게 되어 보완해야할 점이 있었지만 미처 하지 못했던게 가장 아쉽다. 처음으로 내가 보낸 데이터가 저장되고 가져온 데이터가 화면에 노출된다는 것이 매우 인상깊었다.
기억에 남는 코드를 따로 적긴 했지만 내가 직접 입력했던 모든 코드 하나하나가 다 인상깊었고 소중하다. 내가 작성한 코드가 화면에 표현되고 작동하는 것을 볼때의 기분은 정말 어떠한 말로도 표현할 수 없다.
이렇게 개발자가 되어 가는 것인가 싶다...
6. 느낀 점
- 잘한 점
- 팀원 모두 서로 배려하는 마음을 가지고 서로의 속도에 맞춰주려 노력했고, 서로의 작업물에 감탄했고, 칭찬해주는 분위기가 있었기에 프로젝트가 완벽하지는 않더라도 순탄하게 나아갈 수 있었던 것 같다는 생각이 든다.
- 그동안 연습 삼아 작성해보고 공부해왔던 코드, 이벤트 등을 직접 사용해볼 수 있었던 점이 신기하고 기뻤다. 개인적으로도 css와 react에서의 이벤트 handler 를 이용하는 것에 있어 프로젝트를 하기 전에 비해 한층 성장했다고 생각한다. (아직 멀었지만...)
- 슬라이드를 적용하면서 라이브러리라는 것을 처음 사용해보았고 실제 코드에 라이브러리를 어떻게 적용하는지에 대해 많은 것을 배울 수 있었다.
- 못한 점
- 많이 소극적이였다. 프로젝트를 시작하면서부터 끝날때까지 스스로의 능력에 대한 의심이 끊이질 않았고 그로 인해 자신있게 나서서 팀을 이끌거나 임무를 수행하지 않은 것에 대해 반성한다. 다음 프로젝트에서는 못했던 부분들을 최대한 많이 맡아서 진행해보고 싶다.
- 맡은 임무가 빠르게 끝나지 않아 팀원들을 기다리게 하는 경우가 있었다. 다음 프로젝트를 진행하게 되면 이러한 부분을 개선하기 위해 꾸준히 노력할 생각이다.
또한 효율적이고 유동적인 업무 분배를 위한 팀원들 간의 조율이 더 필요할 것 같다.
7. 마지막
프로젝트를 진행하면서 블로그도 소홀해지고 체력관리도 제대로 되지 않아 힘든 부분들이 있었다.
그렇지만 프로젝트를 진행하면서 그동안 부족했던 부분들을 많이 배울 수 있었고 개발자로서의 역량이 아주 조금은 성장했다는 것을 느낀다.
앞으로 개발자로서의 여정에 있어 이번 프로젝트가 분명 첫걸음마 정도겠지만 시작이 반이라는 말을 생각해보면 나는 그 절반의 첫걸음을 조금은 성공적으로 내딛었다고 생각한다.
함께 작업한 팀원 분들에게도 모두 감사하고 많은 도움을 주신 멘토분들께도 이 글을 통해서 감사하다는 말을 전해본다.
프론트 앤드 개발자를 꿈꿉니다.