[엘리스 1차 프로젝트] 최우수상 수상! 첫 프로젝트 회고

 

2등인 최우수상 수상! 다음은 대상을 향하여

 

 24년 2월 19일 ~ 3월 1일까지 2주 간 진행했던 프로젝트가 끝이 나 미루고 미루다 드디어 회고를 작성해본다.

 약 7주간 기초부터 학습한 HTML, CSS, JS, Node.js를 활용하여 실제 웹 서비스를 제작해보는 프로젝트였다! 

 나는 처음부터 프론트엔드 포지션을 희망하여 프론트엔드를 맡게 되었다.

1. 프로젝트 시작

주제: 쇼핑몰 고정
사용 언어
 - 프론트엔드: HTML, CSS, Vanilla Javascript, express.js
 - 백엔드: node.js, express.js, mongoDB, mongoose
구성: 프론트엔드 4명 + 백엔드 2명

 

 총 인원이 6명이었던 팀은 8팀 중 3팀 뿐이었는데, 그 팀이 바로 우리 팀이 되었다...

 사실 1명이 더 있었다면 완성도를 더 높일 수 있었을 것 같은 생각이 들어 아쉽다.🥲

 

 프로젝트 기획은 프로젝트 시작 전 토요일에 틀을 잡고, 월요일에 종일 회의를 하여 완료했다.

 우리 팀 쇼핑몰은 꽃을 주제로 한 쇼핑몰을 선택하였다! 쇼핑몰 이름을 정할 때 정말 많은 이름 후보가 나왔는데, 플로라앤더(Flora & Dér)는 '꽃과 더' 라는 뜻으로, 꽃을 중심으로 다양한 아이템과 서비스를 제공하자는 의미를 담은 이름이 과반수로 채택되었다. 🌹

 

 다음 날, 프론트엔드 4명이서 각 HTML 뼈대를 완성할 페이지를 나누었고, 이를 토대로 각자 파트를 맡게 되었다.

 구현 필수 기능은 크게 사용자, 상품, 장바구니, 주문, 관리자 기능으로 나뉘었고, 이 중 나는 주문 관련 기능을 맡았다.

 

내가 맡게 된 상세 파트는 다음과 같다!

• 비회원 주문 조회

• 마이페이지 - 회원 주문 조회

• 주문하기

 

---

2. 프로젝트 진행

2주간 진행 한 스크럼과 회의록

 

 우리는 매일 10시에 모여 30분 간 각자 진행 상황을 공유하는 스크럼 시간을 가지고, 스크럼 이후 13시까지 ZEP에 모여 코어타임을 가졌다. 사실 코어타임은 13시까지지만, 2주차에는 서로를 찾는 빈도가 잦아져 코어타임 이후에도 거의 ZEP에 있었다... 일요일에는 휴식시간을 가졌지만 팀원들 대다수가 그대로 개발을 한 것 같았다!

 

 ⭐ GitLab을 협업으로 처음 사용하다

 QA하며 지긋지긋하게 사용한 깃랩... 물론 이 때는 이슈 관리용으로 사용했으므로 개발 협업에서 사용과는 완전히 달랐다. 6명 모두 Git 협업은 익숙하지 않았지만, 2주 간 끼고 살다보니 많이 익숙해진 것 같다.

나는 첫 주 MR 실수를 해서 한밤중에 코치님에게 도움을 요청하였다... 이를 계기로 다시는 MR 실수를 하지 않을 것 같다🥲

 

 전회사에서 Slack에 MR 알림을 연동했었던 기억이 있어서 찾아서 프론트엔드 레포지토리 MR 알림 봇을 디스코드에 연동했는데, 팀원이 언제 머지했는지 바로 알림이 와서 바로바로 pull 받을 수 있는 점이 참 좋았다! 개발자랑 협업 했던 경험을 활용할 수 있어서 참 좋은 것 같다.

프론트엔드는 원활한 공유를 위해 디스코드 방을 따로 만들었다!

 

 ⭐ 오피스아워와 코드리뷰

 이틀에 한 번, 프론트엔드 코치님과 1시간 동안 오피스아워 시간을 가졌다! 정말 소중한 시간으로, 코치님과 프로젝트 관련과 그 외의 질문들을 질답하는 시간을 가졌다. 우리는 모두 첫 협업 프로젝트였기에 주로 프로젝트의 구조와 진행, 백엔드 API 연동과 관련하여 질문을 했다. 단체 시간이기에 개인 코드 구조에 관해서는 질문을 자제했는데, 지금와서는 마음껏 해볼 걸 생각이 들기도 한다...

 

 

주 1회, 토요일에 코드리뷰를 받을 수 있다. 내가 작성한 부분에서는 리뷰 달아주신게 없었는데, 공통 리뷰와 다른 팀원의 리뷰를 보며 배우는게 많았다! 코드 리뷰에서 배운 부분은 코드에 바로 반영하였고, 정말 도움이 많이 되는 내용들이기에 따로 정리할 예정이다.

---

3.  배워갈 부분

⭐ 기획

팀원들이 모두 이런 협업 프로젝트가 처음인지라 기획 단계에서 갈피를 못잡고 있었는데, 최근까지 팀프로젝트를 진행하고 있던 팀장이 잘 이끌어줘서 기획을 잘 시작할 수 있었던 것 같다.

 

 먼저 프로젝트 시작 전, 팀 규칙을 정하고 시작 전까지 각자 레퍼런스 사이트를 2개 씩 선정해오기로 했다. 처음에는 어떤 것을 선정해야할 지 감이 잘 안잡혀서 자주 쓰는 쇼핑몰 세 개 선정해서 우리가 구현해야 할 기능들이 어떻게 구현되어있는지를 주로 확인하면서 정리했다. 알고보니 디자인 레퍼런스였지만.. 이렇게 한 번 쭉 정리해보니 우리 기능들이 어떤 흐름으로 구현하면 좋을 지, 어떤 기능을 주로 사용하는 지 등 살펴볼 수 있어서 좋았다.

마음에 드는 기능을 형관펜으로 칠해놓았다

 

 프로젝트 시작 당일에 레퍼런스를 투표로 선정하고 각자 판매하고 싶은 상품을 선정 후 투표하는 방식으로 진행되었다. 그런 뒤 각자 시장조사, 타깃고객(페르소나 2명), 웹사이트 차별화 전략 등을 정리하는 시간을 가지고 의견을 총합하여 기획을 마무리 하였다.

 

 결과는 디자인 레퍼런스 사이트는 아파트먼트풀 마켓 쇼핑몰, 상품은 꽃으로 결정하였고, 젊은 층을 공략하는 커스텀 꽃다발이 가능한 꽃다발 온라인샵으로 선정되었다.

이번에 처음 기획 단계를 거쳐봤는데, 다음 프로젝트도 이런 방식으로 기획해도 좋을 것 같다!

---

4. 고민과 이슈

⭐ CORS

  개발 중, 서버 엔드포인트로 fetch로 요청을 하는데, CORS(Cross-Origin Resource Sharing) 에러를 마주했다. CORS는 단어 그대로 다른 출처의 리소스 공유에 대한 허용/비허용 정책인데, 클라이언트가 보안 상의 이유로 다른 출처(origin)의 리소스에 접근하려 할 때 발생한다. 여기서 출처(origin)이란, 간단히 Protolcol 과 Host 그리고 Port 까지 모두 합친 URL이라 생각하면 된다. CORS Error에 관해서는 해당 블로그에 해결법까지 잘 정리가 되어 있어서 큰 도움을 받았다!

 

 우리는 백엔드, 프론트엔드 레포지토리를 분리하여 개발하였기 때문에 자연스럽게 CORS 에러가 발생했던 것이고, 이를 해결하기 위해 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 해결하였다고 전달받았지만, 계속해서 발생하였다. 코치님들을 동반하였지만 해결되지 않아, 결국 시간 문제로 다른 해결책인 프론트엔드 팀이 직접 백엔드 코드를 pull 받아와 로컬에서 서버를 실행하는 방법을 선택하였다. 

 

 나는 이 방법이 너무 마음에 들지 않았고, 해결하지 못한 찝찝함과 프론트엔드 코치님께서 현업에서도 이렇게 할 것이냐는 따끔한 조언과 함께 프론트, 백엔드 합동 오피스아워 때 백엔드 코치님께 다시 여쭤보았다.

 

 '배포용 엔드포인트에는 CORS 허용 안해놨고, 대신 CORS 허용한 테스트용 API로 따로 배포해놨는데,

전달 못받았나요?' 

 

 프론트엔드 팀에 전달 받은 API URL은 배포용 한 개 뿐이었고, 백엔드 팀에서는 테스트용 API URL을 전달해주지 않고 테스트 URL의 CORS를 허용해놨으니 될 리가 없던 것이었다... 아무래도 백엔드팀에서 단기간에 많은 정보가 주입되어 까먹으신 것 같다. 프론트도 마찬가지였으니 충분히 이해할 수 있었다. 여러 복잡한 생각이 오가고 아쉬웠지만 마지막에서라도 해결해서 다행이고, 대체 방법으로 빠르게 전환해서 진행하길 잘했다는 생각이 들었다.🥲

 

 

⭐ fetch/promise chaining

fetch(`${API_URL}user/order`, {
    method: "GET",
  })
    .then((res) => {
      const data = res.data;      
      data.forEach((order, index) => {
        const {...} = order;
        // fetch 함수
        showSearchResult(orderItems, orderDate, orderId, orderStatus);
      });
    })

 

  주문 조회 페이지를 구현하는 중, 주문 정보를 fetch GET 요청으로 받아오고, 그 안에서 상품 이미지를 보여주기 위해 또 상품 정보를 fetch GET 요청으로 받아오는 showSearchResult 함수를 호출했다. 결과로는 뒤죽박죽 이상한 결과물이 나왔다.. 문제는 fetch안에 fetch를 또 호출하여 비동기 작업을 동기적으로 처리하려고 하여 제대로된 데이터를 처리할 수 없었던  것이다.

먼저 시간이 부족했기에 급하게 해결책으로 showSearchResult의 fetch를 삭제하고, 이미지 배열을 만들어 return하여 비동기 작업을 이어나갔다.

fetch(`${API_URL}user/order`, {
    method: "GET",
  })
    .then((res) => {
      let imgArr = [];
      data.forEach((order, index) => {
        const {...} = order;
        showSearchResult(orderItems, orderDate, orderId, orderStatus);
        orderItems.forEach((item) => {
          imgArr.push(item.product_id);
        });
      });
      return imgArr;
    })
    .then((arr) => {
      renderImg(arr);
    })

 

  하지만 이것도 결국 chainig이기 때문에 가독성을 위해서라도 async/await로 리팩토링하거나, Promise.all을 사용하여 리팩토링을 해주는게 좋겠다. 이 경험으로 비동기 작업에 대한 이해도가 부족하다고 느껴져, 복습을 다시 해야겠다는 마음을 먹을 좋은 계기가 되었다!

---

5. 아쉬운 점

⭐ Vite 미사용

 

 프로젝트 초반에 프론트엔드 코치님께서 Vite 사용을 추천해주셨는데, 프론트엔드 팀 전원 배운 것을 활용하기도 벅차고 구성해주신 Vite 프로젝트에 이미 일부 구현해놓은 프로젝트를 옮기는 데에 어려움이 있었어서 express로 계속 진행하기로 결정했다.

 그런데 이제 와 생각해보면 프론트엔드 개발하면서 프론트엔드 개발 도구인 Vite를 계속 사용할텐데, 너무 지레 겁을 먹지 않았나라는 생각이 든다. 하지만 우리가 교육을 받을 때에는 express로 배웠으니, 배운 것을 잘 활용하여 진행한 것이라고 생각하고 있다!😎

 다만 Vite 프로젝트로 이사했다면, 이사 과정에서 프로젝트 구조, 경로들이 잘 정돈되었을거라는 생각이 든다. 지금은 프로젝트 구조가 뒤죽박죽이고 html, js 파일이 점점 늘어날 때마다 서로 파일을 찾는데 어려움을 겪었다... 모두 구현하고 구조 변경하기로 했는데 우리에게 그러한 시간은 허락되지 않았었다.🥲

 

---

 좋은 팀원을 만나 이슈 없이 진행하여 최우수상까지 수상한게 아닌가 싶다. 사실 아쉬운 점이 산더미지만, 깨닫고 배운 것과 개선하고 배울 점이 더 많았으며, 하나의 프로젝트의 목표 기능을 완성하여 배포까지 문제 없이 완료했다는 것이 매우 뿌듯하고 만족스러웠다! 

 코치님들의 피드백, 코드 리뷰 등을 참고하여 공부를 좀 더 해보고 함께 리팩토링, 고도화 등을 할 기회가 있으면 좋을 것 같다. 수고하셨습니다🥰