0714

ㅋㅋㅋㅋㅋ
이 편 재밌는데..
가만 생각하니까 차은주샘 html 천재시네

clone coding

오늘의 오류

vercel route

배포를 위해 프론트엔드 app 디렉토리 안에서 모든 경로를 처리하려고 함
route/api도 처리하고 app routing도 처리하는 구조로 설계했음.
근데 내가 바보였음. ㅎㅎ

• 문제 1: SSR과 CSR 데이터 페칭 문제

• SSR
  실행 위치: Node.js 서버 환경 (Vercel의 서버리스 함수)
  window 객체: 존재하지 않음 (브라우저가 아니므로)

• CSR (브라우저)
  실행 위치: 사용자의 브라우저
  window 객체: 존재함

그래서 아래와 같이
서버에서는 process.env.API_BASE_URL 환경변수를 통해 절대 주소를 사용하고,
클라이언트에서는 상대 경로(/api/endpoint)로 API를 호출함.

if (typeof window === "undefined") {  
    const apiBaseUrl = process.env.API_BASE_URL;  
    if (apiBaseUrl) {  
      return `${apiBaseUrl}/api/${endpoint}`;  
    }

  }  
  // 클라이언트 측에선 상대 경로  
  return `/api/${endpoint}`;

근데 이건 내가 정적인 백엔드 주소를 사용 안하고
app 라우팅 파일 안에서 모든 걸 처리하려고 해서 이렇게 적은거임.
그냥 백엔드 주소있으면 그거 적으면 됨.

• 문제 2: 동적 라우팅 처리 시 프리뷰 환경 문제

• 근데 Vercel에서 프리뷰로 배포할 땐 URL이 동적으로 변경되어,
  상대 경로로 API 호출 시 주소 불일치로 인해 요청이 실패할 수 있음.

  • 참고: https://github.com/vercel/vercel/discussions/6045

• 해결 방법
  db.json을 포함한 백엔드용 리포지토리를 별도로 만들어,
  해당 주소로 정적으로 항상 데이터를 가져오도록 vercel에 새로 배포하여 백엔드를 사용함.
  Firebase나 Supabase 같은 외부 DB 서비스도 고려했지만, 현재 방식이 더 편해서 선택

• 트레이드오프
  장점: 프론트엔드에서 모든 것을 처리할 수 있음
  단점: DB를 새로 만들 때마다 새로 연동해야 하는 수고 발생

eslint 오류

// eslint-disable-next-line @typescript-eslint/no-unused-vars
주석을 추가하면 build시 eslint 오류 안 남

그외

그리고 지금와서 말하는거지만
faker.js로 생성한 이미지들 상태가 다 왜 이래요?
고양이 동상 왤케 많아.. ㅋㅋㅋㅋㅋㅋ