[Project] FRA-WE-TAK- 회고록

💻 FRA-WE-TAK 프로젝트

World's best eco-friendly egg or dinosour egg, FRA-WE-TAK 다양한 종류의 계란을 전시 및 판매하는 사이트 입니다 :)

📅 프로젝트 기간(개발 기간)

2021.11.29 ~ 2021.12.10

👀 시연 영상

FRA-WE-TAK 홈페이지 시연 영상 보러가기!

☃️ 팀 구성

• Back-end : 3명
• Front-end : 3명

🧏🏻‍♀️ Front-end Repository

GitHub: Fra-We-Tak Repo

💡 적용 기술

👉🏻 Common :

• Git
• Github
• Slack
• Trello
• Notion

👉🏻 Back-end :

• Python
• Django Web Framework
• AWS EC2
• RDS
• S3
• MySQL

👉🏻 Front-end :

• JavaScript
• React.js
• sass
• React-router-dom

💡 구현 기능(볼드 처리 된 부분은 직접 구현한 기능이다)

[Back-end]

• 회원가입페이지 : bcrypt, jwt
• 로그인 페이지 : 데코레이터, Id찾기 기능 구현
• 메인페이지 : 제품 리스트 보여주기
• 리스트페이지: 제품 리스트 보여주기, 검색기능 구현
• 상세페이지: 상세제품 보여주기
• 장바구니 : Get Post Delete Patch로 장바구니 add delete 구현

[Front-end]

• Navbar : Nav 기능 구현, 장바구니 목록 표시 기능 구현, 로그인 성공 여부에 따라 아이콘 동적으로 바꾸기 기능 구현.
• 마이 페이지: 장바구니에 담겨있는 상품 목록을 표시하고 더불어 수량, 가격을 조절 & 상품 삭제 기능 구현.
• 메인 페이지 : (무한)슬라이드 기능 구현.
  리스트 페이지 : 상품 목록 표시 기능 구현.
• 상세 페이지 : 장바구니 추가 기능 구현.
• 회원가입 페이지 : 이름(1자이상), 이메일('@', '.' 포함)유효성 검사, 비밀번호(특수문자, 숫자, 대문자, 소문자 혼합 8자 이상)유효성 검사, 전화번호(1자이상) 주소(1자이상)유효성 검사
• 로그인 페이지: 회원가입을 통해 저장된 user정보- 로 로그인 유효성 검사
• 아이디 찾기 페이지: 이름과 전화번호 입력을 통하여 user정보와 일치할 시 등록되 아이디 화면에 출력 구현

🖊 프로젝트 진행 방식

• 프로젝트는 Scrum방식으로 진행 되었으며 애자일 스프린트 방식으로 작업하였다. 스프린트 기간은 1주일로 잡아 총 2번의 스프린트로 진행이 되었다.
  • 스프린트 첫 날에는 미팅을 진행하며 한 주동안 작업할 내용을 개괄적으로 정하여 목표에 필요한 업무를 Front-end, Back-end 나누어 구성원들끼리 역할을 수행하였다.
  • 1주차에는 아이디어 기획과 개발을 중심으로 진행하였다. 매일 아침 Stand-Meeting을 통해 각자의 작업 현황을 공유하여 이를 토대로 작업 방향을 잡아 나갔다.
  • 2주차때는 개발, 배포 및 발표를 중심으로 진행 & 마무리 되었다.
• 모든 회의와 일정은 Trello / Notion을 중심으로 관리 되었다.
  • Trello에서는 Backlog / This Week / In Progress / Done 으로 구분하여 작업 현황과 전체적인 프로젝트 진행 상태에 대하여 공유와 구분이 가능하도록 관리하였다.
  • Stand-meetting을 진행할 때마다 Notion에 회의록을 작성하였다. 사실 Trello 사용이 아직 익숙치 않아 Notion에 비중을 더 많이주었던 것 같다.

🤍 나의 첫 번째 프로젝트, FRA-WE-TAK 회고

🙇🏻‍♀️ 개인적인 소감

🧏🏻‍♀️ 내가 맡은 역할 :

처음에 역할을 나누었을 땐 크게 회원가입, 로그인 / 메인, 리스트 / 상단바로 역할이 분담되었다. 그 중 내가 손수 자처해서 맡은 부분은 회원가입, 로그인 페이지 인데 이유는 다음과 같다.

• 바로 직전에 하였던 실습이 Instagram 클론이였는데 그 중에서도 회원가입, 로그인 파트에서 백엔드와 통신을 맞춰보았다. 처음으로 맞춰본 통신이었는데 실습이 짧게 끝나서 더 해보고 싶은 부분, 다시 해보고 싶은 부분을 못해본 것이 많이 아쉬웠었다. 그래서 복습도 해볼겸 회원가입, 로그인 파트를 직접 맡고 싶었고 추가기능으로 아이디 찾기와 비밀번호 찾기까지 구현해보고 싶었다.

💫 좋았던 점 :

• Instagram에선 구현해야 하는 Input이 우리가 기획한 Input이랑 비슷하긴 했지만 필수 체크박스 등 유효성 검사를 위해 추가 된 항목들이 있었고, 그 항목들을 직접 해볼 수 있어서 좋았다.
• 정규식을 사용해볼 일이 거의 없었는데 이번 프로젝트에서는 유효성 검사 및 백엔드와의 통신을 위해 백엔드와 정규식을 맞춰 사용하기로 하였다. 사실 코드가 보기 불편하다는 이유로 정규식 사용을 지양했었는데 나름의 편견이였던 것 같다. 또한 정규식과 함께 사용하는 match 함수등 메서드를 배우게 되었고, 정규식을 구글링 해보면서 하나의 식에도 이렇게 다양한 정규식이 존재한다는 것에 또 한번 놀랐다.
• 개인적인 취향이지만, 프라이탁을 클론하면서 깔끔하고 감각적인 디자인에 클론하는 재미를 붙이게 되었다. sass를 완성해가면서 더욱 애정을 붙이게 되었던 것 같다.

💥 아쉬웠던 점 :

• 처음에 혼자 기획을 했던 내용은 회원가입, 로그인 페이지가 끝나면 아이디 찾기 페이지와 비밀번호 찾기 페이지까지 배포를 해보는 것이었다. 그 중 비밀번호 찾기 페이지는 DB에 있는 이름, 아이디, 핸드폰 번호를 입력하면 비밀번호 재설정 페이지로 넘어가 새로운 비밀번호를 설정하게끔 기획을 했었다. 하지만 구현하는데 걸리는 시간 & 기능 난이도가 프론트와 백사이에선 크게 차이가 나는 부분이라 결국 구현해내지 못했다. 이 과정에서 아쉬웠던 점은 기능을 구현해내지 못했다는 점이 아니라 백엔드 구성원과의 소통이 부족했다는 점이다. 미리 상의해보지 못하고 내 쪽에서만 욕심을 내세워 진행하려고 했던 것 같다. 왜 당연히 가능할 것이라고 생각했을까...?🤔 내가 만들어 놓은 페이지를 살리게 해주려고 끝까지 고생해준 백엔드 팀원에게 미안하면서도 고마운 마음이 들었다.

  
  

🙆🏻‍♀️ 협업에 있어서

💫 좋았던 점 :

• 팀원들과의 소통
  • 프로젝트 조가 발표되기 전부터 모두가 '어떤' 프로젝트를 하느냐 보다 '누구와' 프로젝트를 하느냐에 더 궁금증을 가지고 있었다. 그만큼 소통에 불안과 걱정을 가지고 있었던 것이다. 그러한 걱정에서 만큼은 나도 마찬가지였다. 전체적으로 분위기는 매우 화기애애하고 좋았지만 개발자로서의 협업과 소통은 거의 처음이기에 긴장이 되었던 것도 사실이다. 팀 발표가 나고, 하루 종일 첫 스프린트 미팅을 진행해본 결과 체력적으론 매우 지쳤지만 나의 걱정과는 다르게 소통은 원활하게 진행 되었다. 처음이라서 미숙한 부분도 분명 있었지만 모두가 열려있는 자세로 서로를 배려하려고 노력하고 있음을 체감하였다. 그 과정에서 나 또한 내 의견을 내세우기 전에 상대를 한번 더 생각해보려했고, 내가 아니라 어떻게 하면 '팀'이 잘 할수있을까? 고민하였다.
• Stand-Up 미팅
  • 프로젝트가 시작되고 첫날과 마지막날을 제외하곤 아침마다 진행했던 스탠드업 미팅이 처음부터 익숙하진 않았다. 매일매일, 그리고 서서 진행하는 회의에 '내가 무엇을 얻어갈 수 있을까?', '우리가 무슨 교류를 할 수 있을까?' 라는 의문을 가졌던 것도 사실이다. 애자일 방식 중 하나인 스탠드업 미팅은 이름과 같이 모두가 서있는 채로(꼭 서서 해야 하는 것은 아니지만) 짧은시간 내에 미팅을 끝내는데, 여기에서는 팀내에서 짧게 집중하여, 꼭 필요한 소통만 하자는 취지가 담겨있다. 안건은 대부분 어제 무엇을 작업하였는가? 오늘 할 작업은 무엇인가? 업무에 방해되는 요소는 무엇인가? 이다. 트렐로와 노션을 중심으로 매일같이 미팅이 진행되었고 팀원들 순서대로 발언권을 가지며 진행 현황에 대하여 이야기 하였다. 굉장히 수평적인 분위기였고 서서하는 미팅이기 때문에 깊은 대화 보다는 꼭 필요한 안건 중심으로 이야기를 하게 되었기(밀도 있는 대화는 추후 회의를 또 잡아 하면 되었기에 큰 불편은 없었다)때문에 시간을 낭비한다는 느낌 없이 팀내 목표 위주로 방향성을 바라볼 수 있었다.
• 제일 중요한 협업!
  • 1차 프로젝트가 시작되고 팀별로 돌아가며 면담을 진행했었다. 면담이 끝나기 전에 팀에게 하고 싶은말을 할 기회가 생겼는데 그 때 내가 한 말은 다음과 같다. '머리와 손으로만 하는 작업이 아니라 마음도 함께 담아서 같은 곳을 바라보며 나아갔으면 좋겠습니다.'
    다들 첫 프로젝트인 만큼 욕심이 앞서 소통을 단절한 채 기능 구현에만 치중할 수 있을 거란 생각이 들었었다. 그리고 나 또한 마찬가지였다. 그러나 우린 개인이기전에 팀이라는 사실을 잊으면 안되었고, 그냥 팀이 아닌 같은 목표를 가지고 같은 곳을 바라보며 '함께 성장하는 동료'이다. 힘들땐 혼자 아니라 기댈 수 있는 옆이 있으며, 함께 바라보는 앞이 있다는 것을 상기시키고 싶었던 마음에 떠오른 문장이었다.
    협업을 하면서 가장 좋았던 것은 나를 이끌어줄 수 있는 동료가 언제든 옆에 있다는 점이었다. 실제로도 우리의 작업은 함께함으로써 이루어졌다. 각자의 작업이 끝나면 동료의 잔여 작업을 이어받아 분담하였고, 바쁜 와중에도 모르는 점이 있으면 언제든지 질문하고 또 답변해주었다. 그러한 과정이 있었기에 우리의 프로젝트는 완성될 수 있었다고 생각한다. 한명이 1인분의 몫을 다해서가 아니라, 우리가 6명의 몫을 다했기에.

💥 아쉬웠던 점 :

• 또 다시 소통
  • 나름 성공적인 협업을 했다고 생각했지만, 소통에 아쉬움이 남는 것도 사실이다. 모두가 첫 프로젝트였기에 분명 미숙한 점이 있었고 그 속에서 발생했던 불찰 또한 있었다. 위에도 언급했듯이 백엔드 구성원과의 부족했던 소통 탓에 나 혼자만 앞서 작업을 해나갔었고 분명 배운점도 있지만, 그 결과 백엔드 팀원에겐 부담을 작업에서는 미완성을 남기게 되었다. 생각해보면 정말 간단했던 일인데도 막상 일을 겪고 나니, 내가 한번만 더 먼저 물어보면 되었을 것을, 왜 혼자 진행했을까? 라는 생각이 머릿속을 떠나지 않았다. 그 생각에 팀원에게는 미안한 마음이, 개인적으로는 허탈한 마음이 종일 떠돌았었다.
  • 프로젝트 후반부에 갈수록 배포일자가 가까워지자 시간에 대한 압박으로 각자의 기능구현에 치우쳐 미팅과 소통을 뒤로한 점이 아쉬움으로 남는다. 다음 프로젝트에서는 역할의 분배와 필수 구현사항에 우선점을 두어 작업과 시간 사이에서 보다 현명하고 후회없이 작업 진행을 해나가고 싶다.
  • 트렐로는 이번 프로젝트때 처음 사용해본 툴이다. 프로젝트를 시작하고나서는 모두가 트렐로를 사용하는데 집중을 했지만 아무래도 익숙치가 않은 도구이다 보니 점점 트렐로로 일정관리를 하지 않고 노션에만 치우친 작업 관리를 하게 되었다. 막상 사용하면서는 몰랐는데, 회고 미팅을 하면서 다음부터는 주어진 툴을 제대로 사용해야 겠다는 생각이 들었다. 팀 모두가 동의 하였고 이 다음에 진행되는 프로젝트에서는 일정 관리에 보다 집중을 해야겠다는 다짐을 하였다.
    
    

🎉 프로젝트를 마치며

2주가 어떻게 지나갔는지도 모르게 정신없었던 시간이었지만 내게 주어졌던 시간보다 얻은 게 많았던 나의 첫 프로젝트였다. 아직 초보 개발자이지만 애자일 방식에 대하여 깊게 고민해보았었고, 어떻게 하면 내가 좋은 동료가 될 수 있을까? 진심으로 소통하는 방식에 대해서도 여러 시도를 해보며 배워나갔다.
특히나 react.js를 멘토님들께 질문하며 혼자 작업해나갔을 때 보다 동료들과 서로 질문하고, 같이 고민하며 배운점이 훨씬 많았다는 점이 너무 신기하였다. 동료들은 나의 친구이자, 멘토였고 나 또한 그들을 포용하며 발걸음을 맞추기 위해 노력했었다.
그 과정에서 분명 아쉬움도 많이 남았지만 기쁨과 설레는 여운이 더욱 크다.
다시 한번 함께 보폭을 맞춰준 팀원들에게 감사를 표하고 싶습니다.