next+ts 7일차 json파일 읽어오기

유튜브: https://www.youtube.com/watch?v=P0PJ45J7l5s (문제해결 못함.... 해결하는 노력)
깃허브: https://github.com/qjawns0222/caremaker/tree/next+ts7%EC%9D%BC%EC%B0%A8 

어제 유튜브는 결국 못했는데 화나서 녹화끄고 찾다가 어이없게 찾았네요

import type { GetServerSideProps, NextPage } from "next";

import LoginContainer from "../containers/loginContainer";

const Login = ({ data }: { data: Object }) => {

  return (

    <div>

      <LoginContainer />

    </div>

  );

};

export const getServerSideProps: GetServerSideProps = async () => {

  // Fetch data from external API

  const data1 = await fetch(

    "https://raw.githubusercontent.com/qjawns0222/caremaker/next%2Bts-6%EC%9D%BC%EC%B0%A8/carddata.json"

  );

  const data = await data1.json();

  // Pass data to the page via props

  return { props: { data } };

};

export default Login;

이렇게 제가 만든 json파일 읽어 온느건데 async await가 필수 입니다. ㅎㅎ 

어제 유튜브에 올릭 녹화에서는 component/login.tsx 파일에서 아무리 무슨짓을 해도 getServerSideProps를 하는데 데이터 전달이 안되더라고요 그래서 녹화 끝내고 찾아보고 하다가 생각해보니까 모든 파일이 저걸 인식하게 해놓은거 아닌거 같아서 페이지폴더로 가서 해보니까  예상이 맞았네요.... pages 폴더안에서만 getServerSiderendering getServerSideProps getServerSidepath 이런게 작동하더라고요..... 내 1시간 30분 정말 간단한 이유로 소멸.... axios도 깔아보면서 별의별짓을 다했는데.... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ그래도 해결하고 나니까 기분은 좋아서 꿀잠 잤어요 ㅎㅎ

 

 

*오늘 다시해보니까 또안되네요 다시 찾아보겠습니다. 왜안되나 봤더니 stringfy안해서 안보이는거였어요 ㅎㅎ