2차 프로젝트 회고

 

정신없이 흘러간 2차 프로젝트 회고😆

 

    목차 

1. 프로젝트 정의
2. 프로젝트 목표
3. 프로젝트 과정
4. 느낀 점 

 

 

1.  프로젝트 정의

• React와 Node.js를 활용하여 2주 동안 웹 서비스의 다채로운 특징을 가진 새로운 기능을 담아낼 수 있는 사이트 구축
• 온라인 또는 오프라인으로 팀원들과 소통하며 PET의 관점으로 웹 페이지를 분석

 

2.  프로젝트 목표

• 웹 페이지(오설록)에 대한 특징으로 다양한 기능 개발(회원가입 기능, 로그인 기능, 장바구니 기능, 구독 서비스 등)
• 프론트엔드는 회원가입 페이지, 로그인 페이지, 장바구니 페이지, 제품 상세페이지를 개발
• 백엔드는 회원가입 API, 로그인 API, 제품상세 API, 장바구니 API, 배송지 목록 API 를 개발
• 프론트엔드에서 개발한 페이지와 백엔드 API를 통신하여 프로젝트를 완성
• 프로젝트 회고 미팅을 진행하여 프로젝트 기간에 느꼈던 점을 기록

 

3. 프로젝트 과정

프론트엔드 3명 & 백엔드 4명으로 한 팀이 구성되어 매일 진행 상황을 공유하였다.

• 매일 진행되는 Stand-up Meeting
• Slack을 통한 소통
• Notion 과 Trello를 통한 일정 관리
• Github를 통한 코드 공유
• 웹 페이지 PET 분석
• 프로젝트 기초 ERD 작성
• 프로젝트 초기세팅 
• 회원가입,로그인,장바구니,메인,제품상세,찜 API 구성

 

3-1. 프로젝트 1주 차(함께하는 프로젝트)

 

첫날 팀원들과 한자리에 모여 프로젝트 주제 선정에 대한 투표를 진행하였다. 각자 생각한 페이지에 대한 특징과 선택한 이유에 대한 의견이 오갔는데 이 과정에서 각자 자유롭게 의견을 전달하고 의사소통했었던 점이 제일 기억에 남았고 추후 프로젝트를 진행함에 있어서도 큰 도움이 되었다. 긴 회의 끝에 다수결로 오설록 사이트가 채택되었고 이후 프로젝트의 세부 사항(목적,진행 일정,PM)을 조율하였다.

다음 단계로 PET 분석을 진행하였는데 로그인/회원가입, 제품, 주문, 결제 부분으로 나누었다. 하나의 웹페이지를 이렇게까지 자세히 둘러본 게 처음인지라 어떤 것이 더 효율적일까 하던 찰나에 유저 Flow를 따라가며 하나하나 살펴보았고 세부적으로 프론트,백엔드의 입장에서도 분석하는 시간을 가졌다. 구현 기능 선정에 대한 사항도 공통,프론트,백엔드로 나누어 필수,추가 구현 사항으로 분류하였다.

 

이후 초기세팅을 담당하여 진행 하게 되었는데 root 폴더의 초기세팅 / dbmate 설정 / Runserver 구동 / 레이어드 패턴  을 적용하였다. 레이어드 패턴을 적용시켜 세팅하며 각각의 폴더마다 어떤 역할을 하는지 되새길 수 있는 순간이었다. 

 

제일 흥미 있었고 관심이 갔었던 기초 ERD 작업에서는 백엔드가 다 같이 모여서 테이블,컬럼,타입을 정하면서 1:N , N:N 의 관계에 대하여 한 번 더 공부할 수 있었는데 하나하나 추가하다 보니 다양한 정보들이 많이 필요하구나 하는 생각과 함께 평소에 어떤 서비스를 사용했는지 돌이켜보며 작성을 하였다. 특히나 중요하다고 생각이 들었었던 부분들을 정리해 보았다.

 

  1) 테이블 명, 컬럼 명 입력 시 오타 없는지 확인!

    초기 ERD 작성이라 수정이 필요하겠지만 누구나 보면 어떤뜻 인지 알 수 있도록 네이밍하는 것이 중요하다는 것

    영어로 쓴 컬럼 네이밍의 스펠링이 틀리지 않았는지도 한 번 더 확인하기(스펠링 오타 실수들이 있었다)

  2) 컬럼마다 어떤 타입을 적용하는 것이 좋을지 검색하고 생각해 보기

    주소가 들어가는 URL에는 몇 자 정도로 제한해야 좋을지, 우리 페이지의 할인율 컬럼(discount_rate)에는 정확하게

    떨어지는 실수로 표현하기로 하였기 때문에 float를 적용했다. 추가로 날짜표기가 중요한 부분들 (리뷰,제품,주문)에

    create_at,updated_at를 추가하여 정확한 날짜 표기가 될 수 있도록 해주었다.

  3) 글자 제한 수는 어느정도로 둘지 애매했던부분 검색하여 수정하기

    1차 프로젝트 때에는 테이블 4개 정도로 시작했었지만 이번 프로젝트에서는 실제 서비스 중인 페이지들을 참고하여 ERD

    구성을 시작했다. 실제로 서비스하는 부분들을 확인해 보며 카카오톡 연동 로그인으로 인하여 통합되는 멤버십 쿠폰들과

    포인트에 대한 테이블도 추가되었다. 특히 개인적으로 URL 컬럼에서 적용되는 타입 VARCHAR 내 글자 제한에 대하여

    검색해 보니 Web URL의 최장 길이는 2083자였다. 팀원들과 논의해 보며 우리가 적용한 리뷰 이미지와 제품

    이미지 컬럼에는 다양하게 첨부 될 수 있다고 생각이 들어 2000자 제한으로 설정하였다.

 

그림 1. dbdiagram으로 작성해본 팀 초기 ERD

 

3-2. 프로젝트 2주 차(다시한번 느낀 소통의 중요성)

명절 연휴가 겹치는 상황으로 각자 업무 분배가 나눠진 부분들은 Trello를 이용하여 현재 진행 상황이 어떤지, 어떤 것이 블로커가 되었는지 서로 소통하였다. 내가 맡은 회원가입에 대한 내용에 대해 프론트와 통신을 완료했었던 상태였는데, 명절 이후 다시 프론트와 맞춰보게 된 날에 갑작스럽게 통신 오류가 떠서 당황하며 혼자 해결하려고 했었지만 해결되지 않아 백엔드 팀원들에게 공유하면서 함께 해결할 수 있었다. 이후에 추가로 맡게 된 토큰 미들웨어 작성에서도 처음 해보는 작업이었지만 어떤 곳에 적용되어야 할지에 대한 고민과 어떤 식으로 작성해야 하는지 검색해 보며 좋아요. 추가, 삭제에 적용했다. 팀원들 모두 Trello를 사용하는 법에 익숙하지 않아 매번 확인하는 것에 대해 습관이 덜 되었던 부분을 PM이 진행되고 있는 부분과 블로커가 있는 부분들에 대해 회의에서 한 번 더 되짚어준 부분도 큰 도움이 되었다. 프론트 쪽에서도 각자 맡은 바를 진행하면서 백엔드 쪽에 디자인에 대한 의견 피드백을 공유하기도 하였다. 프로젝트 기간이 짧은 만큼 끝날 무렵엔 통신이 되는 부분에 대해서는 정확히 하되 안되는 부분에 대해서는 과감히 버리자는 의견으로 확정이 났다. 다른 팀 중에서는 마지막까지 그 부분을 놓지 못하고 계속 코드를 수정하다 멀쩡히 되던 부분까지 오류가 나서 코드를 사용할 수 없는 상황이 연출되어 안타까운 마음도 많이 들었다. 마지막까지 확인하며 ppt에 담을 내용을 큰 키워드로 잡고 세세한 부분들을 다 함께 의논하며 마무리되었다. 특히 확실히 통신 되는 부분들에 대해 정리하고 Notion에 공유했었던 점이 기억에 남아서 다음 프로젝트에 꼭 적용해야겠다는 생각이 들었다.

 

4.  프로젝트 회고(느낀 점)

1차 프로젝트 이후, 나 혼자만 잘하면 되는 게 아니라 팀원들과의 소통과 협력이 얼마나 중요한지 다시 깨달았다. 프론트와 백엔드가 각자 작업하면서 코드를 맞춰보는 과정에서는 계속해서 오류가 발생하고 시간이 지체되었는데, 서로 닦달하고 재촉하기보다는 정확한 문제점과 피드백을 서로 나누며 문제를 하나씩 해결할 수 있었던 좋은 프로젝트였다. 그동안에 나는 두 번째 코로나의 역풍을 맞아 식은땀을 흘리며 코드를 친 웃픈 기억도 있었고, 컨디션을 잘 관리하는 것도 프로젝트의 일부분이 될 수 있다고 뼈저리게 느꼈다. 추가로 ERD를 구성하면서 복잡하기도 하지만 PK, FK와 다양한 연결을 하는 부분들이 흥미로웠고 DB에 대한 관심을 가질 수 있게 된 계기가 됐다. PM은 일정에 대한 조율과 진행 상황을 이끌어 주었고, 돌아가면서 메모한 서기는 회의 내용을 간략하고 정확하게, 블로커에 대한 세세한 내용들을 Slack과 Notion에 그날그날 공유했다. 특히 프로젝트가 끝나고 난 후에 ppt 자료로 내용을 축약하여 팩트만 전달하기 위한 키워드 작성이 필요했는데, 이전에 이커머스 회사에서 업무했던 경험을 떠올려 큰 틀을 잡고 세세한 내용들을 하나씩 적어가며 팀원들과 커뮤니케이션하여 깔끔하고 내용 전달에 중점을 둔 ppt를 만들 수 있었다. 2주라는 시간 안에 다들 열정이 넘쳤는데, 오설록 서비스의 아이덴티티인 구독 서비스에 대한 내용을 제대로 담지 못한 게 조금 아쉬웠다.

 

4-1. 코드 문제 & 해결

• 회원가입 조건(email)

그림 2. 회원가입 시 가입 조건 설정

 

UserService폴더에서 회원가입 조건에 추가할 내용들에 대한 코드를 작성하였다. 내가 맡은 회원가입에 대한 내용에 대하여 프론트와 통신을 완료했었던 상태였는데, 명절 이후 다시 점검차 프론트와 통신해 보게 된 날에 갑작스럽게 회원가입이 되지 않았다. 너무 당황해서 어떤 점이 문제일까 하는 생각과 함께 분명 잘됐었는데 하는 마음도 복잡스럽게 들었다. 코드도 확인과 함께 발생한 오류에 대해 검색을 해보아도 진전되는 부분이 없어서 식은땀을 흘렸는데 알고 보니 공유 오피스에서 WiFi를 사용하는 부분에 있어서 프론트쪽으로 IP주소를 보내줘야 하는데, IP주소가 매번 변경된다는 것을 모르고 확인 하지 못한 채 이전에 보냈었던 IP 그대로 전달이 됐다는 점이 문제가 되었던 것이었다.😳 그런 점을 계기로 이후에 통신에서는 첫 번째로 IP 먼저 확인해 보자 하는 습관이 생기게 되었다.

 

4-2. 혼자 할 때 & 팀으로 진행할 때

혼자 앉아서 작업하는 시간이 길어졌다. 이전에 비해서 늘어난 부분들과 나 자신과의 싸움이라는 생각도 들었다. 노트북을 들고 직접 코드를 쳐보면서 오류가 뜨면 오류 메시지를 직접 검색하고 혼자 고민해 보며 하나씩 해결해 나가는 짜릿함과 동시에 머리를 쥐어짜면서 끙끙대는 시간이 많았다. 팀원들과 팀 분위기 자체가 각자 열심히 하되 블로커에 대한 내용은 공유를 빠르게 해주고 같이 해결해 보자는 부분도 있었기 때문에 정말 해결하기 힘들다 하는 문제에 대해서는 너나 할 것 없이 서로 도와서 함께하려는 점이 아주 인상 깊게 남았다.

 

4-3. 기억에 남는 코드

• 레이어드 패턴 

그림 3. 1차 프로젝트때 직접 그려본 레이어드 패턴

 

(Controller) : API를 구현하며 엔드포인트의 정의 및 전송된 http 요청 등을 읽어 들이는 로직을 구현한다.userController라는 폴더로 구성되어 있으며, http 요청에 대한 구현과 API의 구현 내용이 들어간다.

(Service) : 비밀번호의 최소길이, 특수기호 조건 등의 회사의 서비스적인 기획이 들어간다. userService라는 폴더로 구성되어 있으며 특수문자 오류 및 비밀번호 길이(10자 이상) 조건 등에 대한 내용이 들어간다.

(Dao) : DB(mysql, RDBMS)와 맞닿아있으며 로직을 구현하는 부분이다. CRUD로 데이터를 주고받는다. user Data Dao의 폴더로 구성되어 있으며 CRUD에 해당하는 SQL을 직접 처리하는 내용이 들어간다.

 

해당 내용들을 1차 프로젝트 때 정리한 이후로 초기세팅에 들어가면서 더욱 세세하게 보게 되었는데, src 폴더 내에 레이어드 패턴을 적용했다. Router,Controller,Service,Dao를 추가시키고 추후 회원가입에 대한 코드를 적용할 때도 실제로 어떤 것들이 어떤 부분에 속하는지에 대해서 학습하고 돌이켜볼 수 있었다.

 

 

• 토큰 미들웨어로 적용시키기

그림 4. 미들웨어로 적용시킨 토큰

회원가입을 맡은 이후로 추가로 토큰적용에 필요한 미들웨어를 생성했다. try catch문을 적용시키고 회원들이 서비스를 이용하기 위하여 기본적으로 필요한 토큰을 다른 서비스들에 적용시킬 수 있는 점을 알게되었고 실제로 미들웨어를 작성함으로 인한 이점에 대해서도 직접 눈으로 확인 할 수 있었다. Like 생성,삭제와 같은 내용들에 Router단에서  productsRouter.post("/:productId/likes", validateToken, likesController.createLike);
productsRouter.delete("/:productId/likes", validateToken, likesController.deleteLike); 와 같이 적용 시켜 주었다.

 

 

• 유저 주문 데이터 불러오기 쿼리문(추가 작업 진행)

그림 5. 유저 주문 데이터 불러오기 쿼리문

 

추가로 유저 주문 데이터 불러오기에 대한 쿼리문을 작성하게 되었다. getUserOrderData에 대한 쿼리문을 SELECT 를 이용하여 users 테이블에 있는 id,name,email,phone_number( phoneNumber로 변경) 불러오는 쿼리문을 작성하였는데 AS를 이용하여 이름을 변경해 줄 수 있는 점에 대한 내용을 배울 수 있었다. 추후 3차 프로젝트에서는 프로젝트의 메인이 되는 상세 페이지 같은 복잡한 쿼리를 써보고 싶다는 생각이 들었다😳

 

4-3. 개발 한달 후기

코드를 잘 구성하고 관리하는 것도 중요하지만 어떤 사람들과 어떻게 소통해야 하는지를 한 번 더 겪어본 시간이었다. 각각의 역할에 대한 책임감도 중요하면서도, 이런 경험들이 하나씩 쌓여서 나의 소중한 경험들이 된다는 기쁜 마음도 함께 느꼈다! 프로젝트를 하면서 코드에 대한 궁금점들과 각자 맡은 역할에 대한 것들은 먼저 질문하기보다는 검색서비스를 이용하여 직접 찾아내 보고 적용해 보는 것이 정말 중요하다고 느꼈다. 3차 때에는 어떤 팀원들을 만나 어떻게 진행될지 궁금해지기도 하고, 정신없이 흘러가는 시간 속에 내가 조금씩이라도 성장하고 있다는 것을 느꼈다. 두근거리는 그런 마음😳이 들었던 한 달이었다. 개발자가 되기 위한 여정은 계속된다. 3차 프로젝트 때도 나 자신 파이팅이다. 😆😆