02. 공공API를 활용한 웹 앱 만들어보기

목표

하나의 코드로 웹(Web) + 모바일(App) 두 플랫폼에서 사용 가능하도록 만든다.

React-Native + Next.js + react-native-web

1. React-Native : 모바일 앱
2. Next.js : 웹 앱
3. react-native-web : RN 컴포넌트를 웹에서 동작할 수 있도록 하는 브릿지(즉, RN으로 만든 코드를 웹에서도 쓰일 수도 있도록 해줌)

React-Native를 중심으로 해서 UI를 제작하고 그걸 웹에서는 Next.js + 모바일에서는 React-Native가 렌더링하는 구조로 만들려고 함

Monorepo 도입

여러 프로젝트를 한 저장소에서 함께 관리하도록 하는 방식임

• 웹 : apps/web
• 모바일 : apps/mobile
• 공통된 코드 : packages/ui, packages/lib

Monorepo로 구조 만들어보기

turborepo 공식문서

1. Monorepo(Turborepo 설치)

# Global install
yarn global add turbo
# Install in repository
yarn add turbo --dev

2. Root에 turbo.json 파일 생성(Next.js)

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

프로젝트 구조

아래와 같은 구조로 프로젝트 구성하였다.

CheckBiz/
|----- apps/
|   	|----- web/
|		|----- mobile/
|----- packages/
|		|----- ui/
|		|----- lib/

Next.js 프로젝트 생성

1. apps 디렉토리로 이동

cd apps

2. Next.js 프로젝트 생성

yarn create next-app web --typescript

3. react-native-web 설치

yarn add react-native react-native-web

4.next.config.ts 작성
공식문서

resolve: {
  alias: {
    'react-native$': 'react-native-web'
  }
}

로서 next.config.ts 에서 react-native를 react-native-web으로 alias를 설정하는 것은 공식적인 설정 방식임

나의 경우

// apps/web/next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  webpack: (config) => {
  config.resolve.alias = {
    ...(config.resolve.alias || {}),
    'react-native$': 'react-native-web',
  };
  config.resolve.extensions = [
    '.web.ts',
    '.web.tsx',
    '.ts',
    '.tsx',
    '.js',
    '.jsx',
    '.json',
  ];
  return config;
}
};

export default nextConfig;

이렇게 작성했음!

3. 에서는 mock api로 사업자번호 api와 연동해보는 테스트를 해보려고 한다.
   (바로 공공api와 연동해도 되지만 실제 프로젝트와 가깝게 실습해보기 위해서)