23.03.24. 점심메뉴 월드컵 페이지 만들기

Issue

간단한 웹개발 수강을 기반으로 토이프로젝트를 만들기로 했다. 간단한 웹페이지라서 4명이 역할을 분담하기 애매해서 각자 개발하기로 했다.

 

32개의 이미지 URL을 가지고, 소위 OOO 월드컵 게임을 구현하는 것이다. 머리속에서 간단하다고 생각했으나 실제로 구현하기 위해서는 약간의 고민이 필요했다. 

---

Try&Error

우선 구현해야 하는 간단한 조각을 나열했을 때

• 랜덤으로 두 이미지를 추출하되, 추출하고싶지 않은 리스트를 반영해야 할 것
  (구현하다 보니 두 이미지에서 n개의 이미지를 랜덤으로 추출하도록 수정했다.)
• 두 이미지가 떠 있을 때 선택한 이미지와 미선택한 이미지에 대한 정보 저장
• 선택 후 새로운 두 이미지로 화면 전환
• 32강, 16강, 8강, 4강 ... 으로 바뀌는 지점에 대한 로직
• 게임 결과값을 DB에 저장하고, DB에 저장되어있는 정보를 첫 화면에서 보여주기

다 만들고 나서야 정리가 되지만, 처음에 어떻게 만들지 생각하던 중에는 여러번 만들었다 지웠다 한 기능이 많았다. 만들고나서 중복되는 기능은 합치기도...

 

그리고, 이런 기능을 웹서버에서 처리할 것인지(python Flask) 아니면 JS로 구현할 것인지와, 중간 선택값들을 DB에까지 저장할지 아니면 다른 방법이 있을지에 대한 고민이 생겼다.

 

우선 익숙한 python으로 기능을 구현해봤고, 공부 겸 JS로도 구현을 했다. 그리고 중간 값들은 jQuery로 HTML 태그 안에 쌓아두는 방식을 선택하고, DB에는 게임 결과값만 저장하기로 했다.

 

 

---

Solution

 

웹페이지의 flow chart와 html 구조는 아래와 같다.

점심메뉴 월드컵의 flow chart와 HTML 태그 구조

실제로 이런식으로 기획을 하는지는 모르겠지만, 다 만들고 정리차원에서 그린 것이라... 유의미한 학습인지는 잘 모르겠다. 다만 다음 기획에서는 먼저 이런 그림을 그리고 나서 만들기 시작해야겠다는 생각이 들었다.

 

개발한 코드는 여기에서 확인할 수 있는데, 대부분 jQuery API로 화면 전환 ".hide(), .show()" 과 중간 값 저장 ".empty(), .append()"을 구현했다.

---

Learned

간단한 웹페이지 개발이라 간단하긴 하나, 뭔가 더 해보고 싶은 점이 많이 생기는데 잘 몰라서 구현하지 못한 것이 많아 아쉽다. 몇가지 떠올려 본다면,

• 비선택 메뉴가 fadeout 되고, 선택 메뉴가 커지거나 중앙으로 오는 animation
  • 시도 해보려고 했으나, jQuery .empty()로 HTML 태그를 삭제하는 방식으로 화면을 전환해서, fade 처리 후 .empty()를 실행하도록 하는 방법을 찾다가 보류했다.
• node.js로 서버 구현
  • Flask가 가장 간단하기 때문에 아마 강의에서 알려준 것 아닐까 싶은데, node.js로 구현해보는 것도 해보고 싶었으나, 곧 강의가 있거나 과제가 떨어지지 않을까 해서 보류.
• 기타 누구나 한번쯤 개발해보는 좋아요, 댓글, 댓글 좋아요 같은 메뉴들
  • 내일 시간이 되면 해봐야겠다. 결국 DB를 적극적으로 활용하고, GET과 POST 요청을 좀 더 많이 써본다는 정도의 차이 아닐까? 

AWS Elastic Beanstalk으로 배포한 페이지, 언제 없어질지 모른다.