이 프로젝트에서는 영화 티켓 예매 시스템을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 영화 데이터를 비동기적으로 가져오고, 웹 페이지에 영화 정보를 렌더링하며, 좌석 선택 및 총 가격 계산 기능을 구현하는 것을 포함합니다.
이 프로젝트에서 다음을 배우게 됩니다:
axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오는 방법이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오기이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:
├── css
│ └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
├── axios.min.js
└── script.js그 중:
index.html은 메인 페이지입니다.css/style.css는 제공된 페이지 스타일 파일입니다.data.json은 요청해야 하는 데이터 파일입니다.js/axios.min.js는 axios 요청 라이브러리 파일입니다.js/script.js는 코드를 보충해야 하는 파일입니다.WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:
이 단계에서는 axios 라이브러리를 사용하여 데이터를 비동기적으로 가져오고 영화 정보를 웹 페이지에 렌더링하는 방법을 배우게 됩니다.
js/script.js 파일을 엽니다.
axios.get()을 사용하여 data.json 파일에서 데이터를 가져옵니다:
let data = {};
axios
.get("../data.json")
.then((res) => {
console.log(res);
data = res.data;
movieNameNode.innerHTML = data.name;
moviePriceNode.innerHTML = data.price;
data.seats.forEach((item) => {
let row = document.createElement("div");
row.className = "row";
item.forEach((item) => {
let seat = document.createElement("div");
seat.className = "seat";
row.appendChild(seat);
if (item) {
seat.classList.add("occupied");
}
});
seatAreaNode.appendChild(row);
});
})
.catch((err) => {
console.log(err);
});위의 코드는 data.json 파일에서 데이터를 가져온 다음, 해당 DOM 노드에서 영화 이름과 가격을 업데이트합니다. 또한 data.seats 배열의 각 행에 대해 좌석 노드의 행을 생성하고 이미 예약된 좌석에 "occupied" 클래스를 추가하여 좌석 영역을 생성합니다.
이 단계에서는 좌석 선택 및 총 가격 계산 기능을 구현합니다.
js/script.js 파일을 엽니다.
좌석 영역의 모든 좌석 노드를 가져오기 위해 변수를 초기화합니다:
const seatNodes = document.querySelectorAll(".seat");선택된 좌석 수와 총 가격을 추적하기 위해 변수를 초기화합니다:
let selectedSeatsCount = 0;
let totalPrice = 0;좌석 영역에 클릭 이벤트 리스너를 추가합니다:
seatAreaNode.addEventListener("click", (event) => {
const clickedSeat = event.target;
if (
clickedSeat.classList.contains("seat") &&
!clickedSeat.classList.contains("occupied")
) {
clickedSeat.classList.toggle("selected");
if (clickedSeat.classList.contains("selected")) {
selectedSeatsCount++;
totalPrice += data.price;
} else {
selectedSeatsCount--;
totalPrice -= data.price;
}
updateDisplay();
}
});위의 코드는 좌석 영역에 클릭 이벤트 리스너를 추가합니다. 점유되지 않은 좌석을 클릭하면 좌석 노드에서 "selected" 클래스를 토글하고, 이에 따라 selectedSeatsCount 및 totalPrice 변수를 업데이트합니다.
updateDisplay() 함수를 구현하여 선택된 좌석 수와 총 가격을 업데이트합니다:
function updateDisplay() {
count.textContent = selectedSeatsCount;
total.textContent = totalPrice;
}이 함수는 ID 가 "count" 및 "total"인 노드의 텍스트 내용을 업데이트하여 현재 선택된 좌석 수와 총 가격을 표시합니다.
이 단계를 완료하면 영화 티켓 예약 기능이 완전히 구현되어 사용자가 좌석을 선택하고 총 가격을 확인할 수 있습니다. 최종 페이지 효과는 다음과 같습니다:
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
