오픈 api로 명언을 받아오는 로직을 작성하였다.
Access to fetch at 'https://api.adviceslip.com/advice' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
fetchQuotes.ts?7403:11
라는 오류가 뜨면서 거부가 되었다 디버깅을 해서보니 cors오류였는데, fetch작성 문제가 있어서 수정하였다.
const fetchQuotes = async (): Promise<any> => {
const quotesRes = await fetch(QUOTES_API_URL, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
console.log(quotesRes);
return quotesRes.ok ? quotesRes.json() : "failure";
};
나의 목적은 ok이 인지 확인하고 그값을 넘겨주면 await으로 값을 받아오는 것이 목적이었다.
await 없이 값을 받아오려했음
const result = fetchQuotes(); 작성하였더니
panding이 뜨면서 실패하였다.
await를 작성하고 async까지 작성하였더니
초기에 렌더링되면서 그대로 panding 되는 상태로 되었다.
함수에 넣기
함수에 넣어서 onClick으로 돌리면 원활하게 돌아갔지만
나의 목적은 초기에 이 함수를 보여주고 싶은 것이었다.
그래서 그런 방법을 달성하기 위해서 SSG를 시도하였다.
내가 만들고 있는 프레임워크는 NEXT.JS라서 getStaticProp를 이용해서 값을 받아오려했지만 최상단이 아니라서 실패하였다.
getStaticProp
getStaticProp를 사용하려면 최상단에서 내려주어야한다는 것이었다.
사실 어레짐작하고 있었지만, 확신을 갖고 싶어서 시도하였다.
최상위로 올려서 시도하였고, 문제가 있었다.
객체 렌더링
React에서는 객체를 JSX.Element와 함께 작성 못하게 되어있다.
그래서 오류가 발생하였고, 이후 타입을 정의하고 원하는 값만 빼서 렌더링 시켜서 해결하였다.
확실히 공부를 많이해왔지만, fetch의 로직을 전체적으로 구성하고 계산에 따라 흐르도록하는게 쉽지 않았다.
그래도 성공적으로 잘마무리되었다.
