새로운 React.js 앱 만들기

이제 프론트엔드 작업을 시작할 준비가 되었습니다. 지금까지 백엔드 API와 인프라를 구축하고 배포했습니다. 이제 백엔드에 연결되는 웹 앱을 만들 차례입니다.

React.js를 사용해 싱글 페이지 앱을 만들 것입니다. 모든 설정을 위해 Vite 프로젝트를 사용할 예정입니다.

새로운 React 앱 만들기

packages/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm create vite@latest frontend -- --template react-ts

이 명령어는 frontend/ 디렉토리에 새로운 프로젝트를 생성합니다.

packages/frontend/package.json 파일에서 패키지 이름을 업데이트하세요. 다음 내용을 변경합니다.

- "name": "frontend",
+ "name": "@notes/frontend",

notes 대신 여러분의 앱 이름을 사용하세요.

이제 의존성을 설치합니다.

$ cd frontend
$ npm install

이 과정은 잠시 시간이 걸릴 수 있습니다.

프론트엔드를 번들링하기 위해 Vite 설정을 약간 수정해야 합니다.

packages/frontend/vite.config.ts 파일에서 plugins: [react()], 줄 아래에 다음 내용을 추가하세요.

build: {
  // NOTE: 배포 시 필요
  chunkSizeWarningLimit: 800,
},

React 앱을 SST에 추가하기

React 앱을 AWS에 배포할 예정입니다. 이를 위해 SST의 StaticSite 컴포넌트를 사용할 것입니다.

infra/web.ts 파일을 새로 생성하고 다음 코드를 추가합니다.

import { api } from "./api";
import { bucket } from "./storage";
import { userPool, identityPool, userPoolClient } from "./auth";

const region = aws.getRegionOutput().name;

export const frontend = new sst.aws.StaticSite("Frontend", {
  path: "packages/frontend",
  build: {
    output: "dist",
    command: "npm run build",
  },
  environment: {
    VITE_REGION: region,
    VITE_API_URL: api.url,
    VITE_BUCKET: bucket.name,
    VITE_USER_POOL_ID: userPool.id,
    VITE_IDENTITY_POOL_ID: identityPool.id,
    VITE_USER_POOL_CLIENT_ID: userPoolClient.id,
  },
});

여기서 주목할 만한 몇 가지 작업을 수행하고 있습니다:

1. StaticSite 컴포넌트가 React 앱이 위치한 packages/frontend/ 디렉토리를 가리키도록 설정했습니다.
2. 다른 컴포넌트의 출력값을 Vite의 환경 변수로 전달했습니다. 이렇게 하면 React 앱에서 이 값을 하드코딩할 필요가 없습니다. VITE_* 접두사는 Vite가 프론트엔드 코드에서 이 변수에 접근할 수 있도록 하는 관례입니다.

앱에 추가하기

이제 이 내용을 설정에 추가해 보겠습니다.

sst.config.ts 파일에서 await import("./infra/api"); 줄 아래에 다음 코드를 추가하세요.

await import("./infra/web");

변경 사항 배포하기

터미널로 전환하면 변경 사항이 배포되고 있는 것을 확인할 수 있습니다.

+  완료
   Api: https://5bv7x0iuga.execute-api.us-east-1.amazonaws.com
   Frontend: https://d1wyq46yoha2b6.cloudfront.net
   ...

React 앱 시작하기

sst dev CLI는 npm run dev를 실행하여 React 프론트엔드를 자동으로 시작합니다. 또한 위에서 설정한 환경 변수를 전달합니다.

사이드바에서 Frontend를 클릭하거나 직접 이동할 수 있습니다.

이렇게 하면 로컬에서 프론트엔드가 실행 중인 위치를 확인할 수 있습니다.

VITE v5.3.4  ready in 104 ms

➜  Local:   http://127.0.0.1:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

브라우저에서 해당 URL로 이동하면 다음과 같은 화면을 볼 수 있습니다.

제목 변경하기

노트 앱의 제목을 빠르게 변경해 보겠습니다.

packages/frontend/index.html 파일을 열고 title 태그를 다음과 같이 수정하세요:

<title>Scratch - 간단한 노트 앱</title>

이제 프론트엔드를 구축할 준비가 되었습니다! 앱 아이콘을 만들고 파비콘을 업데이트하는 것부터 시작하겠습니다.