240422 TIL_개인 프로젝트1 (영화 검색 사이트 제작) > JS 문법 (search, split, 전역 변수, 지역 변수)

240422 ~ 240426
개인 프로젝트 영화 검색 사이트 제작

JS 1주차 ~ 5주차 강의
와이어 프레임 기획

<개인 프로젝트 필수 조건>

• [1] jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용

• [2] TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

• [3] 영화정보 카드 리스트 UI 구현
  - 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수
  - 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창

• [4] 영화 검색 UI 구현

  • API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 합니다.
  • 입력 후 검색버튼 클릭 시 실행되도록 합니다.

• [5] 아래 기재된 Javascript 문법 요소를 이용하여 구현

  • 문법 리스트

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

    • 화살표 함수 : 아래 예시 중 1개 이상 사용

      • 일반 화살표 함수

        let add = (x, y) => {
          return x + y;
        }
        
        console.log(add(2, 3));   // 5

      • 한 줄로 된 화살표 함수

        let add = (x, y) => x + y;
        
        console.log(add(2, 3));   // 5

      • 매개변수가 하나인 화살표 함수

        let square = x => x * x;
        
        console.log(square(3));   // 9

    • 배열 메소드 : 하기 예시 중 2개 이상 사용

      • forEach
      • map
      • filter
      • reduce
      • find

    • DOM 제어하기 : 아래 api 목록 중 2개 이상 사용하기

      💡 1.  문서 객체 생성과 선택
      
      - `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)` : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
      1. 이벤트 처리
      - `element.addEventListener(type, listener)` : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
      - `element.removeEventListener(type, listener)` : 해당 요소에서 등록된 함수를 제거합니다.
      - `event.preventDefault()` : 이벤트가 발생했을 때 기본 동작을 취소합니다.
      - `event.stopPropagation()` : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
      1. 기타
      - `window.location.href` : 현재 페이지의 URL을 가져옵니다.
      - `window.alert(message)` : 경고 메시지를 출력합니다.
      - `window.confirm(message)` : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

선택 사항도 존재하지만 일단 필수 사항부터 끝낸 이후 시간이 남으면 선택 사항을 해보고자 한다.

[js 문법]

search() 문자열 검색 / 몇 번째부터 시작되는지 표기
split() 문자열 => 배열로 분할

암시적 형변환 : 더하기 연산자는 문자열 우선, 그 외에는 숫자열 우선

전역 변수 : 함수 외부에서도 영향을 끼침
지역 변수 : 함수 내부에서만 영향을 끼침