Moostock(6) - Next.js API 만들기, CORS해결, use client에서 api 호출 등등 고군분투..

문제가 하도 많이 일어나서 두서가 없고 나는 넥스트가 처음이라 바보같아 보일수도 있따 ㅎ.

매우 징징징징 거리는 글이다

 

약 이틀동안 아주 난리 부르스였다

 

왜냐? 나는 넥스트가 처음이니까~~~

 

이전 포스팅 까지 나름 탄탄대로였다고 생각한다

 

포스트맨으로 한투 api도 잘 받아와지고, 그래프 그리는것도 잘됐으니까..

 

이제 프로젝트에서 axios 써서 한투 api 요청해서 데이터 받아와서 그래프로 보여주면 되겠다 라고 가볍게 생각했다

 

근데 일단 처음에 CORS 문제부터 발생했다

 

프론트엔드 개발자라면 아주 익숙한 에러일거다

 

그래서 당연히 참고자료도 많고 가볍게 해결될 줄 알았다

 

next js cors 라고 구글링하면 보통 rewrites를 써서 해결을 하는거 같다

 

그래서 당연히 똑같이 따라했다 근데 이게 웬걸 해결은 커녕

 

api 호출 페이지로 이동하면 api 호출하는 url로 이동을 해버리는거 아닌가...

 

그래서 다음과 같은 화면만 수십번을 볼 수 있었다..

 

아니왜 포스트맨에서는 잘 되면서 내가 프로젝트에서 하려니까 안되냐고~~~ 라고 혼자 징징거렸다

(이건 찾아보니 포스트맨은 브라우저가 아니라서 그렇댄다)

 

아무튼 진짜 구글링만 수십 수백번 하다가 도저히 안되겠어서

 

다시 처음으로 회기해서 생각을 해봤따

 

니꼴라쓰 선생님 강의로 돌아가서 api 호출하는 부분으로 돌아가봤다

 

내 코드와 가장큰 차이라면 use client 이 부분이였다

 

확실한 정보는 아니지만 내가 캔들스틱 그래프를 apexchart라는 라이브러리를 사용하는데

 

그 라이브러리를 사용하려면 use client를 사용해야 하는거 같아서 넣었는데

 

api 호출부에서 use client를 사용하면 cors 에러가 발생했다

 

그래서 use client를 다시 지우고 일단 cors 문제를 해결해보자 했다

 

여차저차 하다보니 드디어 데이터가 받아와졌다

 

이건 지극히 내 개인적인 추측이지만 아마 client 단에서 api 요청을 보내면 cors에러가 나고

 

서버단에서 요청을 보내면 cors에러가 나지 않는거 같다

(cors를 정말 여러번 봤지만 아직도 정확히 아는게 없다...)

 

쨌든 여기서 내가 내린 결론은 아니 나는 use client를 써야하는데 이걸 쓰면 cors를 해결 못하고

 

외통수라고나 할가...

 

그래서 가볍게 생각해낸 해결 방법은

1. use client를 안써도 되는 라이브러리를 찾거나 use client를 안쓰고 apexchart를 쓰는 방법을 찾는다

2. 서버단에서 api 요청을 보내는 방법을 모색한다

3. api요청을 보내는것은 어쨌뜬 성공을 했으니 page에서 호출을 하지말고

다른곳에서 api 호출후에 어딘가에 저장을 하든 props등으로 넘겨준다

 

크게 이렇게 세가지였다

 

1번은 가능성이 낮아보였고

2번은 내가 백엔드 개발을 하나도 할줄 모르는데 어떡하지 라는 생각이 들었다

그래서 3번 방법을 계속 고민하고 찾아봤다

 

여러가지 찾아보니 next js는 api도 만들수 있었다

 

뭐 next는 SSR도 되고 CSR도 되니까 당연하게 느껴지면서도

 

다시한번 next 만든사람은 정말 똑똑하고 대단하다는 생각이 들었다

 

그래서 내가 생각해낸 방법은

 

next 서버? 에서 한투에 api를 보내는 api를 만들고

 

클라이언트 단에서는 내가 만든 Next api를 보내는 것이였다

 

client => next api(내가만든) => 한투 api

 

쫌 돌아가는 느낌이 있긴 했지만 지금 내 상황에서 할수있는 방법으론 이게 최선이였다

 

그래서 결론적으로는 드디어 드디어 성공을 했다

 

 

드디어 성공적으로 use client를 사용하고도 데이터를 받아왔따 ㅠ

 

next에서 api를 만드는것은 생각보다 간단했다

 

page를 만든것처럼 폴더명이 api주소가 됐고

 

page.tsx대신에 route.ts 파일을 만들어서 코드를 작성해주면 됐다

 

그래서 나는 app/chart/[label] 폴더 밑에 route.ts 파일을 만들고

코드를 작성했다

import {  NextResponse } from "next/server";
import axios from "axios";
export async function GET(request: Request, { params }: { params: { label: string } }) {
    const label = params.label
    const fetchData = async () => {
        try {
           	// api 호출부
            );
            return response.data;
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };
    const data = await fetchData()
    return NextResponse.json({
        lable: "dfdfdf",
        받은라벨: label,
        data: data
    })
}

 

여기서 나는 chart뒤에 오는 params를 티커스펠링으로 쓸거라서 이런식으로 했다

 

아무튼 params를 받아오는것도 쉽지 않아서 많이 헤맸다

 

어쨌든 이 글만 읽고는 내 심정이 이해 안되겠지만 정말 많은 시행착오가 있었고

 

하지만 난 성공했다!! 다시 자신감을 가지고 전진해 보겠다

 

이제 데이터 받아오는걸 진짜 성공했으니 다음엔 멋진 그래프를 들고 오겠다~~