사이드 프로젝트 - 편집샵 quatre-foil 회고

🍀 프로젝트 소개

부트캠프에서 쇼핑몰 팀 프로젝트를 진행했던 적이 있다. 그때는 바닐라 자바스크립트 커리큘럼을 갓 마쳤을 때라 리액트로는 프로젝트를 진행할 수 없을것 같다는 동료들과의 토론 후에 자바스크립트로 진행했다.

바닐라 자바스크립트로 구현하며 엄청난 하드코딩을 했던 기억이 난다. 라우팅도 어떻게 되는 것인지 몰랐고 화면 위에 화면을 쌓아 안보이게 해뒀고 막 그랬다. 거의 퍼블리싱을 위주로 했었다. 그때의 나는 스스로 1인분도 잘 해내지 못했다고 생각했기에 죄책감, 찝찝함 등 좋지 않은 어떤 것이 남아있었다.

그래서 다시 한 번 만들어보기로 했다. 강사님이 만들어 놓으신 서버는 여전히 사용 가능해서 완전히 새로운 쇼핑몰을 만들어보기로 했다. 어떤 쇼핑몰을 할 것인지 이름은 뭘로 할 지 한참을 설렜었다.

하지만 저 설렘은 벌써 어언 4개월 전의 일... 부트캠프 중에 계획된 사이드 프로젝트였고 부트캠프에서는 계속 팀 프로젝트 과제가 주어졌다. 아무래도 사이드 프로젝트다 보니 우선 순위가 조금씩 밀려서 손을 놓고 있었던 기간이 있어 프로젝트 기간이 엄청나게 길어졌다. 더 이상은 미룰 수 없었기에 이제 마무리를 지었다. 하지만 자잘한 버그들🐞이 보여 수정은 더 필요할 듯 하다.

라이프스타일 편집샵 quatre-foil

• 팀 프로젝트 : 프론트엔드 2명
• 개발 기간 : 2023.1.15 - 2023.5.9
• quatre-foil
  • 레포지토리
  • 배포 주소 ( test ID : test@quatrefoil.com / test PW : test1234 )
• quatre-foil admin
  • 레포지토리
  • 배포 주소

🚀 KPT

keep

1. 하면 된다.
   처음 과제할 때 너무 어려웠던 기억에 이번 프로젝트 잘 할 수 있을지 처음에는 걱정도 됐다. 하지만 똑같은 api를 사용하는데 이번에는 '할 만 한데?!' 하는 생각이 들었다. 첫 과제가 12월. 나는 2개월 만에 제법 성장했다. 의심하지 말고 계속 열심히 공부하자!

2. 한 싸이클을 또 끝내보다.
   프로젝트 설정부터 배포까지의 한 싸이클을 또 완료해 봤다. 사이트 색은 뭘로 할지 어떤 기술 스택을 사용할지 아무것도 없는 0에서 마음대로(어느정도..마음대로..) 이렇게 뚝딱뚝딱 만들어 뭔가 완성된다는 게 여전히 신기하고 재밌다. 다음 프로젝트는 뭘 해볼까 생각도 이미 마쳤다면..😋

3. mobile first design
   요즘은 많은 사람들이 어쩌면 데스크탑, 랩탑보다 모바일으로 웹서핑하는 시간이 더 길지도 모르겠다. 특히 쇼핑몰의 경우에는! 작은 화면에서 큰 화면으로 구현 하는 것이 쉽다고 하여, 모바일 화면일 때부터를 먼저 생각하여 개발했다. 앞으로도 어떤 서비스이냐에 따라 mobile first design을 하면 좋을 것 같았다.

problem

1. 2% 부족한 기획
   만들어져 있는 api를 사용하기만 되어서 어떤 기능을 구현할 지는 거의 다 나와있었다. 하지만 '만들다 보니 부족해서', '만들다 보니 필요할 것 같아서' 추가한 기능도 있다. 그렇게 덧붙이다 보니 데이터를 새로 받아 가공해야 할 경우도 있었고, 아예 처음부터 새로 손을 봐야 할 때도 있었다. 처음부터 잘 생각했더라면 하는 아쉬움이 남는다.

2. 에러? 에러!
   잘 작동할때만 생각했기에 신나게 개발했는데, 갖가지 데이터를 마주하자 에러도 가지각색으로 마주할 수 있었다. 처리도 다 다르게 해주어야 해서 너무도 비효율적이었다. 다룬 글
   이 외에도 많은 에러를 만났고 고민을 했으나 제대로 글을 다 못남긴 것이 아쉽다.

3. milestone? 어라..? 나 왜 눈물이..?
   애초에 프로젝트 기간은 한 달로 정했지만 이런 저런 변명이 더해져 기간이 엄청나게 길어졌다.

try

1. 기획은 무조건 꼼꼼히
   아무리 꼼꼼히 한다고 해도 100% 일 수 없겠지만, 최대한 그 근처까지는 가보려고 노력하기.

2. 있었는데요? 없었습니다.
   이번 쇼핑몰을 예로 든다면, 주문 목록이 없다거나, 계좌 목록이 없을 때 어떻게 화면에 나타낼 지 먼저 생각해보기. 분기처리를 잘 한 코드를 쓰기. 그리고 글로 남기기.

3. 시간은 금이다
   설정한 프로젝트 배포 날을 꼭 맞출 수 있도록...! 일정 관리를 잘 해보기.

🙏🏻 느낀점

애착이 많이 가는 프로젝트. 아마 첫 번째 도전에서 많은 좌절감을 느껴서 그랬을지도🥲.. 바닐라 자바스크립트를 사용했을 때 일일이 돔 조작을 해줘야 하는 점, 힘들었던 라우팅 처리 등을 리액트를 사용함으로써 너무도 쾌적하게 개발이 가능하다는 점에서 다시 한 번 리액트는 진짜 대단하다는 것을 느낄 수 있었다..! 적절한 라이브러리를 사용하며 간결하고 명확한 코드를 쓸 수 있어서 그것도 좋았다. 더 많이 공부하고 배워 연습하면 더 효율적인 코드를 쓸 수 있을거란 생각에 더 많이 성장하고 싶다는 생각을 했다.

여태까지 내 회고는 리드미와 회고 그 어디쯤.. 이었던 것 같은데 KPT 방식으로 작성해보니 내가 부족했던 것은 무엇이었는지 또 앞으로 어떻게 개선해야 할 지가 잘 보였다. 앞으로도 화이팅🔥