인프런 커뮤니티 질문&답변

import { http, HttpResponse } from "msw";

const testData = [
  {
    result: "success",
    userId: 2,
    nickname: "닉네임",
    favoriteCount: 223,
    viewCount: 336,
    position: "Backend",
    userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg",
    year: "경력없음",
    techStack: "react, java, ---",
    softSkill: "소통, 적극성, ---",
    links: "http://블로그주소",
    alarmStatus: true,
    content: "안녕하세요 구인 중입니다",
  },
];
export const handlers = [
  http.post("/api/post", () => {
    return HttpResponse.text(JSON.stringify("ok"));
  }),
  http.get("/api/get", ({ request }) => {
    console.log("request", request);
    return HttpResponse.json(testData);
  }),
];
export default handlers;"use client";

import { redirect } from "next/navigation";

export default function Home() {

  const handleClick = () => {
    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, {
      method: "get",
    })
      .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴
      .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력
  };
  return (
    <>
      <div>
        <button onClick={handleClick}>test btn</button>
        <p>계정을 생성하세요</p>
        <form>
          <div>
            <>
              <label htmlFor="id">아이디</label>
              <input type="text" id="id" name="id" required />
            </>
            <>
              <label htmlFor="name">이름</label>
              <input type="text" id="name" name="name" required />
            </>
            <button type="submit">가입하기</button>
          </div>
        </form>
      </div>
    </>
  );
}

browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ
어떤부분이 문제일까요.. !

console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면

이렇게 나옵니다..!