영화 검색 사이트 제작하면서 배운 것들

html에서 js파일 연결하는 방법

<script type="module" src="파일경로"></script>

 

 

다른 js파일에서 함수 호출하는 방법:

    1) 내가 사용할 js파일에 import { 함수명 } from "파일경로";

    2) 가져올 함수명 앞에 export를 입력한다

ex)

내가 movie.js파일에서 movieInfo라는 함수를 가져오고 싶으면,

main.js 파일에 가서 import { movieInfo } from "./movie.js"; 를 입력하고

movie.js 파일의 movieInfo 앞에는 export를 입력하면 된다.

 

 

 

api 호출하는 방법 (api는 비동기 ↓)

(특정 코드가 끝날때 까지 실행을 멈추지 않고

다음 코드를 먼저 실행하는 것)

API: (Application Propramming Interface): 

소통하기 위한 접점
앱이 프로그래밍 언어로 상호작용 할 때의 규칙
open: 말 그대로 API를 open을 해 놓은거임
백엔드를 만들어놓고 어떤 기능을 넣어놓음
API를 통해서 공개를 해놓으면 그게 openAPI임

 

한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법

식당의 API는 메뉴판

(식당과 손남이 음식을 주고받기 위한 방법)
API가 가져가야 할 내용
1. 요청방식(요청하는지 받는지)

2. 무슨자료요청인지(웹툰? 댓글? 뉴스)

3. 파라미터

(자료요청에 필요한 추가정보, 내 아이디, 이름, 몇화보고싶은지)

 

첫번째: api 호출을 위한 url 구성

// url 앞부분

const searchUrlFront =

"https://api.themoviedb.org/3/search/movie?query=";

// url 뒷부분
const searchUrlBack =

"&include_adult=false&language=en-US&page=1";

// 검색어
const keyword = "범죄도시"
const url =

searchUrlFront + keyword + searchUrlBack;

 

두번째: fetch api를 사용한 요청 보내기

fetch 함수는 api를 호출하기 위해 사용됨

fetch 함수는 요청과 응답 등의 요소를 접근하고 조작할 수 있음

// movieInfo는 요청 데이터 정보

// options는 요청 데이터 정보 안에서도 내가 원하는 정보

     const response =

 await fetch(url, movieInfo.options);

 

세번째: 응답 처리

// API 응답을 json 형태(객체)로 받아옴

const data = await response.json();

 

네번째: 데이터를 html에 반영

 // 영화 출력하는 div 선택

const main_container = document.querySelector(`#main_container`);

// 기존 내용을 삭제
main_container.innerHTML = "";

// 검색 결과 출력
xposure_With_TopRated_Movies(data.results);

* fetch 사용 방법: 인터넷에 자바스크립트 fetch 검색 → html에 코드 복붙

* fetch 데이터 통신요청 옵션 넣어줘야댐

근데 아닐때도 있음 TMDB 에서는넣어야댐

 

 

 

+ API 공부하면서 추가로 알게된 것

JSON(JavaScript Object Notation) - 자료형 의미
{"키":"값", "키":"값"} 으로 구성
API 사이트에서 Auth는 로그인 필요
HTTPS는 보안연결제공여부 CORS html내 요청에 따른 오류 여부(yes면)
Array data 가져오기
"특기": ["농구", "도술"]이면 myJson['특기'][인덱스번호]


AJAX는 페이지는 그대로 유지하고 정보만 쏙 빼올 수 있음

AJAX: avaScript와 XML을 이용한 비동기적 정보 교환 기법

 

 

깃

$ git pull origin dev (일단 팀원들꺼랑 합치기)

→ git add .

→  git commit -m " "

→  $ git push origin 내 브랜치

→  팀원들한테 풀 해달라고 말하기

※ origin이 팀원들이랑 나랑 모여있는 곳. 그니까 주소

※  git remote -v → 현재 내 브랜치 확인하는 명령어