[Kan-22] msw 초기세팅

[Zero-1016]

이슈 번호

작업 분류

• 버그 수정
• 프로젝트 구조 변경

작업 상세 내용

• msw를 제거합니다.

msw를 제거하는 이유는 다음과 같습니다.

1. msw는 next 13 버전부터 공식적으로 지원하지 않고있습니다.

현재 제 로컬 환경에서는 정상적으로 구동이 되는 것을 확인하고 있습니다. 하지만 이는 일시적인 현상일 뿐이며, 다른 로컬 환경에서는 구동이 잘 되지 않는 것을 확인하였습니다.

@Jihyeong00 로컬환경

@jgjgill 로컬환경

관련 이슈

2. 프로젝트의 특성상 Axios와 같은 Api 요청이 많이 필요할까?. 또는 요청을 확인해야할까? 라는 생각이 듭니다.

3. webpack 설정을 통해 수정을 할 수 있지만 올바르지 않은 접근입니다. 때문에 생각지도 못한 문제의 상황을 야기시킬수 있습니다.
   

대안

1. route.ts 파일을 사용하여 실제 서버에서 오는 것처럼 구현이 가능합니다. 현재 설정해둔 방법으로서 env 파일을 통해 설정이 가능합니다. 경로를 다음과 같이 설정을 해두었습니다.

사용방법

# 가상 api를 사용할 지 여부를 결정합니다.
NEXT_PUBLIC_API_MOCKING="enable" 

해당 .env 파일의 NEXT_PUBLIC_API_MOCKING를 enable로 설정을 해두었다면 BACK_URL이 설정이 됩니다.

export const BACK_URL = process.env.NEXT_PUBLIC_API_MOCKING === "enable" ? "/apis" : process.env.NEXT_PUBLIC_BACK_URL

만약 직접 만들어둔 것이 아니라면 NEXT_PUBLIC_API_MOCKING의 값을 변경하면 됩니다.

다음 할 일

체크 리스트

• main 브랜치 pull 받기
• 아직 작업 중인 파일은 올리지 않기

질문 사항

💬 질문이 있어요!

🔴 이건 반드시 확인해 주세요!

대안

---

1. route.ts 파일을 사용하여 실제 서버에서 오는 것처럼 구현이 가능합니다. 현재 설정해둔 방법으로서 env 파일을 통해 설정이 가능합니다. 경로를 다음과 같이 설정을 해두었습니다.

사용방법

1. NEXT_PUBLIC_API_MOCKING의 값을 enable로 설정합니다.

// .env.local

NEXT_PUBLIC_API_MOCKING="enable" 

해당 .env 파일의 NEXT_PUBLIC_API_MOCKING를 enable로 설정을 해두었다면 BACK_URL이 설정이 됩니다.

export const BACK_URL = process.env.NEXT_PUBLIC_API_MOCKING === "enable" ? "/apis" : process.env.NEXT_PUBLIC_BACK_URL

만약 직접 만들어둔 것이 아니라면 NEXT_PUBLIC_API_MOCKING의 값을 변경하면 됩니다.

2. 전달해둔 값으로 미리 만들어둔 mock 값을 route.ts 파일을 만들어 전달합니다.

// /app/apis/temp/route.ts

import { NextResponse } from "next/server"

import { tempMock } from "@/seeds/temp-mock"

export async function GET() {
  return NextResponse.json(tempMock)
}

3. 폴더명과 동일한 경로로 요청을 보냅니다.

const tempAPI = {
  getClientTemp: async () => {
    try {
      const res = await axios.get<Temp>('/apis/temp')
      return res.data
    } catch (err) {
      if (err instanceof Error) {
        throw new Error(err.message)
      }
    }
  },
}

---

2. msw/http-middleware를 사용하여 독립적인 브라우저에서 돌아가게 구현을 합니다.

관련 링크

하지만 해당 방벙은 시도를 해본적이 없는 방법이고 위와는 반대로 서버에서의 환경을 제공하지 않고 있습니다.

다음 할 일

기능분담, 퍼블리싱부터 진행하기

체크 리스트

• main 브랜치 pull 받기
• 아직 작업 중인 파일은 올리지 않기

질문 사항

💬 질문이 있어요!

msw를 계속해서 사용을 해갈 것인지 아니면 좀 더 다른 곳에 시간을 투자할 지 궁금합니다.

이번에 소켓을 시도하게 되면서 새로운 기술을 배우니 여러 곳에서 에러가 많이나고 시간을 투자해야 할 것 같은데 오히려 많은 시간을 투자하는 것 같고 또한 프로젝트의 성격과는 잘 맞지않는 라이브러리라고 생각합니다.

🔴 이건 반드시 확인해 주세요!

env 파일명이 헷갈리는 것 같아 다음과 같이 통일하였으니 확인 부탁드립니다.

# 가상 api를 사용할 지 여부를 결정합니다.
NEXT_PUBLIC_API_MOCKING="enable" 

# 백엔드 api 주소를 결정합니다.
NEXT_PUBLIC_BACK_URL="http://localhost:8080"

# 클라이언트 api 주소를 설정합니다.
NEXT_PUBLIC_CLIENT_URL="http://localhost:3000"
# 서버 api 주소를 설정합니다.
NEXT_PUBLIC_SERVER_URL="http://localhost:3000"

[jgjgill]

해당 부분 네이밍도 변경되어야 하는 거 아닌가요?? 🤔

[Zero-1016]

해당부분 변경하였습니다.

[jgjgill]

run과 update는 처음봐서 어디에 사용하면 될까요?? 🧐