2. 프론트와 연동

https://www.youtube.com/watch?v=3wi_fScbF1Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=6

를 보며 챗웹 만들기를 하고 있다.

 

그런데 위 동영상에서 리액트를 쓰는데, 리액트 버전이 너무 오래되고, 라우터 형식이라던지 여러가지가 옛날거라서 

새롭게 nextJs로 바꿔주며 하고있는데, 생각보다 분투하고있다.

 

뭐 진도에 관해서는 특별히 쓸 내용이 많지는 않고, 새롭게 알게된 내용이라던지 이런걸 써줘보겠다.

 

1. 서버와의 연동

사실 그동안 nextJs로 뭔가를 만들때는 거의 서버를 따로 만들지 않고 서버컴포넌트를 이용해 풀스택으로 만들었었기 때문에 이번처럼 서버를 따로 만들고 연동해줘보기는 처음이다. (사실 하면서, 그리고 지금도 그냥 express서버안쓰고 next로만 만들까 계속 생각중이다)

그래서 서버에서 데이터를 가져올 때, 그냥 fetch url을 작성하고 받아오면 되는 줄 알았는데, CORS 에러에 계속 걸렸다. 

리액트에서는 package.json에서 proxy설정해주면 된다는데, ("proxy" : "localhost:4000" 이런식으로)

next에서는 next.config.js를 바꿔주면 된다고 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "http://localhost:4000/:path*",
      },
    ];
  },
};

export default nextConfig;

그래서 이렇게 바꿔줬고, 데이터를 패칭해오는 부분에서는

const res = await fetch("api/chat");

 

 

이런식으로 넣어주면 된다. 이거때문에 좀 헤맸다.

 

2. 받아온 데이터 처리

const fetchChats = async () => {
    console.log("fech Chats");

    const res = await fetch("api/chat");
    if (!res.ok) {
      throw new Error("Err in fetching data");
    }
    const json = await res.json();
    console.log("res.json : ", json);
    setChats(json);

    return res.json();
  };
  useEffect(() => {
    fetchChats();
  }, []);

 

이렇게 해줬는데 에러가 났었다. 심각한건 아니고 실행은 되는데, 그냥 에러 표시가 난다.

에러가 난 원인은 res.json()을 반환해주기 전에 열어봐서다(console로 찍어보고 있다). 이런경우는 또 처음봐서 신기해서 검색해봤는데

https://stackoverflow.com/questions/53511974/javascript-fetch-failed-to-execute-json-on-response-body-stream-is-locked

JavaScript fetch - Failed to execute 'json' on 'Response': body stream is locked

이런 글을 찾을 수 있었다.

두번째 답변에 링크된 mdn문서를 따라 들어가보면 속도때문에 그런 것 같다.

따라서 그냥 읽어보지 말고 바로 res.json()을 리턴하는게 좋다.

(정 중간에서 같은걸로 한번 읽거나 뭘 하고 싶으면 그냥 await res.json()을 받는게 아니라 await res.clone().json()을 받으면 에러가 사라지긴 한다.)

 

이 외에 ChakraUI라는 조금 오래된 것 같은 컴포넌트 라이브러리를 쓴다던지 (공식 홈페이지에서 명시된 Next버전이 13버전이다. 다행히서버컴포넌트긴하다), 자바스크립트만 쓴다던지, 리액트 버전이 너무 오래되서 최신 next로 바꿀 때 좀 불편한 감이 있긴 하지만, 이런 사소한걸 제외하면 내용은 매우 좋은것 같으니 계속 한번 해보겠다.

 

github : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/2.connectFrontBack