📌목차

소개

맛이 어때

🗓 2022.07.21 ~ 2022.08.15

FE 4명, BE 4명으로 구성된 팀 프로젝트로 커스텀 메뉴에 흥미가 있는 사용자들이 자신의 커스텀 메뉴를 공유하고 리뷰할 수 있는 SNS 플랫폼 입니다.

구현

TypeScript React.js Next.js Emotion Axios Git Vercel React-query Recoil Vercel

• SEO 최적화를 위해 NextJS를 도입하고 **SSR(Server Side Rendering)**을 적용했습니다.
• 여러 컴포넌트에서 사용, 변경되는 사용자 정보의 경우 Props Drilling 현상을 방지하기 위해 전역 상태관리를 했습니다. ****
• 전역 상태관리 라이브러리로는 Recoil을 사용했습니다. React전용이고, 초기 셋팅 비용이 작고, Atom 을 사용해 해당 Atom을 구독하는 컴포넌트만 리렌더링 하기에 다른 라이브러리보다 좋다고 생각했기 때문입니다.
• React-qeury 사용해 캐싱, 에러 핸들링, 로딩 처리 등 비동기 과정을 효율적으로 관리할 수 있게 했습니다. SWR도 비슷한 기능을 제공하지만 Devtool을 사용하기 힘들고, 같은 컴포넌트를 여러컴포넌트에서 쓸 때 한 번에 전체 업데이트를 해주지 못해 사용하지 않았습니다.
• 데이터의 형태를 쉽게 파악할 수 있도록 TypeScript를 적용했습니다.
• Vercel로 서비스 배포를 진행 하였습니다.

담당 업무

1. nextConfig 설정

API가 오픈소스가 아니기에 nextConfig의 rewrites를 통해 API를 은닉하도록했고, 캐싱 이미지를 사용하기 위해 이미지 도메인 주소를 등록해줬습니다.

또, 이를 통해 프론트엔드 서버를 프록시 서버로 사용해 HTTPS를 사용하는 프론트엔드 서버에서 HTTP 백엔드 API를 호출할 수 있도록 했습니다.

const API_KEY = process.env.NEXT_PUBLIC_API_URL

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: [
      'user-images.githubusercontent.com',
      'masiottae-image-bucket.s3.ap-northeast-2.amazonaws.com'
    ]
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `${API_KEY}/:path*`
      }
    ]
  }
}

module.exports = nextConfig

2. axios instance 생성

nextConfig의 rewrites를 통해 API를 은닉하고 있기 때문에, axios instance의 baseUrl을 '/api'로 두고 '/api' 뒷 부분만 받아 url로 넘기도록 했습니다.