1. 영화 예약 서비스

영화를 클릭하고 좌석을 클릭하면 클릭된 좌석이 표시되고 그와 함께 영화 티켓의 값도 표시된다.

그리고 localStorage를 사용하기 때문에 새로고침해도 정보가 그대로 남아있다.

1-1. 위계

• main.js

  • App.js

    • movieContainer.js
    • results.js
    • seats.js

• utils

  • storage.js
  • constant.js
  • validator.js(생성자 함수인지 판별하는 함수)
  • domStorage.js

[코드좌표]

2. 배운점

- HTML

1. label 과 select 와 option의 조화를 통해서 slider를 만듬

<div class="movie-container">
  <label>Pick a moive:</label>
  <select id="movie">
    <option value="12">Soul($12)</option>
    <option value="10">Avengers: Endgame($10)</option>
    <option value="9">Harry Potter: Deathly Hallows($9)</option>
    <option value="8">Wallace and Gromit($8)</option>
  </select>
</div>

2. ul과 li를 통해 showcase를 만듬

3. container를 통해 스크린과 좌석을 만듬

- SCSS

1. nth-type-of 선택자를 통해 좌석을 나눔

.seat:nth-of-type(2) {
  margin-right: 18px;
}

.seat:nth-last-of-type(2) {
  margin-left: 18px;
}

2. not(.class) 를 통해 class를 제외한 dom요소 선택

.seat:not(.occupied):hover {
  cursor: pointer;
  transform: scale(1.2);
}

3. perspective를 통해 3d효과를 줌

4. positional 인자는(keyword가 없는 그냥 인자. 위치에 따라 영향을 받는 인자) keyword인자보다(위치에 영향을 받지 않는 인자) 앞에 명시되어야 한다.

// 요런식으로 되어야 한다.
@include flex(center, $keyword: something);

- JS

1. queryselectorAll 에서 css선택자로 취사선택 가능.. 와우!

const seats = document.querySelectorAll(".row .seat:not(.occupied)");

2. container에 이벤트를 추가함으로써 모든 seats에 이벤트가 위임 됨. 그러나 contains를 사용함으로써 delegate even only down to seats class.

container.addEventListener("click", (e) => {
  if (
    e.target.classList.contains("seat") &&
    !e.target.classList.contains("occupied")
  ) {
    e.target.classList.toggle("selected");

    updateSelectedCountAndTotal();
  }
});

3. forEach, map 과 indexOf를 이용해서 selectedSeats만 잘 뽑아서 활용함

const selectedSeats = document.querySelectorAll(".row .seat.selected");

if (selectedSeats !== null && selectedSeats.length > 0) {
  seats.forEach((seat, index) => {
    if (selectedSeats.indexOf(index) > -1) {
      seat.classList.add("selected");
    }
  });
}

4. querySelecterAll은 static NodeList를 반환한다.

   • 그래서 select클래스를 추가했는데도 NodeList가 빈 arr이다.
   • 이때는 querySelectAll을 전역에 추가하지 말고 클릭할때마다 새로 불러오도록 해야한다.

   요런식으로, 클릭 될때마다 불러와야함. 그래서 dom.js에 넣고 꺼내서 사용하면 null이 나온다.

  const onClickSeats = (e = null) => {
    const selectedSeat = e.target;
    if (
      selectedSeat.classList.contains('seat') &&
      !selectedSeat.classList.contains('occupied')
    ) {
      selectedSeat.classList.toggle('selected');

      const selectedSeats = document.querySelectorAll('.row .seat.selected');
      const selectedSeatsIndexArr = [...selectedSeats].map(seat =>
        [...allSeats].indexOf(seat)
      );
      this.setState({ ...this.state, selectedSeatsIndexArr });
    }
  };

5. 개발자 도구에서 code snippets을 사용하던 도중 'URI BINDING 에러'가 나타나면 이름명을 영어로 바꿔라

tip

1. 코드를 읽을때 처음 시작하는 순간부터 차근차근 파고들며 읽어나간다. 무작정 보이는대로 읽지 말고.

2. 지극히 작은 것 부터 시작! ex(DUMMY데이터 만들기, console.log로 데이터 보기)

끝!