일주일만에 돌아온 무쓸모톤🙃
요즘 이것저것 정신 없어서 생각보다 늦게 돌아왔다 더 열심히 살자^^

📌 지난 이야기

---

무쓸모톤에 참가하게 되어 간단한 테스트를 통해 쓸모 없는 선물을 추천해주는 서비스로 주제를 정했고, 프론트 친구들이 메인 페이지 프로토타입을 만들어왔다.

🛠 기술 Stack

• HTML, CSS, JavaScript
• Django
  
  

💡 아이디어 구체화

---

팀 전체 회의를 하면서 아이디어 구체화를 시작했다.
우리 서비스도 MBTI처럼 결과를 16가지로 만들고, E/I, S/N, T/F, J/P 각 요소 중 하나가 되도록 각 요소마다 3문제씩 만들기로 했다.

결과를 16가지로 만들기로 했으니까 16가지의 선물을 골랐는데, 진짜 쓸모없는 물건들을 말해서 회의 과정이 너무 재밌었다😁

이렇게 아이디어 구체화를 끝냈고 프론트 친구들도 페이지 구현을 시작했다.

그러면 이제 뭐다..?

백엔드 열일 시작이다!^^

✔ Database UML 만들기

---

UML : Model 과의 관게와 속성 등을 구성하는 도표.

UML 만드는 사이트

먼저 우리가 만들 서비스의 Database UML을 제작하였다. (DB간의 관계도 표시했어야 했는데 까먹어버렸다..ㅎㅎ)

1. question 모델

• 테스트 정보를 담을 모델
• que: 질문 내용
• answer1 : 선택지 1
• answer2 : 선택지 2
• page : 문제 번호

2. result 모델

• 결과 정보를 담을 모델
• image: 상품 사진
• body: 결과 내용

UML을 토대로 Django 초기 세팅 + 각 모델마다 CRUD도 끝낸 뒤 github에 올렸다.

기능 구현에만 충실한 첫 번째 버전 ㅎㅎ (디자인, 채워진 값 모두 엉망 그 자체😖)

✔ 결과 계산 로직 구현

---

이제 각 문항에 답변한 결과에 따라서 16가지의 결과 중 하나를 보여주는 로직을 구현해야한다!
사실 처음 아이디어를 떠올렸을 때 구현이 그렇게 안 어려울 줄 알았다.

생각했던 방법

• 각 페이지마다 한 문제씩 보여준다.
• 문제 답변을 클릭할 때마다 button의 value값을 넘겨주면 result 같은 전역 변수를 만들어서 계속 더해준다.
• 마지막 문제에 답변하면 이 result 값에 따른 결과를 보여준다.

처음의 나: 그냥 onclick 이용해서 버튼 눌릴 때마다 value값 넘겨주고,, 마지막에 계산해서 조건문으로 나눠서 보여주면 되는거 아닌가?

몇 번 시도한 뒤의 나: 니가 뭘 알아,,😤

시도했던 방법들

1. JS 이용해서 계산

JS를 이용해서 onclick에 함수를 설정해서 전달받은 값을 result 변수에 저장해준다. (❌)

→ 다른 페이지로 넘어갈 때마다 result 변수가 0으로 초기화가 되었다.

2. onclick시 views.py로 값을 전달함

전달받은 값을 question 앱의 views.py에서 처리해주기 위해서 form의 action에서 choice 함수를 호출해주었다. (choice함수는 값을 전달받아서 변수에 값을 저장해주는 함수) (❌)

→ 값은 제대로 저장이 되는데 이제 자동으로 다음 문제로 넘어가지를 않는다. form의 action 안에 a 태그를 쓰면 a 태그가 적용이 안되는 문제였다 ㅠㅠ

2번의 문제를 해결하기 위해서는 ajax를 써야한다고 하는데 한 번도 써본 적이 없고 JS로 onclick하는 것도 무척 힘들었기 때문에 ajax는 포기,, 이쯤되니까 views.py에서 어떻게든 해결해야겠다고 생각했다.

3. account 모델에 field 추가

account 모델에 result1, result2, result3, result4, result를 추가로 만들어주었다.

매우매우 비효율적이지만 이미 JS로 여러 방법을 시도해보면서 시간이 많이 흘렀기 때문에 최선의 방법이었다 ㅠㅠ

수정된 UML

이렇게 만들어서 views.py에 전달받은 값을 result1, result2, result3, result4에 각각 저장해서 result에 어떤 유형인지 저장해주었다.

이외에도 여러 부분에서 막혔지만 백엔드 파트를 맡은 친구와 열심히 해결해나갔다. 이 과정을 제출 2일 전까지 하다가 겨우 백엔드 기능을 완성하였다😫

이때 이것저것 할게 많아서 잠도 많이 못 잤다 나 잠 하루에 8시간 자야하는데,,

🔗 FrontEnd, BackEnd 연결

---

해커톤 제출 전날, 저녁 7시부터 Front와 Back 연결을 시작했다.

프론트 친구들도 연결 작업을 도와주거나 추가로 수정해야할 부분이 있어서 수정해주었다.
근데 base.html을 분리하는 과정에서 자꾸 에러가 나서 이 에러를 해결하느라 시간이 많이 소요되었다.
그리고 나는 audio 파일도 서버에 연결하는 작업도 맡았는데 이것도 처음 해보는 작업이어서 한 30분 정도 헤맸던 것 같다.

이것 저것 연결하는 과정에서 문제가 자꾸 발생했고, 내가 JS를 이용하는 부분이 있었는데 그와 관련된 프론트엔드 부분도 수정을 하게 되었다😢 프론트엔드 부분은 내가 작성한게 아니라서 전체적인 구조 파악하는 것도 힘들었고, 이 과정이 새벽까지 이어졌는데 제대로 쉬지도 못해서 정말 정신적으로 육체적으로도 힘들었다.

죽겠어요..

계속 진행하다가 새벽 3시쯤?에 한 친구가 너무 피곤하다고 해서 다음날 오전에 다시 모이기로 했다.

그 다음 날에도 2시간 정도 쏟아서 결국 완성했다! 원래 배포까지 하는 것이 목표였는데 너무 지쳐서 배포는 나중에 시간 남으면 하자고 했다😄

그런데!!! 갑자기 프론트 친구가 배포를 했다면서 pythonanywhere로 배포를 해왔다. 넌 최고야^^

다른 팀들의 발표가 끝난 뒤, 동아리 사람들에게 우리 사이트를 공유했다.
다들 결과가 어이없다면서 사이트에 들어가서 테스트를 해주는 모습을 보면서 너무 신나고 뿌듯했다.

2주 내내 거의 매일 시간을 쏟으면서 열심히 만들었는데 시간과 노력이 아깝지 않았다. 우리팀 그동안 고생많았다 ㅠㅠ

🤸🏻‍♀️ 무쓸모야호~

---

아무도 내 글 안볼 것 같지만,,
혹~시~나~ 이 글을 볼 수도 있고 우리 프로젝트가 궁금하신 분들이 혹~~~시나 있을 수도 있으니까,,ㅎㅎ

✔ github
✔ 무쓸모야호 테스트 하러가기

❌ 무쓸모톤이므로 과학적 근거가 없는, 저희 팀원들 마음대로 질문을 선정하고 결과를 만들었습니다.
재미를 위한 서비스이므로 이 점 참고 부탁드립니다😀

워낙 글 솜씨도 없고 너무 내 마음대로 써서 가독성이 최악이지만 기록용이니까 이대로 마무리할거다😀