원래 1차프로젝트하면서 각 과정마다 후기를 쓰려했지만... 혼란스러운 내 코드속에서 정신을 차릴수 없었다.. 눈떠보니 프로젝트 마지막날이었다. 그래서 결국 1차 프로젝트 기록_1 다음이 회고록!

0. 오늘의 집

탐색, 발견, 구매까지.
인테리어의 모든 과정을
한 곳에서 경험할 수 있도록 돕습니다.

오늘의집 사이트 소개말이다. 탐색, 발견, 구매 우리가 초점을 맞출 부분!

I. SweetHome

우리팀이 맡은 사이트는 "오늘의 집" !! 팀이름 뭘로 하죠? 라는 물음에 무심코 내가 매일 친구들이랑 장난삼아 내뱉던 "홈 스위트 홈" 에서 따와 "스위트 홈" 어때요? 라고한게 팀명이 되었다.

프로젝트 진행 방식!
2주라는 짧은 기간안에 오직 개발에만 집중할 수 있도록 이미 서비스된 사이트를 대상으로 기능을 똑같게 구현하는 것! 오리지널 코드는 절대 참조하지 않는다. 많은 시간을 투자하여 완성된 서비스 그대로를 따라하는건 불가능 하겠지만 그 속에서 우리가 구현할 수 있는데 까지 구현하는것이 목표이다.

1. 팀 구성

FrontEnd 3명 / BackEnd 4명

2. 프로젝트 기간

2021.02. 15 ~ 2021.02.26 (12일간)

3. BackEnd 기술 스택

• Python
• Django
• MySQL
• Git
• AQueryTool
• Bycrypt / JWT
• corsheader
• RESTful API

4. BackEnd 구현 기능

💙 : (공통)참여 & 내가 맡은 부분

공통

• 💙 modeling
• 💙 db_uploader작성 & CSV 파일 생성(백업용)

user app

• 회원가입 로직
• 로그인 로직
• 비밀번호 암호화, 토큰 발행
• 회원 유효성 판단(login_decorator 작성)
• 💙 비회원용 login_decorator (non_user_accept_decorator)작성

posting app

• 💙 상품 조건별 정렬 & filtering
• 💙 회원유저와 posting간의 좋아요 기능 구현
• 회원유저와 posting간의 스크랩 기능 구현
• 💙 회원 유저가 로그인 했을 경우 좋아요, 스크랩 상태 반영하여 게시물 데이터 전송

product app

• 카테고리별 상품 나열
• 상품 조건별 정렬 & filtering
• 상품 상세페이지
• 상품에 대한 리뷰

order app

• 장바구니에 상품 담기
• 장바구니 내역 조회
• 장바구니 수량 변경 및 이에 대한 조회

-------------------------------------

II. 초석

처음 팀원분들을 만났을때 들었던 생각은 "오 재밌겠다!!" 였다. 아주 좋은 시작신호였다 :)

1. 팀의 목표 : One Cycle

첫 팀회의때 목표를 세워야 했다. 우리는 정말 아무것도 모르는 병아리이기때문에 현실적으로 가능한 목표를 정해야 했는데 그렇게 정한 목표는 "하나의 cycle을 완성하자" 였다.

오늘의 집의 메인은 쇼핑몰로써의 기능이라 생각한다. 물론 서비스가 점점 확대되어 SNS기능도 커졌지만. 때문에 유저의 회원가입 부터 상품 구매까지를 하나의 cycle로 보고 이 기능을 구현하는걸 1차 목표로 두었다.

하나의 cycle 완성하기

• 유저의 회원가입/로그인
• 오늘의 집에 존재하는 SNS으로써의 기능 둘러보기 (탐색)
• 상품 고르기 (발견)
• 장바구니에 담기 (구매)
• 최종 결제하기

그 외의 기능들은 모두 추가구현사항으로 두었다.

2. 개인의 목표 : 기분 != 태도

기분이 태도가 되지 말자

몇년전 어디선가 보고 항상 되새기는 문장이다. 프로젝트가 시작되고 웃으면서 구호 외치고 시작했다.!
프로젝트가 끝난뒤 되돌아보면... 제대로 지키진 못한것 같다. 왜냐면 항상 기분이 좋아서 즐거운 태도로 임했기 때문이다!!

그리고 한가지 더. 안주하지 말자 였다. 내가 이미 아는거만 똑같이 하려고 하면 무슨 의미가 있겠냐. 더 앞으로 나아가자! 라고 다짐했다.

3. 진행 방식 : Slack, Notion, Trello, Standing meeting

우리팀의 슬로건은 자율 이었다. 어쩌다 보니 이게 되었다. 맘에든다 :) 우리에게 딱 맞는 슬로건!
하지만 단순 자율이 아닌 각자 책임감을 갖고 지킬껀 지키는 자율! 생각해보면 그 누구도 자기가 맡은 일을 먼저 미루거나, 포기한 사람은 아무도 없다!
Standing meeting 시간은 조금 유동적이었다. 그래도 아래 내용은 항상 나눴다!

• 나 어제 뭐했다
• 어떤부분에서 문제가 있다 or 막힌다
• 오늘 무얼 할꺼다 / 어떤 부분 PR 할꺼다.
• 프/백 이러한 부분 소통해야 한다

• Slack에 Git을 연동해 모두의 PR과 리뷰내용을 확인할 수 있었다! 이걸로도 "아 여기까지 진행하셨구나" 라는걸 볼 수 있었다.
• Notion에 대해선 아래에!
• Trello 활용을 잘 했는가?! 그건 아닌듯 했다. 카드를 제때 못옮겼기 때문 ㅠㅠ 서로 대화로 진행상황을 다 알고있다고 하더라도 Trello관리를 소홀히 하면 안됐었다...

-------------------------------------

III. 프로젝트 진행

1. modeling (by AQueryTool)

오늘의 집에서 우리가 중점적으로 생각한 부분은 filtering 이었다. 때문에 이와 관련된 내용들은 모두 정규화를 해야 겠다 생각하고 이를 토대로 modeling을 진행하였다. 그러다 보니 이러저러 요소들이 서로 얽히고 섥혀 이를 정리하는것이 어려워 시간이 많이 걸렸다.
완성된 modeling을 바탕으로 models.py를 작성하는데 User, Posting, Product, Order app을 만들었고 각자 하나의 app을 담당하기로 했다.

models.py는 정말이지.. view를 짜면서도 계속 수정할수 밖에 없었다ㅠ!

2. 로직 작성 : views.py

내가 맡은 부분은 posting app 이었다. 그중 게시글 업로드는 업로드 페이지가 필요해 추가구현사항으로 빠졌기 때문에 실질적으로 GET method에 관해서만 작성하면 됐다. 이중에서 내가 가장 신경쓴 부분이자 전부는 Query parameter를 이용한 정렬과 필터링 기능이다.

• 정렬은 저장된 데이터를 조건별로 재배열 해야 한다.
• 정렬 조건이 없을 경우 '최신순'으로 배열한다.
• 필터링은 조건에 맞는 데이터만 보내야 한다.
• 필터링 조건은 없을수도, 최대 4개까지 있을 수 있다.

3. 소통! Good!

- 통신 ver.

통신 확인전 꼭!! 내 로직이 맞는지 확인하기. shell에서 한번, http 통신으로 두번. 이과정이 정말정말 중요하다. 그리고 통신 용어 맞추기 나는 이전에 다른 프론트님과 개인적인 도전으로 게시글 통신을 시도한 적이 있었다. 이 과정에서 서로 용어를 맞추는게 얼마나 중요한 일인지 알고있어 미리 맞추는걸 제시했다! 우리팀만의 Notion 페이지를 만들어 거창하게 활용은 못했지만 용어에 관한 코드를 공유할 수 있었다.

- 기능 구현 ver.

프로젝트를 진행하면서 알게 된것이지만 하나의 페이지를 구현하는데 상대적으로 백엔드보다 프론트엔드쪽에서 더 시간이 걸린다는 것! 하나하나 기능을 구현해야 하는 일이 많으신것 같았다. 이를 위해 Notion 을 계속 활용하였다. 백엔드에서 작성한/할 data 형식대로 프론트에서 mock data를 만든다면 이후에 mock data가 아닌 실제 data를 토대로 통신할때 훨씬 더 수월하다는걸 느낄 수 있었다! 수정해야할 것이 훨씬 줄어든다는 점!

- 목표 설정 ver.

오늘의 집.. 페이지가 정말 많았다. 하나하나가 다 페이지...? 때문에 프론트분들께서 정말정말 수고가 많으셨다.! 그러던 중 장바구니와 결제상세페이지를 담당하신 분이 시간상 두가지 모두를 구현하기 어려울것 같다고 말씀하셨다. 먼저 상태 알려줘서 정말 고마워요!
백엔드로써 "이미 로직 다 짜두었는데! 해주세요!" 라고 하지 않고 함께 기능을 구현하는것 을 중요하게 여기면서 서로의 상황에 맞게 목표를 수정했다

-------------------------------------

IV. 기억에 남는 코드 : Query parameter

- 정렬과 필터링

정렬과 필터링을 구현하는것은 크게 어렵지 않았다. 모두 If 문으로 잡아주었기 때문..
이것은 마치.. 뒤가 얼마나 흉측하든 일단 앞면은 이쁜 양말;;

고치고 싶었던 방향은 다음과 같았다.

1. if문 줄이기
2. 정렬과 필터링 조건 한번에 잡기

먼저 정렬조건에 좋아요 갯수, 스크랩갯수, 댓글 갯수가 있었다. 이는 내 db에 없는 column내용이었기에 annotate를 사용하여 3개의 column을 만들어주었고 이를 모두 한줄로 작성했다.
그리고 정렬조건에서 key-value로 잡은것 처럼 필터링또한 key-value형태로 작성해 주었고, key-world arguments를 사용해 여러개의 조건을 적용할 수 있게 코드를 작성하였다.
필터링관련 코드가 작동하는 순서는

1. Query문으로 들어온 조건들을 key-value형태로 받는다.

• size=1&housing=2로 들어왔다고 가정

2. 들어온 조건의 key가 미리 작성된 filter_prefixes와 맞는것이 있다면

• prefixes에 size와 housing이 있다.

3. prefixes의 해당 value에 들어온 조건의 value를 적용시킨다.

• housing_id__in에 1을 / size_id__in에 1을 적용시킨다.
• 이때 __in대신 filter_set의 filter_prefixes.get(key) : value에서 value[0]을 해주어도 된다. 왜냐하면 Query문으로 들어온 value가 list형태이기 때문이다. __in으로 해주면 같은 조건의 다중 옵션도 처리할 수 있다! (size가 1인것과 2인것 모두 선택 가능 => 확장성?)

4. 정렬 조건이 없을 경우 default로 '최신순'으로 나열한다

• recent조건 => 최신순

계속된 수정으로 최종적인 내 코드는 이렇다!
봐도봐도 감탄스럽다. 내 코드가.. 이렇게까지 다듬어질수 있다니!! 그중에서도

postings = postings.filter(**filter_set).order_by(order_prefixes[order_request])

부분. 정렬과 필터링 조건대로 postings 을 다시 한번에 선언해 주는게 짜릿하다. (?)

- 구현 영상

-------------------------------------

V. 진짜 회고

1. 아쉬운 점 😭

1. 개인적으로 프론트 지식의 부족
   위에서 말한 것 처럼 같은 페이지를 구현하는데 백엔드보다 프론트엔드에서 시간이 더 오래걸렸다. 이걸 미리 알았더라면... 프론트에서 좀더 편하지 않았을까 싶다! 그리고 같이 고민할 머릿수가 부족했기 때문에 보탬이 되고 싶었지만 내가 Javascript랑 React에 관해선 지식이 전무하기 때문에 도움이 별로 되지 못한것 같다.. 그래도 구글링은 도와드렸다!!! Header에 토큰 넣는법...!!!!
   => 개인적으로 JS공부를 놓치진 않을꺼지만.. 그것만으로는 도와드리기에 부족하다! 함께 빠르게 진행할수 있는 방법을 찾아보자!

2. 이거 말고는 정말 없다. 우리팀은 애초에 목표설정이 확실했다. 하나의 cycle을 완성하자 였고, 비록 최종 구매(배송지 입력까지)는 가지 못했지만 장바구니에서 결제하기 까지 눌렀으니 cycle은 완성했다고 본다! 아쉬운점이 남지 않은 것은 애초에 목표설정이 확실했고, 이를 이룬 덕분이라 생각한다. 그리고 우리 팀원분들 모두 정말 친절하고 좋았다! 그저 행복했을 뿐이다 🥰

2. 잘한 점 😃

첫번째도 소통, 두번째도 소통이다. 통신용어 맞추기, 작은 단위로 통신 되는지 확인해보기, 공통의 목표를 향해 나아가기 모두 잘 이뤄졌다 생각한다!!

3. 개인적으로 미흡했던 점 🤔

1. 이전부터 git을 다룰때 조금씩 삐그덕 대던것이 이번에 드러났던것 같다. 우리팀은 큰.. 문제는 없었지만..(아마도?) branch를 다루는게 조금 미흡했었다. 특히 나는 기능별로 다르게 분리해야 하는 branch인데 정신없이 작성하다가 같은 branch로 계속 작업했었다! 담부턴 이런일 없도록!!

2. 소통을..너무 잘했던걸까? 유저가 게시물을 좋아요 하는 것은 status=True가 맞는데 일단 구현되는 것에 맞추다 보니 일단 False로 바꾼적도 있다 ㅎㅎㅎ 리뷰 받고 다시 True로 하기로 했다! 이 내용에 관한 PR을 프로젝트 발표 2시간 전에 보냈다.. 나도 몰랐다 발표 2시간전까지 PR을 보내고 있을 줄은..
   이자리를 빌어 항상 늦은시간까지 리뷰해주셨던 소헌님과 승현님 정말 무한 감사드립니다...!! 당장 내 팀원의 코드를 처음 보면 이게 뭐지!? 싶은데 한눈에 코드의 흐름을 이해하시고 리뷰해주시는 능력 정말 갖.고.싶.다.

3. filtering 조건을 잡을때 위에서 처럼 prefixes를 작성해서 잡아도 되지만 django의 Q객체를 사용하면 더 깔끔하게 작성할 수 있다고 한다. 충분히 알아보고 적용할 수 있었으면 좋았겠지만 시간적 여유가 부족했기때문에 적용하지 못했다ㅠㅠ 프로젝트가 끝난 후 혼자서 리팩토링 해볼 계획이다!

4. 리뷰받은 것! 🤩

1. git 알람

오전..오후..새벽.. 감사합니다!!!

2. 칭찬으로 뿌듯 max-! 🥰🙌🙌

3. 정신 못차리고 작성했을때; 😅

-------------------------------------

VI. Thanks to team SweetHome 💙

외부에 휩쓸리지 않고 묵묵히 우리만의 속도를 맞춰나갈 수 있었던 것은 우리내부에서 계속 소통했기 때문이라 생각한다! 덕분에 초조해하지 않고, 서두르지 않을 수 있었다. 우리의 목표는 우리 눈 앞에 있으니까!
팀 분위기 결정에 PM님의 역활이 컸을것 같다. 우리팀을 보면 뭔가.. PM따라 분위기가 결정된듯한? 그런면에서 우리의 PM 종진님은 백만점짜리 PM이시다!!!! 덕분에 나도 편하게 장난도치고 ㅎㅎ 할수있었다.

다시한번 우리팀 여러분 제 장난 잘 받아줘서 고마워요! 🥰🥰🥰🙌

1) 옹기종기 프론트님들

정말 고생 많으셨습니다ㅠㅠ!

2) 민주님과 역사적인 첫 Query parameter 통신...!

울뻔했다;;! 😭

3) 우리팀 피카소님이 그려준 나! 와 PM님!

ㅎㅎ;; 💙

4) 마지막날 PM님의 음료수

빨간포션!

이젠 안녕! SweetHome!! 🐾

이번 프로젝트를 통해서 프/백간의 소통을 많이 해볼 수 있었던 너무 소중한 경험이 되었다🥰

그리고 내가 가장 신경썼던 "기분이 태도가 되지 말자"
"내가 기분나쁠 행동은 상대방도 기분나빠한다!" 고 생각하며 예민할 수 있는 기간에 말 한마디 항상 조심하며 하려 했다!(티가 났나요?)

너무나도 감사하게도 팀원분들께서 나의 활기찬 모습을 좋아해주셨다..!! 제가!! 팀 분위기 활성화에 도움이 되었다니 정말 뿌듯합니다-!! 전 그저 같이 장난치고 놀고 했을 뿐인데요!
2차 프로젝트에서도 항상 말과 행동에 유의하면서 이번에 느꼈던 소통의 중요성을 앉고 가야겠다!

다시한번 감사합니다! 🥰

모델링부터 끝까지 봐주신 소헌님! 퇴근하셨을텐데 새벽 1시에 리뷰해주셨던 승현님! 집갈시간 항상 알려주셨던 경훈님! 그리고,, 못본지 오래된 지훈님,,,ㅠ 제 git push 에러를 알려주신 준식님! 제 짝궁 민주님을 믿어주신 지영님! (ㅋㅋㅋ) 맛있는 딸요블 사주신 담임멘토 신영님!
죄송해요 감사한 분이 너무 많아요 이 글을 읽고 나는? 싶으신 분들. 맞아요 모두 감사드려요!!!!

-------------------------------------

구현 영상

Wecode 스위트홈 - 오늘의 집 클론 코딩