사전 필수코스 2일차

 

1. ChatGPT 웹개발 2주차 수강하기

 

 - 1주차에 완성한 html에 동적 효과 적용 (javaScript)

 

 - jquery 및 기초 javaScript에 대하여 학습

 

 - 외부 api (JSON)를 사용하여 데이터 크롤링

 

 - 실시간으로 날씨 정보를 받아와서 표기해주는 사이트 제작 과제 수행

 

 

2. 새롭게 알게된 지식

 

 - fetch 함수

 

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

* options 항목

 

 - method : GET, POST 등 요청 메서드 ( 별도 지정하지 않을시 default => GET 방식 )

 

 - header : 요청에 추가하고자 하는 헤더 (캐릭터 인코딩이나 타입을 지정할 수 있다.)

 

 - body : 요청 시 서버로 전송되는 데이터 (POST 방식으로 값을 전달할 때, Json 이나 string등 body를 통하여 data를 전달 할 수 있다.)

 

 - mode : 요청을 어떻게 처리할지를 지정하는 옵션

•  "same-origin" : 기본값으로, 동일한 출처(origin)에서만 요청이 허용 ( 현재 문서의 출처와 요청하는 리소스의 출처가 같아야함)
• "cors" : Cross-Origin Resource Sharing (CORS)를 사용하여 다른 출처에서의 요청을 허용
• "no-cors" : CORS 요청을 사용하지 않고, 브라우저가 기본 정책에 따라 요청을 처리(이 모드에서는 응답의 본문에 접근할 수 없음)
• "navigate" : Window 객체의 navigate 라이프사이클에 따라 캐시된 리소스를 사용하여 네비게이션 요청을 처리

- credentials : 
브라우저가 자격증명(쿠키, HTTP 인증 항목, TLS 클라이언트 인증서)을 어떻게 취급할지 제어

•  "omit" 
•  "same-origin"
• " include"

- cache : 요청이 브라우저 HTTP 캐시와 어떻게 상호작용할지 제어

•  "default" 
•  "no-store"
•  "reload"
•  "no-cache"
•  "force-cache"
•  "only-if-cached"

 - redirect : 리다이렉트 응답 처리 방법

•  "follow" : 자동으로 리다이렉트를 따라감 (default)
•  "error" : 리다이렉트 발생 시 오류와 함께 요청을 중단
• " manual" : 호출자가 응답을 다른 컨텍스트에서 처리

 - referrer, referrerPolicy, integrity 등 존재 (필요시 확인하여 사용)

 

* 구글의 네이버의 홈페이지를 가져오고자 한다면 CORS를 허용하지 않기 때문에 직접적인 요청을 보낼 수 없어 불가능 ( 해당 홈페이지에서 제공하는 api를 사용하여 데이터를 가져와야 한다.)