[D+70] 2023-07-17 팀 토이 프로젝트 : MoodCraft (주류 추천 심리테스트)

 

[D+70] 2023-07-17

팀 토이 프로젝트 : 무드크래프트 (주류 추천 심리테스트)

 

 

MoodCraft

 

 

---

README

---

내가 작성한 우리 팀의 리드미!

두 번째 프로젝트는 원대한 꿈을 가지고, 나중에 해외 버전으로도 배포할 수 있다는 생각에

리드미를 한글과 영어 두 버전으로 작성해봤다 ㅋㅋ😉

 

완성한 페이지 보기 👇🏻

 

 

 

 

---

팀원 / 역할 분담

---

 

[Frontend]

 

Frontend
양콩	- 대본 스크립트 창작 - 깃허브 전체 관리 - 피그마 디자인 (배너,이미지,아이콘 등) - 메인~ 주류 결과 추천 페이지 전체 - 프로젝트 발표 - 배포
ryoonago	- 주류 추천 이후 상세 추천 페이지 - 팀소개 페이지

 

 

---

[Backend]

 

Backend
sds7629	- 결과 view 모델 , Slack 생성 및 관리
galim-kang	- 유저 get, put, post view 모델 만들기

 

 

 

 

 

---

프로젝트 후기

---

 

 

이번 무드크래프트 팀프로젝트는

 

7월 7일에 시작하여 17일에 배포 및 발표한 주류 심리테스트 프로젝트이다.

 

10일이라는 시간이 어떻게 갔는지 모를 정도로 매우 몰입하여 완성했다.

 

짧은 시간이었지만,

 

생각보다 결과가 잘 나온 것 같아서 뿌듯하고 스스로가 대견하다.

 

(칭찬해👏🏻👏🏻👏🏻)

 

 

 

---

0 . 역할분담 비하인드

---

 

이번 프로젝트는 소규모 프로젝트라, 백엔드보다는 프론트엔드의 역할이 매우 중요했다.

 

첫 역할분담으로 이야기를 나눴을 당시,

 

나를 포함해서 3명이 백엔드를 맡고 싶어했었다. ❗️❗️❗️

 

4명이 팀인데ㅋㅋㅋㅋ..

 

(프론트엔드를 하겠다는 팀원이 난색을 표하기도 했다. 😅)

 

사실 결과를 생각하면 프론트가 2명인게 밸런스가 맞다.

 

그리고 어쨌거나 이 프로젝트는 본인의 기량을 뽐내는 포트폴리오로 사용해야했다.

 

이번 프로젝트에서는 프론트엔드가 더 돋보일 것이라는 판단이 들었다.

 

그래서 프론트엔드 포지션을 맡기로 했다.

 

 

 

---

1 . 창작의 고통

---

 

심리테스트라는 틀만 주어진 프로젝트였기에

 

백엔드 개발을 제외하고 첫 기획부터 완성까지 내 손이 안닿은 곳이 없었다.

 

이전의 첫 프로젝트에서는 '코딩 시간 < 구글링 시간' 이었지만,

 

이번 프로젝트에서는 '코딩 시간 <<< 기획/디자인/토의 시간' 이었다.

 

(이런게 창작의 고통일까🫠)

 

기획을 끝내고 나니까, 틀이 잡혀서 오히려 빠른 시간 내에 기능을 잘 구현한 것 같다.

 

저번 프로젝트에서는 기획이 아쉬웠다고 작성했던 것이 생각이 난다.

 

성장했구나 나 자신아!! ㅋㅋㅋㅋ

 

그래서일까?

 

단순히 사이트 클론만 했던 이전 프로젝트 보다

 

지금 프로젝트가 훨~~~~~~~~~~씬 애착이 간다.

 

마치 자식처럼 가족들이나 주변 지인들에게 결과물을 자랑하기도 했었다 ㅋㅋ

 

 

 

---

2 . Slack을 활용한 비대면 소통

---

주말에도 서로 소통이 필요했다.

 

프로젝트 기간동안 팀원들이 아프거나 일이 있어서 토의에 참여하지 못하는 경우도 있었다.

 

처음에는 , 디스코드나 노션을 사용할까 싶었다.

 

고민을 하다가 많은 개발자들이 슬랙(Slack)을 이용해서 소통을 한다는 것을 알게 되었다.

 

우리의 소통의 창구는 디스코드+노션+앱알림기능 짱짱한 슬랙(Slack)으로 결정되었다.

 

 

 

 

---

3 . Figma 사용

---

내 머릿 속에 프로젝트에 관한 아이디어는 많았다.

 

하지만 말로서 나의 아이디어를 전부 표현하고,

 

팀원들에게 이해시키는데에는 무리가 있다는 생각이 들었다.

 

그러다가 피그마(Figma)라는 좋은 툴이 있다는 것을 알게되었다.

 

따로 피그마를 공부할 시간은 없었는데

 

다행히 이것저것 눌러보고 사용해보니 기능 자체가 어렵지 않았다.

 

그래서 바로 기획 단계에서 피그마를 도입하였다. 

 

 

디자인과 토의 내용(아이디어) 정리는 내 몫이 되어버렸다는 함정이..🫥

 

 

확실히 시각적으로 보여주니 팀원들과 소통이 원활해졌고,

 

비대면으로 소통할 때에도 어떤식으로 작업할지를 미리 보여줄 수가 있어서 편했다.

 

팀프로젝트 할때 무조건 피그마 추천,, 컨셉 미리 잡아놓으면 CSS 작성도 훨씬 편해진다.

 

 

 

---

4 . 깃허브 : 커밋 , 풀리퀘 , 브런치 활용

---

 

저번 프로젝트 때 깃허브의 활용이 너무 아쉬웠던 터라,

 

이번 프로젝트에서는 깃허브 활용을 제대로 하고 싶었다.

 

그래서 깃허브 활용을 독려하기 위해 이런 저런 활용 방법을 팀원들에게 공유했다.

 

 

나는 이 당시에는 소스트리보다는 깃허브데스크탑이 더 익숙했기 때문에

팀원들에게 깃허브데스크탑 사용방법을 알려줬다.

 

 

 

우리는 브런치와 풀리퀘스트(Pull Request)를 활용해서 프로젝트를 관리하는 방법을 택했다.

 

무분별하게 병합(merge)를 하면 메인파일에 손상이 갈 수있기에

 

커밋(commit)을 상세하게 적도록 했다.

 

그리고 풀리퀘스트는 내가 최종적으로 파일을 한 번 점검 한 뒤에 승인을 하는 방식으로 진행했다.

 

 

 

---

5 . 깃허브 : Issues , Discussions

---

 

GitHub Discussions

GitHub Issues

 

깃허브에도 메모를 한다거나

 

소통할 수 있는 기능이 있다고 해서 활용해봤다.

 

효율이 슬랙보다 떨어져서 생각보다 쓰임은 없었지만

 

나중에 회사에 들어갈 때를 생각해서 미리 써보면 좋지 않을까 싶어서

 

사용해봤다.

 

 

 

---

6 . 리액트를 안 쓰고 JS로 하드코딩한 이유

---

파이썬에 푹 빠졌었던 과거의 나 ㅋㅋ

 

그동안 팀프로젝트를 한다면

 

내가 재밌어했던 백엔드로서 활약할 수 있을 것이라고 생각했던 터라,

 

부랴부랴 3일 동안 벼락치기로 자바스크립트를 다시 공부했다.

 

익숙하지 않은 리액트를 프로젝트에 쓰는 것보다는 익숙한 자바스크립트로 코딩하는게 낫겠지 뭐..!

 

그런데 문제가 생겼다..

 

자바스크립트로 페이지를 일일히 코딩을 하다보니

 

HTML 파일이 10개가 넘어갔다.. (선택하는 페이지만 10개였다ㅋㅋ🤣😂)

 

거기에 index(메인페이지)와 결과페이지, CSS까지 페이지 별로 설정하다보니

 

볼륨이 너무 컸다.

 

그것 때문에 페이지 로딩도 느렸다.

 

 

그렇다고 또다시 리액트를 공부하자니.. 기획으로 기간의 절반 이상을 날린터라 마음이 초조해졌다.

 

장고 끝에 결국 10개에 해당하던 기존 페이지의 코드를 한 페이지에 압축하기로 결정했다.

 

 

중복되는 로직을 제거해 코드를 재활용을 할 수 있게 했고,

 

함수를 여러 개 만들어서 가독성을 높였다.

 

그리고 함수에 조금씩 변주를 주거나 함수 내에 다른 함수를 호출하거나

 

비슷한 로직은 따로 덧붙이는 식으로 해서 코드를 압축했다.

 

그래도 여전히 지저분해서 맘에 안들어..🥲

 

오류가 발생했을 때 어떤 부분에서 오류가 났는지 찾는 것도 너무 힘들었다.

 

발표 후 시간이 지나서 보니 내 코드 너무 끔찍하다 ㅋㅋ 가독성도 떨어져..

 

 

 

나중에 내 코드를 리액트로 리팩토링해서 재활용할테다!🔥🔥🔥

 

이렇게 성장하는 거겠지?

 

그래도 이번 기회에 자바스크립트를 더 잘 이해하게된 것 같아 기쁘다.

 

 

 

---

7 . 배포

---

 

주소를 사서 Netlify로 배포를 했다. 

 

개발할 때 develop과 release버전을 따로 두었기 때문에 배포는 바로 할 수 있었다. 

 

아쉬운 부분은 Netlify는 백엔드 서버랑 연동이 안되어서 결과 부분이 전송되지 않는다는 점과 방문자 수의 집계가 되지 않는다. 

 

다음 프로젝트를 할 때에는 백엔드와 연동되어 배포하는 방법을 찾아봐야겠다.

 

그리고 확실히 로컬에서 테스팅 하던 때와는 다르게

 

이미지 로딩이 많이 느리다.

 

배포 후 내 쪽에서는 문제는 없었지만 다른 팀원의 일부 기능이 작동하지 않는 오류도 있었다.

 

나중에 살펴봐야겠다.

 

https://moodcraft.shop