ServBay로 React 프로젝트 만들기 및 실행하기

React란 무엇인가요?

React는 Meta(구 Facebook)와 커뮤니티가 함께 개발·유지하는 오픈소스 JavaScript 라이브러리로, 사용자 인터페이스(UI) 구축에 특화되어 있습니다. 컴포넌트 기반 구조로 인터랙티브한 UI를 효율적으로 개발할 수 있어, 복잡하면서도 유지보수가 쉬운 싱글 페이지 애플리케이션(SPA)이나 대형 웹앱의 뷰 레이어를 만드는 데 탁월한 선택입니다. 선언적 UI 설계, 뛰어난 가상 DOM 업데이트, 그리고 활발한 생태계가 React의 주요 강점입니다.

React의 주요 특징 및 장점

컴포넌트 기반 개발: 복잡한 UI를 독립적이고 재사용 가능한 컴포넌트로 분할해 코드 유지보수성과 재사용성을 높여줍니다.
선언적 뷰: UI 상태만 간단하게 기술하면, React가 DOM을 자동으로 업데이트해 개발 로직을 단순화합니다.
Virtual DOM: 메모리에 DOM의 가상 표현을 유지하고, 변경점을 비교해 실제 DOM 변화는 최소화함으로써 성능을 크게 향상합니다.
단방향 데이터 흐름: 데이터가 위에서 아래로 흐르도록 설계되어, 애플리케이션 상태 변화를 쉽게 추적하고 예측할 수 있습니다.
JSX: JavaScript 확장 문법으로, 코드 안에 HTML형태의 UI 구조를 작성해 가독성을 높여줍니다.
강력한 생태계: 방대한 커뮤니티 지원과 React Router, Redux/Zustand/MobX, Material UI 등 다양한 서드파티 라이브러리로 라우팅, 상태관리, UI 컴포넌트까지 쉽게 활용할 수 있습니다.

React를 이용하면 최신 고성능 웹앱을 더 빠르고 효율적으로 구축할 수 있습니다.

ServBay로 React 개발 및 배포 환경 구축하기

ServBay는 macOS와 Windows 사용자를 위한 강력한 로컬 웹개발 플랫폼입니다. Node.js 등 다양한 패키지를 내장하고 있으며, 이번 가이드에서는 ServBay의 Node.js 환경 및 Websites 기능을 사용해 React 프로젝트를 만드는 과정과, 개발 모드의 리버스 프록시 및 프로덕션 모드의 정적 파일 서비스 설정법을 단계별로 설명합니다.

사전 준비

시작에 앞서 아래 준비 작업을 마쳤는지 확인하세요:

ServBay 설치: ServBay가 시스템에 정상적으로 설치 및 실행 중이어야 합니다.
Node.js 패키지 설치: ServBay 인터페이스 또는 명령행에서 Node.js 패키지를 추가하세요. ServBay에서 Node.js 패키지를 설치하는 공식 문서를 참고하면 됩니다. ServBay는 버전 및 환경 변수를 자동으로 관리합니다.

React 프로젝트 생성

최신 프론트엔드 빌드 도구인 Vite를 활용해 새로운 React 프로젝트를 빠르게 만듭니다. Vite는 빠른 초기화 속도와 즉각적 핫 모듈 리로드(HMR)로 높은 개발 경험을 제공하며, 기존 create-react-app 대신 새 프로젝트의 표준으로 자리 잡고 있습니다.

터미널 열고 웹사이트 루트 디렉터리로 이동
터미널 앱을 실행합니다. ServBay가 권장하는 기본 웹사이트 루트 위치는 다음과 같습니다:
macOS:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
Vite로 새로운 React 프로젝트 생성
아래 명령어로 create-vite 스캐폴드 도구를 이용해 servbay-react-demo라는 신규 React 프로젝트를 만드는 동시에 react 템플릿을 선택합니다:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- **npx**는 npm 패키지 실행 도구로, 글로벌 설치 없이 최신 버전의 커맨드라인 툴을 실행할 수 있습니다. 따라서 항상 최신 create-vite를 사용할 수 있습니다.
- **create-vite**는 Vite 공식 프로젝트 생성기입니다.
- **servbay-react-demo**는 프로젝트 폴더 이름입니다.
- --template react 옵션으로 React 템플릿으로 초기화합니다.
화면의 안내에 따라 프로젝트 생성을 완료하세요.
프로젝트 디렉터리로 이동하고 의존성 설치
새로 생성한 프로젝트 폴더로 이동한 뒤, npm으로 필요 라이브러리를 설치합니다:
bash
```
cd servbay-react-demo
npm install
```
1
2
- Yarn이나 pnpm을 선호한다면 yarn install 또는 pnpm install 명령어도 사용할 수 있습니다.

React 프로젝트 내용 수정 (선택사항)

셋업이 잘 됐는지 확인하려면 프로젝트 메인 페이지를 간단히 변경해봅니다.

src/App.jsx 또는 src/App.tsx 파일 열기
원하는 코드 에디터로 프로젝트 내 src/App.jsx(Javascript 템플릿), 또는 src/App.tsx(Typescript 템플릿) 파일을 엽니다.

내용 수정

메인 콘텐츠가 렌더링되는 부분을 찾아 아래와 같이 "Hello ServBay!" 문구로 변경하세요:

javascript

// ... 기타 import ...
import './App.css';

function App() {
  // ... 기타 코드 ...
  return (
    <>
      {/* ... 기타 요소 ... */}
      <h1>Hello ServBay!</h1>
      {/* ... 기타 요소 ... */}
    </>
  );
}

export default App;

파일을 저장합니다.

개발 모드 진입

개발 단계에서는 코드가 변경될 때마다 핫 모듈 리로드(HMR)가 적용되는 로컬 개발 서버를 실행합니다. ServBay는 ‘리버스 프록시(Reverse Proxy)’로 외부 요청을 해당 개발 서버로 전환할 수 있습니다.

터미널에서 개발 서버 실행
프로젝트 루트(servbay-react-demo)에서 아래 명령어로 Vite 개발 서버를 실행하며 포트(예: 8585)를 지정합니다:
bash
```
npm run dev -- --port 8585
```
1
- npm run dev는 package.json에 정의된 dev 스크립트(Vite 개발 서버 실행)를 수행합니다.
- -- --port 8585는 Vite에 포트 번호 파라미터를 전달합니다.
서버가 실행되고 나면 보통 터미널에 http://localhost:8585와 같은 로컬 접속 주소가 표시됩니다. 이 터미널 창은 닫지 말고 개발 서버를 계속 실행하세요.
ServBay에서 웹사이트 리버스 프록시 설정
ServBay 앱을 켜고 Websites 메뉴로 이동합니다. 신규 웹사이트를 아래 옵션으로 추가합니다:
- 이름(Name): ServBay React Dev (설명용 이름)
- 도메인(Domain): servbay-react-dev.servbay.demo (ServBay 브랜드로 시연하는 도메인)
- 사이트 타입(Site Type): Reverse Proxy 선택
- 프록시 IP(Proxy IP): 127.0.0.1 (개발 서버가 로컬에서 동작)
- 프록시 포트(Proxy Port): 8585 (개발 서버와 동일한 포트)
설정을 저장하면 ServBay 내장 웹서버(Caddy 또는 Nginx)가 servbay-react-dev.servbay.demo로 들어오는 요청을 자동으로 http://127.0.0.1:8585로 전달합니다.
ServBay에서 웹사이트 추가 방법은 웹사이트 관리 공식 문서를 참고하세요.
개발 웹사이트 접속
웹브라우저에서 직접 https://servbay-react-dev.servbay.demo 주소로 접속합니다.
- ServBay는 로컬 개발사이트에도 자동으로 SSL 인증서를 발급(ServBay User CA or ServBay Public CA)하므로 HTTPS 기반 안전한 접근이 가능합니다. SSL 세부 안내는 SSL로 웹사이트 보호하기를 참고하세요.
- 코드 에디터에서 파일을 변경하고 저장하면, 브라우저가 자동으로 갱신됩니다. 이는 핫 모듈 리로드(HMR)가 정상 동작 중임을 의미합니다.

프로덕션 빌드(배포용 버전 만들기)

React 앱 개발이 완료되면, 최적화된 배포 버전을 만들어야 합니다.

터미널에서 프로덕션 빌드 실행
프로젝트 루트(servbay-react-demo)에서 아래 명령으로 프로덕션 빌드를 진행합니다:
bash
```
npm run build
```
1
이 명령은 package.json 내 build 스크립트(Vite 기반 React 프로젝트의 소스코드 컴파일 및 최적화)를 실행해 HTML, CSS, Javascript, 기타 정적 파일을 생성하고 결과를 dist 폴더에 저장합니다. 빌드가 끝나면 터미널에 성공 메시지가 나타납니다.
ServBay에서 정적 파일 웹사이트 설정
빌드를 통해 만들어진 dist 폴더는 웹서버에서 바로 정적 서비스가 가능합니다. ServBay에서 정적 웹사이트를 아래 옵션으로 추가합니다:
- 이름(Name): ServBay React Prod (설명용 이름)
- 도메인(Domain): servbay-react.servbay.demo (ServBay용 데모 도메인, 개발용과 구분)
- 사이트 타입(Site Type): Static 선택
- 웹사이트 루트 디렉터리(Website Root Directory): 빌딩된 dist 폴더 경로 지정
  - macOS: /Applications/ServBay/www/servbay-react-demo/dist
  - Windows: C:\ServBay\www\servbay-react-demo\dist
설정을 저장하면 ServBay 내장 웹서버가 dist 폴더의 정적 파일을 즉시 서비스합니다.
프로덕션 웹사이트 접속
브라우저에서 새로 설정한 도메인 https://servbay-react.servbay.demo로 들어가면,
최적화된 프로덕션 빌드 버전의 홈페이지가 출력됩니다. 이 사이트 역시 ServBay가 SSL 인증서를 자동 적용해 보안 접속을 제공합니다.

요약

지금까지 ServBay를 활용해 로컬 환경에서 React 프로젝트를 생성하고, 개발용 리버스 프록시와 배포용 정적 파일 서비스를 각각 설정하는 방법을 살펴보았습니다. ServBay는 macOS와 Windows에서 간편하게 Node.js 개발환경을 구축하고, 웹사이트 설정(리버스 프록시 및 정적 서비스), 자동 SSL 인증서 등으로 React 개발자에게 최적의 워크플로우를 제공합니다. 이 토대 위에서 자유롭게 React 앱을 개발·테스트·배포할 수 있습니다.

ServBay로 React 프로젝트 만들기 및 실행하기 ​

React란 무엇인가요? ​

React의 주요 특징 및 장점 ​

ServBay로 React 개발 및 배포 환경 구축하기 ​

사전 준비 ​

React 프로젝트 생성 ​

React 프로젝트 내용 수정 (선택사항) ​

개발 모드 진입 ​

프로덕션 빌드(배포용 버전 만들기) ​

요약 ​