TIL 12일차

Import

export 키워드로 내보진 변수, 함수 등등을 불러올 수 있는 키워드

import defaultExport from ‘module-name’;

module-name 내에 export default로 내보내진 것을 가져온다. 컴포넌트는 이 규칙을 활용하는 경우가 많다

import * as allItems from ‘module-name’;

module-name 내에서 export 된 모든 것을 모두 가져온다. as 이후 이름은 중복되지 않으면 자유롭게 정할 수있다.

import { loadItem } from ‘module-name’;

module-name내에서 export 된 것 중에 특정 값만 가져온다.

import { loadItem as loadSomething } from ‘module-name’;

module-name내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져온다.

import defaultFunction, { loadItem } from ‘module-name’;

export default 된 것과 개별 export 된 것을 한번에 가져올 수도 있다.

import ‘module-name’;

별도의 모듈 바인딩 없이 불러오기만 한다. 불러오는 것만으로 효과가 있는 스크립트의 경우 사용된다.

import를 사용하려면 웹서버가 필요하다. 뭔가 잘안되면 from 이후 모듈이름 맨뒤에 .js를 잘붙였는지 확인해보기!

fecth("https://naver.com")
  .then((res) => {
    return res.json();
  })
  .then((todos) => {
    console.log(todos);
  });

Response 객체를 얻은 뒤엔 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리를 해줘야된다.
fecth의 두 번째 인자로 옵션을 줄 수 있다.
다른 method도 있지만 blob이란 method는 이미지를 처리하는데 쓸 수 있다.
fetch는 HTTP error가 발생하더라도 reject되지 않는다. (ex 404에러가 돌아와도 reject가 아닌 resolve가 된다는 뜻) 네트워크 에러나 요청이 완료되지 못한 경우에만 reject된다.
서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 status code나 ok를 체크해주는 것이 필요하다.

res.ok: status가 200~299사이인 경우 true가 된 다.