https://www.youtube.com/watch?v=JB_yU6Oe2eE
Promise는 비동기 실행을 위한 JS 객체이다.
? 코딩애플은 걍 디자인패턴일 뿐이라고 함.ㄷ ㄷ
state는 우리가 지정한 오퍼레이션이 실행중일 때는 pending state(보류)
오퍼레이션이 성공적으로 끝나면 fulfilled state or rejected state가 됨.
Producer vs Consumer

• Producer
  Promise가 만들어지면 executor가 자동으로 실행된다.

const promise = new Promise((resolve, reject)=>{
	//doing some heavy work(network, read files)
  console.log('doing something...');
  setTimeout(()=>{
    resolve('ellie')
    reject(new Error('no network'));             }, 2000);
  //성공시 2초 후 ellie 전달
  //실패시 2초후 no network 전달
})

• Consumer (then, catch, finally)

promise.then((value) => {
console.log(value}) 
  //성공시 'ellie'
  //then은 성공한 경우만 다루기 때문에 실패시 콘솔창에 에러 뜸

.catch((error)=>{ console.log(error)}) //no network 뜸

  
.finally(()=>{
	console.log('finally')});
  //성공이든 실패든 해당 코드 실행후 finally에 해당하는 코드 실행됨.

• Promise chaning

const fetchNumber = new Promise((resolve, reject) => { setTimeout(()=>resolve(1), 1000);});

fetchNumber
.then(num => num * 2) // 2
.then(num => num * 3) // 6
.then(num => {
  return new Promise((resolve,reject) =>{
    setTimeout(() => resolve(num-1), 1000);
  });
}).then(num => console.log(num)); //5

Error Handling

const getHen = () =>
	new Promise((resolve, reject) => {
      setTimeout(() => resolve('닭'), 1000);
    });
const getEgg = (hen) =>
	new Promise((resolve, reject) => {
      setTimeout(() => resolve('닭'), 1000);
    });
const cook = (egg) =>
	new Promise((resolve, reject) => {
      setTimeout(() => resolve('닭'), 1000);
    });

getHen()
.then(getEgg)
.then(cook)
.then(console.log) // () => 생략 가능

영화앱만들기

• 기존 fetch() 사용

  useEffect(() => {
    fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year')
      .then((response) => response.json())
      .then((response) => {
        setMovies(response.data.movies);
        setLoading(false);
      });
  }, []);

• async - await 사용

  const getMovies = async () => {
  // const response = await fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year');
  // const json = await response.json();
// 위 코드 줄이면 아래 코드.
    const json = await (await fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year')).json();

    setMovies(json.data.movies);
    setLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

usparams()

1. Route path 뒤에 "/:명칭" 추가해주기
2. 해당 라우트의 컴포넌트로 ㄱㄱ
3. useParams from 'react-router-dom' 받아주고
4. const {명칭} = useParams(); 할당
5. fetch 받는 주소에 ${명칭} 추가

예시)
<Route path="/movieapp/:id" element={<Detail />}></Route>
여기서 /movieapp/saldfknadksf 이렇게 적으면 아무 정보도 없는 detail 페이지로 이동한다.

그 이유는
https://yts.mx/api/v2/movie_details.json?movie_id=${id} <- 여기 id자리에 ddd가 들어갔기 때문에 아무 정보도 못 받아온 것!

https://yts.mx/api/v2/movie_details.json?movie_id=${id}
내가 정리한거