GITHUB 주소(주요 commit은 다른 프로젝트에서 하다 옮겨서 commit 누적이 없다..)
https://github.com/loy124/CGV_Clone
loy124/CGV_Clone
Spring + mybatis + html + javascript + css CGV 사이트 크롤링을 활용한 영화예매(가상) 사이트 만들기 - loy124/CGV_Clone
github.com
제작기간 : 8일 정도 (주말 포함)
사용한 주요 기술: Spring, MyBatis, HTML, CSS, JAVASCRIPT
사용한 주요 라이브러리 :
Jsoup(크롤링), Gson(json변환), jQuery, toastr(notification), 아임포트(카카오페이), cookie 관련 라이브러리
사용한 프로그램: Aquery(DB제작 프로그램), 트렐로(구상), Vscode, Sts(eclipse)
주요 목적: 크롤링을 활용해 현재 상영중인 영화 정보가져오기, 예약기능및 카카오페이 모듈을 활용한 결제 시스템 구현하기(개발자용 테스트 모듈), 마이페이지에서 예약한 정보 가져오기
개발시 중점을 둔점:
제이쿼리를 최대한 활용하지 않으려고 애를 썼다. 쿠키와 ajax 부분을 제외하고는
전부 순수 자바스크립트(바닐라 자바스크립트)를 사용해서 하였다. 덕분에 자바스크립트랑 조금더 친해진 계기가 되었다.
스프링 기초 셋팅을 한 후에 가장 먼저 한 일은 크롤링이였다.
해당 홈페이지의 현재 상영 목록을 Jsoup을 활용해 크롤링으로 가져왔고
해당 내용을 담을 dto를 생성해서 담아 준후 list에 넣어줬다.
또한 해당 list들을
GSON 라이브러리를 통해 해당 크롤링 한 값들을 json 으로 변화 시켰고 해당 값들을 ajax로 값을 받아왔다
무비차트 < 무비차트 | 영화 그 이상의 감동. CGV
1917 예매율16.3% 96% 2020.02.19 개봉 영화 찜하기 7,234명이 선택 예매
www.cgv.co.kr
해당 현재 상영중인 영화 사이트의 정보들을 크롤링 하였다
알림 부분은 전체적으로 alert 와 toastr을 활용하였다
https://codeseven.github.io/toastr/
Toastr by CodeSeven
toastr toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Demo Demo can be found at http://codeseven.github.io/toastr/demo.h
codeseven.github.io
특히 회원가입 및 로그인 부분에는 img 부분을 Math.random() 을 활용해서
새로고침시 포스터가 변화할수 있도록 하였다.
메인페이지는 크롤링 된 값들을 forEach를 활용해서 한번에 뿌려줬다.
예매버튼을 클릭하면 예매 창이 나오게된다
예매부분 영화 고르는곳은 ajax를 통해 크롤링된 영화 값들을 가져왔으며
날짜 고르는 부분은
https://loy124.tistory.com/192
자바스크립트를 활용해 현재 날짜부터 마지막 날짜 구하기
자바스크립트를 활용해서 해당 필요한 날짜들을 추가해주는 로직을 만들었다. 날짜 클릭시 class를 추가하고 다른 날짜를 클릭하면 나머지 active 클래스가 제거되는 방식으로 만들었다. ..
loy124.tistory.com
해당 부분을 활용해서 자바스크립트로 만들었다
예약하기를 누르면 좌석 선택창으로 이동된다
해당 좌석 부분은 javascript 2중 for문을 활용하여 만들었다
해당 코드를 짜면서 자바스크립트랑 조금더 친해진 계기가 된거같다(꽤나 힘들었다)
https://loy124.tistory.com/191
자바스크립트 2중 for문을 활용한 좌석 만들기
미니 프로젝트를 위해 영화 좌석을 선택하는 란을 만들기 위해 만들어보았다. 버튼 클릭시 clicked를 toggle로 전환하고 클릭시에 추가된 clicked 들을 가져오는 로직이다 clicked class가 추가된 경우엔 clicked..
loy124.tistory.com
kakao pay 버튼을 누르면
카카오페이 결제창으로 이동한다.
(카카오페이는 해당 아임포트를 활용했다) https://loy124.tistory.com/183?category=758081
카카오 페이 라이브러리 (아임포트)사용하기
form 파트 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
결제가 완료되면
마이페이지로 이동한다
마이페이지에서는 예약한 내용을 조회 가능하다(pay table과 reserve table을 join 하여 나타내었다)
해당 마이페이지를 마지막으로 프로젝트를 마무리하였다.
느낀점
해당 프로젝트를 만드는 동안 정신없이 코딩을 한거 같다.. 뭔가 열정을 쏟을수 있는 좋은 계기가 되었다.
+ 순수 자바스크립트를 최대한 사용하면서 제이쿼리가 아닌 자바스크립트만으로도
어느정도 코드를 짤 수 있겠다는 생각이 들었다. 버튼 선택시 중복 선택을 못하게 하는등 여러가지 처리를 하면서 좋은 공부가 되었다.
'프로젝트 > 미니 프로젝트' 카테고리의 다른 글
| Docker + PM2 + winston.js를 활용한 무중단 운영 시스템 구축하기 (0) | 2021.07.12 |
|---|---|
| OAuth 2.0 인프런 사이트 소셜 회원가입 분석 (0) | 2021.07.09 |
| naver datalap api를 활용한 data visualization 구현하기(Node.js + Vue + chart.js) (0) | 2021.03.20 |
| vue(CLI) + vue bootstrap + axios + movie api(tmdb)를 활용한 vue 영화 소개 사이트 제작하기 (vue movie, 영화 사이트, vue 영화 사이트) (0) | 2020.09.07 |
| vue-cli방식을 활용한 vue 포트폴리오 사이트 제작및 github 배포하기 (0) | 2020.04.30 |
