[TIL] 팀 : 영화 검색 사이트1

목표

• Javascript 과정을 마무리하며, 팀원들과 함께 JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작
• 기존에 개인 과제에서 TMDB를 이용하여 수행하신 과제의 심화 버전으로 진행
• 문법 활용 능력
• 바닐라 JS로 결과물을 온전히 만드는 경험

과제 개요

1. 개인과제에서 작성한 [인기영화 콜렉션]을 발전시키는 팀 프로젝트
2. 팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전

필수 구현 사항

1. TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)

2. 영화정보 상세 페이지 구현

   • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동
   • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성

3. 상세 페이지 영화 리뷰 작성 기능 구현

   • 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현
   • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현
   • 작성한 정보는 브라우저의 localStorage에 적재

4. github PR(=Pull Request) 사용한 협업

5. UX를 고려한 validation check

   • 영화 검색 시
   • 댓글 작성 시
   • 추가 기능 구현 시 반드시

6. 기재된 Javascript 문법 요소를 이용하여 구현

   • const와 let만을 이용한 변수 선언

   • 형 변환 : 하기 예시 중 2개 이상 사용

     number → string, string → number

   • 연산자 : 하기 예시 중 3개 이상 사용, boolean → string

     논리곱(&&), 논리합(||), 논리부정(!), 삼항연산자(? :), 타입연산자(typeof)

   • 화살표 함수 : 하기 예시 중 2개 이상 사용

   • 조건문 : 하기 예시 전부 구현

     if, switch, 삼항 연산자, 조건문 중첩, if 내부 switch

   • 반복문 : 하기 예시 전부 구현

     for, for...in, for...of
     while, do~while
     break, continus

   • 객체

     let person1 = {name: "홍길동",age: 30};
     let person2 = {gender: "남자"};
     let mergedPerson = {...person1, ...person2};
     console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }

   • 배열(1) : 하기 예시 중 2개 이상 사용

     push, pop, shift, unshift, splice, slice

   • 배열(2) : 하기 예시 중 3개 이상 사용

     forEach, map, filter, reduce, find

   • null, undefined : 하기 예시 필수 구현

     null과 undefined를 활용한 ‘없는 값'에 대한 처리
     if(testValue === null) {// do something}
     if(testValue === undefined) {// do something}

   • callback 함수 : 하기 예시 필수구현

     setTimeout, setInterval을 활용한 callback 함수 처리하기

   • 자료구조 : 하기 예시 중 1개 이상 사용

     💡 Map 생성 및 사용하기
     Map의 주요 메서드 및 프로퍼티
     new Map() – 새로운 Map을 만듭니다.
     map.set(key, value) – key를 이용해 value를 저장합니다.
     map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
     map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
     map.delete(key) – key에 해당하는 값을 삭제합니다.
     map.clear() – 맵 안의 모든 요소를 제거합니다.
     map.size – 요소의 개수를 반환합니다.

     💡 Set 생성 및 사용하기(반복 포함)
     Set의 주요 메서드 및 프로퍼티
     new Set() : 새로운 Set을 생성합니다.
     set.add(value) : Set에 새로운 값을 추가합니다.
     set.has(value) : Set에 특정 값이 존재하는지 여부를 반환합니다.
     set.delete(value) : Set에서 특정 값을 삭제합니다.
     set.clear() : Set 안의 모든 요소를 제거합니다.
     set.size : Set 안의 요소 개수를 반환합니다.

   • DOM 제어하기 : api 목록 중, 4개 이상 사용하기

     • document.createElement(tagName) : 새로운 HTML 요소를 생성합니다.
     • document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다.
     • document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다.
     • document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다.
     • document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.
     • document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다.
     1. 문서 객체 조작
     • element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.
     • element.textContent : 해당 요소 내부의 텍스트를 변경합니다.
     • element.setAttribute(attr, value) : 해당 요소의 속성 값을 변경합니다.
     • element.getAttribute(attr) : 해당 요소의 속성 값을 가져옵니다.
     • element.style.property : 해당 요소의 스타일 값을 변경합니다.
     • element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다.
     • element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제합니다.
     • element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가합니다.
     • element.classList.remove(class) : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
     • element.classList.toggle(class) : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
     2. 이벤트 처리
     • element.addEventListener(type, listener) : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
     • element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수를 제거합니다.
     • event.preventDefault() : 이벤트가 발생했을 때 기본 동작을 취소합니다.
     • event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
     3. 기타
     • window.location.href : 현재 페이지의 URL을 가져옵니다.
     • window.alert(message) : 경고 메시지를 출력합니다.
     • window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

   • module

     import, export