본문 바로가기

카테고리 없음

[개발일지]MZ유행어 퀴즈 사이트 만들기

반응형

기록하는게 익숙하지 않다보니 프로젝트가 끝나고 나서야 개발일지를 작성한다.

프로젝트 완료 시점으로 개발일지를 작성하는 것이라 프로젝트를 하면서 인상 깊었던 부분에 대해 쓰려고한다.


1.개발 진행 및 완료상황

개발기간 (2022-03-21~2022-04-06)

 

현재 도메인까지 사서 aws서버에 연결을 해놓았고 

아래 주소로 가면 아래 그림 처럼 mz세대 유행어 퀴즈를 풀 수있다.

 

http://mzquiz.site/

 

MZ세대 구조

MZ언어 테스트 나의 MZ언어 능력을 테스트해보세요!

mzquiz.site

 

왼쪽- 메인페이지 오른쪽- 문제풀이 페이지
결과페이지

간단하게 사이트 설명 하자면 메인페이지, 문제 풀이페이지, 결과페이지 총 3페이지로 나누어져있다.

메인페이지는 시작 페이지, 문제 풀이 페이지에서 총 10문제의 문제를 푼다. 결과 페이지에서는 문제 결과에 대한 내 점수,유형 그리고 문제를 풀었던 사람들이 많이 받은 유형이 나온다. 추가적으로 내가 어떤 답을 선택해서 정답과 오답을 받았는지(틀렸을때는 빨간색으로 표시를 해준다), 문제를 풀었던 사람들의 오답률이 몇퍼센트로 틀렸는지까지 나온다. 

 

프론트엔드는 HTML, CSS, JavaScript 백엔드는 python, flask, MongoDB를 사용하였다.

나는 백엔드 담당이였고 DB관리와 결과페이지 데이터 생성를 생성하였다.

깃허브에 올린 프로젝트는 4번 참고할만한 레퍼런스에 넣어놨다

 

대략적인 폴더 형태

 

2. 개발 중 발생한 이슈

가장 기억에 남는 건 POST이슈 였다.

우리는 문제 풀이 페이지에서 사용자가 문제를 다 풀었을때 데이터를 서버에 넘기도록 기능을 구현했고

서버로 넘기는 데이터 타입은 list였다.

 

기존 POST에서 데이터를 받을때 request.form.get('name')을 사용해 데이터를 받았는데 리스트를 줄때만 값을 받지 못하였다. 

 

 

리스트를 request.form.get로 받음

구글링을 해서 찾아본결과 리스트를 받을때는 request.form.getlist('name')으로 받아야 한다는 걸 알았고 코드를 변경해본 결과 빈 리스트만 받았다. 

request.form.getlist오류

해당 문제가 풀리지 않아 팀원들과 헤매다가 request.form.getlist의 정확한 사용법을 알게 되었다.  request.form.getlist('name')에서 name을 리스트로 받는 다는 것을 표시해주어야 된다는 것이다.  즉 name이 아닌 name[]을 넣어서 request.form.getlist('name[]')로 선언을 해야 한다는 것이다. 사실상 js에서 데이터를 받아야 데베에 넣고 가공을 해서 js에 보내줄 수 있는데 해당 이슈가 발생했을때 시작조차 못했으니 많이 당황스러웠다.

 

위 이슈말고도 여러 이슈가 있었지만 POST이슈가 가장 인상에 남아서 기록을 한다.

이슈가 발생할때마다 같이 머리를 맞대고 끙끙거렸던 팀원들이 있었기에 프로젝트를 완성할 수 있었다고 생각한다.

 

3. 프로젝트 기간 배운내용

프로젝트 기간 동안은 배움의 연속이였다.

다른 사람과의 프로젝트 진행 경험이 처음이라 GIT 사용에 미숙했고 백엔드 개념과 구현도 처음이였다. 덕분에 웹 페이지 개발 프로젝트 흐름에 대해 이해를 할 수 있었다. DB는 웹사이트 내에서 만들어져 저장과 수정을 하는 역할이 대부분이라서 어렵진 않았지만 나중에는 외부 데이터를 수집해서 DB에 저장하는 과정도 해보고 싶다. 

4. 참고할 만한 레퍼런스

우리가 프로젝트를 기획할떄 참고했던 유행어 사이트를 올려 보았다.

 

2022 트랜드 능력고사

https://www.trendtest.co.kr/

 

2022 트능(트렌드 능력고사)

작년보다 더 어려워진 트능! 전국민이 힙스터가 될 그날까지!

www.trendtest.co.kr

 

GitHub에서 찾은 문제 풀이 프로젝트

https://github.com/jaejlf/Hangul-Spelling-Test

 

GitHub - jaejlf/Hangul-Spelling-Test: 한글 맞춤법 퀴즈 반응형 웹사이트

한글 맞춤법 퀴즈 반응형 웹사이트. Contribute to jaejlf/Hangul-Spelling-Test development by creating an account on GitHub.

github.com

 

우리 프로젝트도 완성형이니 같이 넣어봤다^^

https://github.com/SKY0514/spirder

 

GitHub - SKY0514/spirder: new spieders

new spieders. Contribute to SKY0514/spirder development by creating an account on GitHub.

github.com

 

5. 특이사항

이번 프로젝트는 스파르타 코딩클럽에서 15일 메이킹챌린지를 참여해서 진행을 하였다.

기존에는 6명이였지만 사정이 생겨 4명이서 진행되었기 때문에 많이 걱정했다. 그럼에두 매일마다 열심히 회의를 하고  밤새며 개발을 했던 팀원들과 함께 했기에 프로젝트가 잘 마무리 되었다. 우리 팀원들 모두 칭찬한다.

6. 회고

무지의 영역에 도전 하여 프로젝트를 완성 했다는 사실이 자랑스럽다. 성취감을 얻는 좋은 경험이 되었기에 뿌듯하고 가능하면 다음 메이킹 챌린지에도 도전을 할 생각이다.  회의 시간 사이에 멘토링 시간이 있었는데 프로젝트 종료기간 2일전에 멘토님이 문제푸는 페이지에 '이전' 기능을 도입하는 것이 어떠하냐 라는 조언을 해주었다. 그때 당시에는 기간도 얼마 없고 css를 반응형으로 만드는 것과 오류 데이터 수정에 집중해 '이전' 기능을 추가 구현하지는 못했다. 이 부분이 맘에 걸리는데 혼자서라도 구현 하는 것을 목표로 두고있다.

 

7. TO-DO LIST

일단 기록하는 걸 습관화하는게 우선이다. 깃, 개발일지 모두 기록을 하는 영역이고 개발자에게는 중요한 부분이라고 생각하기 때문에 더 성장하는 개발자가 되기 위해서는 일주일 간격을 기록하는 걸 목표로하자.

다음으로는 현재 15일 메이킹챌린지 말고도 학교에서 진행중인 종합프로젝트도 진행 하고 있다. 최근에는 메이킹 챌린지에 시간 투자를 많이 했고 이제는 끝났으니 종합프로젝트에 집중하고자한다.

마지막으로 회고에 적었던 내용처럼 '이전' 기능을 추가 해서 내 깃허브에 업데이트 하는것이 목표이다. 

●  4월 셋째주 개발일지 업로드하기

●  종합 프로젝트 개발일지 작성

● MZquiz.site '이전'기능 추가해서 github에 올리기

 

반응형