오늘 한 일

타입스크립트 개인프로젝트 제출(TodoList)
리액트쿼리 특강 (노션+유튜브강의)
next.js 시작

오늘 공부한 내용

✅ useEffect 안에서의 비동기 함수

• 💥 useEffect 는 함수를 반환해야 하는데 async / await 을 사용할 경우 프로미스를 반환하기 때문에 오류가 남
• 그렇다면 useEffect 내에서 async / await 함수를 사용하는 방법은?
  💡 useEffect 내에서 함수를 만들어 바로 호출

useEffect(() => {
  async function fetchdata() { 
	const { results } = await fetch( // 함수 만들고
          `http://localhost:3000`
        )
      ).json();
   fetchdata(); // 바로 호출
   setMovies(results);
    })();
  }, []);

// 이렇게도 할 수 있음
useEffect(() => {
    (async () => { // 함수 만들고
      const { results } = await (
        await fetch(
          `http://localhost:3000`
        )
      ).json();
      setMovies(results);
    })(); // 바로 호출
  }, []);

✅ Next.js를 쓰는 이유

• SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원
• 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있음
• 복잡한 Server 구축 없이도 API를 배포할 수 있음
• 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원
• 개발 환경 설정이 쉽고 간단
  (1. Linting, Compling, Bundling, Deploying을 위한 설정이 자동화

2. Router, tailwind, typescript, lint 등 주요 기능들을 configuration 없이 사용 가능)