[React] React로 할 일 관리 앱 만들기: 10장

안녕하세요! 드디어 마지막 챕터에 도달했습니다. 이번 포스트에서는 우리가 만든 할 일 관리 앱을 실제로 배포하는 방법을 알아보겠습니다. GitHub Pages와 Netlify, 두 가지 방법으로 배포하는 과정을 step by step으로 설명하겠습니다.

1. GitHub Pages로 배포하기

GitHub Pages는 GitHub 저장소에서 직접 정적 웹사이트를 호스팅할 수 있는 무료 서비스입니다.

1.1. GitHub 저장소 생성

GitHub에 로그인하고 새 저장소를 생성합니다.
저장소 이름을 todo-app으로 지정합니다.

1.2. 로컬 프로젝트를 GitHub 저장소에 연결

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/todo-app.git
git push -u origin main

1.3. gh-pages 패키지 설치

npm install --save-dev gh-pages

1.4. package.json 수정

package.json 파일을 열고 다음 내용을 추가합니다:

{
  "homepage": "https://your-username.github.io/todo-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

1.5. 앱 배포

npm run deploy

이 명령어를 실행하면 프로젝트가 빌드되고 gh-pages 브랜치가 생성되어 GitHub에 푸시됩니다.

1.6. GitHub Pages 설정

GitHub 저장소 페이지로 이동합니다.
'Settings' 탭을 클릭합니다.
좌측 메뉴에서 'Pages'를 클릭합니다.
'Source' 섹션에서 'gh-pages' 브랜치를 선택합니다.
'Save' 버튼을 클릭합니다.

이제 https://your-username.github.io/todo-app에서 여러분의 앱을 볼 수 있습니다!

2. Netlify로 배포하기

Netlify는 정적 웹사이트 호스팅을 제공하는 플랫폼으로, GitHub와의 연동이 매우 쉽습니다.

2.1. Netlify 계정 생성

Netlify 웹사이트에 접속하여 계정을 생성합니다.

2.2. 새 사이트 추가

Netlify 대시보드에서 "New site from Git" 버튼을 클릭합니다.
GitHub을 선택하고 권한을 부여합니다.
배포하려는 저장소를 선택합니다.

2.3. 배포 설정

Build command: npm run build
Publish directory: build

2.4. 배포

"Deploy site" 버튼을 클릭하면 Netlify가 자동으로 여러분의 앱을 빌드하고 배포합니다.

2.5. 커스텀 도메인 설정 (선택사항)

Netlify 대시보드에서 여러분의 사이트를 선택합니다.
"Domain settings"를 클릭합니다.
"Add custom domain"을 클릭하고 원하는 도메인을 입력합니다.
DNS 설정을 따라 진행합니다.

3. 환경 변수 관리

만약 앱에 API 키와 같은 민감한 정보가 있다면, 환경 변수를 사용하여 관리해야 합니다.

3.1. 로컬 환경에서 환경 변수 설정

프로젝트 루트 디렉토리에 .env 파일을 생성하고 다음과 같이 작성합니다:

REACT_APP_API_KEY=your_api_key_here

3.2. 환경 변수 사용

React 컴포넌트에서 다음과 같이 환경 변수를 사용할 수 있습니다:

const apiKey = process.env.REACT_APP_API_KEY;

3.3. 배포 환경에서 환경 변수 설정

GitHub Pages: GitHub 저장소의 Secrets에 환경 변수를 추가합니다.
Netlify: Netlify 대시보드의 "Build & deploy" 섹션에서 환경 변수를 추가합니다.

마무리

축하합니다! 이제 여러분의 React 할 일 관리 앱이 온라인에 공개되었습니다. 이 과정에서 배운 내용을 정리해 보겠습니다:

GitHub Pages를 사용한 정적 웹사이트 호스팅
Netlify를 사용한 지속적 배포(CD) 설정
환경 변수를 통한 민감한 정보 관리

배포 과정에서 어려움은 없으셨나요? 어떤 배포 방식이 더 편리하다고 느끼셨나요? 여러분의 경험과 생각을 댓글로 공유해 주세요!

이것으로 "React로 할 일 관리 앱 만들기" 시리즈가 모두 끝났습니다. 이 튜토리얼을 통해 React 앱의 개발부터 배포까지 전체 과정을 경험해 보셨습니다. 앞으로 여러분만의 멋진 React 프로젝트를 만들어 나가시길 바랍니다!

저작자표시 비영리 변경금지

개발

[React] React로 할 일 관리 앱 만들기: 10장 - 앱 배포하기