2024. 01 .16 TMDB 영화 리뷰 기능 구현 코드 뜯어보기_2 (팀프로젝트)

코드를 뜯어서 보다보면 사용되지 않는 부분들이 많은 것 같다.

하나씩 채우고 수정하는 중이다.

 

 

 

오늘은 포인트 부분 코드를 알아보자

 

< getPoint.js >

class AspectPoints {
  constructor() {
    this.aspects = document.querySelectorAll(".aspects .aspect-item");
    this.selectedAspects = [];
    this.initialize();
  }

  initialize() {
    this.aspects.forEach((item) => {
      item.addEventListener("click", () => {
        item.classList.toggle("active");
        this.updateSelections();
      });
    });
  }

  updateSelections() {
    this.selectedAspects = Array.from(this.aspects)
      .filter((item) => item.classList.contains("active"))
      .map((item) => item.textContent);
    console.log("Selected Aspects:", this.selectedAspects);
  }
}

class EmotionPoints {
  constructor() {
    this.emotions = document.querySelectorAll(".emotions .emotion-item");
    this.selectedEmotions = [];
    this.initialize();
  }

  initialize() {
    this.emotions.forEach((item) => {
      item.addEventListener("click", () => {
        item.classList.toggle("active");
        this.updateSelections();
      });
    });
  }

  updateSelections() {
    this.selectedEmotions = Array.from(this.emotions)
      .filter((item) => item.classList.contains("active"))
      .map((item) => item.textContent);
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const aspectPoints = new AspectPoints();
  const emotionPoints = new EmotionPoints();
});

 

 < class AspectPoin >

감상 포인트를 선택할 수 있는 부분

 

 

 

class AspectPoints {
  constructor() {
    this.aspects = document.querySelectorAll(".aspects .aspect-item");
    this.selectedAspects = [];
    this.initialize();
  }
  
  
//감상포인트 html 코드
 <div class="aspects" id="aspects">
  <div class="aspect-item">연출</div>
  <div class="aspect-item">연기</div>
  <div class="aspect-item">스토리</div>
  <div class="aspect-item">영상미</div>
  <div class="aspect-item">OST</div>
</div>

 

 

this.aspects = querySelectorAll 함수를 사용해 html에 있는 .aspects 아래에 있는 .aspect-item 받아오기

this.slelctedAspects  ➡️  빈배열

this.initialize = initialize  ➡️  호출

 

**querySelectorAll을 사용한 이유는 아래 15번 TIL에 기재해 두었으니 참고!

https://anywhereim.tistory.com/15

 

 

< initialize >

  initialize() {
    this.aspects.forEach((item) => {
      item.addEventListener("click", () => {
        item.classList.toggle("active");
        this.updateSelections();
      });
    });
  }

 

 

this.aspects.forEach((item) => { }) ➡️ initialize 매서드는 aspects의 item을 인자로 받아 하나씩 꺼내고,

item,addEventListener("click", () ={ })  ➡️  꺼낸 item들이 addEventListener 이벤트를 이용해 클릭되면 

item.classList.toggle("active");  ➡️  classList속성과 classList의 매서드인 toggle사용해 active 상태로 변환하고 

this. updateSelections   ➡️  updateSelections를 호출한다.

 

 

< updateSelections >

  updateSelections() {
    this.selectedAspects = Array.from(this.aspects)
      .filter((item) => item.classList.contains("active"))
      .map((item) => item.textContent);
  }
}

 

this.selectedAspects = Array.from(this.aspects) 

➡️  filte를 사용하기 위해  Array.from 메소드로 aspects 유사배열을 진짜 배열로 변환

 

.filter((item) => item.classList.contains("active"))  ➡️   받은 배열을 active 된 부분만 걸러내 새 배열을 만들고

.map((item) => item.textContent)   ➡️  map으로 item의 배열을 가져오고 각각의 값에 따라 텍스트 내용으로 변환된 새로운 배열을 보여준다.

 

즉, filter로 조건에 맞게 필터링 하여 배열을 갖게되고 map으로 각 요소에 데이터를 원하는 형태로 변환!

ex) item = 공포, 흥미진진, 슬픔, 감동

filter _ 공포, 슬픔

map_ 공포(선택), 흥미진진, 슬픔(선택), 감동

 

**Array.from

= JavaScript 매소드로, 유사 배열 객체, 반복 가능한 객체를 배열로 변환하는데 사용된다.

 

유사배열 객체란 배열처럼 인덱스를 사용해 접근 할 수 있고, length 속성을 가진다.

배열을 흉내는 객체라고 생각하면 되는데 length 속성으로 DOM 요소에 접근할 수 있지만

고차원함수(filter, map, reduce) 속성은 가지고 있지 않다! 

 

querySelctorALL은 NodeList를 반환하는데 직접 NodeList에 배열 고차원  함수를 사용하게 되면 에러가 난다.

Arrary.from을 사용하면 유사 배열 객체를 진짜 배열로 변환해 주기 때문에 배열 고차원 함수 사용가능!!

 

 

---

 

< class EmotionPoint >

감정 포인트를 선택할 수 있는 부분

 

 

class AspectPoint와 동일한 구조로 설명은 생략 --

 

< class EmotionPoint >

class EmotionPoints {
  constructor() {
    this.emotions = document.querySelectorAll(".emotions .emotion-item");
    this.selectedEmotions = [];
    this.initialize();
  }
  
  //html 감정포인트
<div class="emotions" id="emotions">
    <div class="emotion-item">공포</div>
    <div class="emotion-item">흥미진진</div>
    <div class="emotion-item">슬픔</div>
    <div class="emotion-item">감동</div>
</div>

 

 

< initialize >

initialize() {
    this.emotions.forEach((item) => {
      item.addEventListener("click", () => {
        item.classList.toggle("active");
        this.updateSelections();
      });
    });
  }

 

 

< updateSelections >

 updateSelections() {
    this.selectedEmotions = Array.from(this.emotions)
      .filter((item) => item.classList.contains("active"))
      .map((item) => item.textContent);
  }
}

 

 

 

< 새로인 인스턴스 생성 >

document.addEventListener("DOMContentLoaded", function () {
  const aspectPoints = new AspectPoints();
  const emotionPoints = new EmotionPoints();
});

 

HTML이 로드되고 DOM트리가 완성되면 DOMContentLoaded 이벤트가 addEventListener  추가

즉, DOM이 준비되면 AspectPoints, EmotionPoints 객체가 생성되고, 각 지정된 DOM요소에 맞춰서 동작이 수행된다!

 

---

 

 

< getPersonal.js >

class PersonalInfo {
  constructor() {
    this.nameInput = document.getElementById("name");
    this.passwordInput = document.getElementById("password");
    this.errorMessage = document.getElementById("required");
    this.initialize();
  }

  initialize() {
    this.nameInput.addEventListener("input", () => this.validateName());
    this.passwordInput.addEventListener("input", () => this.validatePassword());
  }

  validateName() {
    const nameRegex = /^[A-Za-z가-힣ㄱ-ㅎㅏ-ㅣ]+$/;
    if (!this.nameInput.value.match(nameRegex)) {
      this.errorMessage.style.display = "block";
      return false; // 유효성 검사 실패
    } else {
      this.errorMessage.style.display = "none";
      return true; // 유효성 검사 성공
    }
  }

  validatePassword() {
    const passwordRegex = /^\d+$/;
    if (!this.passwordInput.value.match(passwordRegex)) {
      this.errorMessage.style.display = "block";
      return false; // 유효성 검사 실패
    } else {
      this.errorMessage.style.display = "none";
      return true; // 유효성 검사 성공
    }
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const personalInfo = new PersonalInfo();
});


//HTML getPersonal
          <div class="getpersonal" >
            <input
              class="name"
              type="text"
              id="name"
              name="name"
              placeholder="이름을 입력해 주세요!"
              title="문자만 입력해 주세요."
              required
            />

            <input
              class="password"
              type="text"
              id="password"
              name="password"
              placeholder="확인할 번호를 입력해 주세요"
              oninput="this.value=this.value.replace(/[^0-9]/g,'');"
              maxlength="4"
              required
            />
          </div>
          <p id="required" style="display: none; color: red">이름에는 문자만 확인할 번호는 숫자만 입력 가능합니다.</p>

 

 

class PersonalInfo {
  constructor() {
    this.nameInput = document.getElementById("name");
    this.passwordInput = document.getElementById("password");
    this.errorMessage = document.getElementById("required");
    this.initialize();
  }

 

constructror부분은 앞으로 설명을 생략하는 것으로.. 동일한 코드인데 설명을 너무 자주했어 ㅎ

 

 

  initialize() {
    this.nameInput.addEventListener("input", () => this.validateName());
    this.passwordInput.addEventListener("input", () => this.validatePassword());
  }

 

nameInput 에 addEventListener 이벤트를 연결해 input 값이 입력되면 validateName()에 값을 담고

passwordInput 에 addEventListener 이벤트를 연결해 input 값이 입력되면 validatePassword()에 값을 담는다.  

 

 

  validateName() {
    const nameRegex = /^[A-Za-z가-힣ㄱ-ㅎㅏ-ㅣ]+$/;
    if (!this.nameInput.value.match(nameRegex)) {
      this.errorMessage.style.display = "block";
      return false; // 유효성 검사 실패
    } else {
      this.errorMessage.style.display = "none";
      return true; // 유효성 검사 성공
    }
  }

 

const nameRegex = js 정규표현식

nameInput 에 value가 match (인자로 정규표현식 받아서)확인 후 false면  errorMessage의 style의 display 는 block !  

nameInput 에 value가 match (인자로 정규표현식 받아서)확인 후 ture면  errorMessage의 style의 display 는 none!  

 

  validatePassword() {
    const passwordRegex = /^\d+$/;
    if (!this.passwordInput.value.match(passwordRegex)) {
      this.errorMessage.style.display = "block";
      return false; // 유효성 검사 실패
    } else {
      this.errorMessage.style.display = "none";
      return true; // 유효성 검사 성공
    }
  }
}

 

const passwordRegex = js 정규표현식

passwordInput 에 value가 match(인자로 정규표현식 받아서)확인 후 false면  errorMessage의 style의 display 는 block !  

password Input 에 value가 match (인자로 정규표현식 받아서)확인 후 ture면  errorMessage의 style의 display 는 none!  

 

document.addEventListener("DOMContentLoaded", function () {
  const personalInfo = new PersonalInfo();
});

 

이 부분도 매번 반복됨으로 동일한 경우 설명 생략

 

내일 남은 코드 뜯어서 전부 수정할 예정!!