macOS ServBay 환경에서 React 프로젝트 생성 및 실행하기

React란 무엇인가?

React는 Meta(구 Facebook)와 커뮤니티가 관리하는 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI) 구축에 특화되어 있습니다. 컴포넌트 기반 구조로 인터랙티브한 UI를 효율적이고 유지보수성 있게 개발할 수 있어, 복잡한 싱글 페이지 애플리케이션(SPA)이나 대형 웹앱의 뷰 계층 구축에 널리 사용됩니다. React의 핵심 장점은 선언형 프로그래밍 패러다임, 고성능 가상 DOM 업데이트 메커니즘, 그리고 방대한 커뮤니티 생태계입니다.

React의 주요 특징과 장점

컴포넌트 기반 개발: 복잡한 UI를 독립적이고 재사용 가능한 컴포넌트로 분리하여 코드의 유지보수성과 재사용성을 높입니다.
선언형 뷰: UI의 상태를 직관적으로 기술하면 React가 해당 상태에 맞게 DOM을 자동으로 갱신해, UI 로직을 간소화해줍니다.
가상 DOM(Virtual DOM): 메모리 내에 DOM의 가상 표현을 유지하고, 실제 DOM과의 차이만 최소한으로 반영하므로 성능이 대폭 향상됩니다.
단방향 데이터 흐름: 데이터가 부모에서 자식으로 한 방향으로 흐르기에 상태 관리와 추적이 용이합니다.
JSX: JavaScript 코드 내에서 HTML과 유사한 구조를 직접 작성할 수 있는 문법 확장으로, 코드 가독성이 향상됩니다.
강력한 생태계: React Router, Redux/Zustand/MobX, Material UI 등 다양한 서드파티 라이브러리와 커뮤니티 지원으로 상태 관리, 라우팅, UI 컴포넌트 등 모든 영역을 아우릅니다.

React를 활용하면 개발자는 최신 트렌드의 고성능 웹 애플리케이션을 더욱 빠르고 효율적으로 제작할 수 있습니다.

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

ServBay는 macOS 사용자들을 위한 강력한 로컬 웹 개발 환경으로, Node.js를 비롯한 다양한 소프트웨어 패키지를 지원합니다. 본 가이드에서는 ServBay의 Node.js 환경과 웹사이트(Website) 관리 기능을 활용해 리액트 프로젝트를 생성, 설정하고, 개발용 리버스 프록시 및 프로덕션(배포)용 정적 파일 서비스를 구축하는 방법을 단계별로 안내합니다.

사전 준비

시작 전에 아래 준비 사항을 확인하세요:

ServBay 설치: macOS에 ServBay가 올바르게 설치 및 실행 중이어야 합니다.
Node.js 패키지 설치: ServBay UI 또는 커맨드라인을 통해 Node.js 패키지를 설치해야 합니다. 자세한 단계는 ServBay에서 Node.js 설치 가이드를 참고하세요. ServBay는 Node.js 버전과 환경변수를 자동으로 관리합니다.

React 프로젝트 만들기

바이트(Vite)라는 최신 프론트엔드 빌드 도구를 활용하여 React 프로젝트를 빠르게 생성합니다. Vite는 빠른 시작 속도와 즉각적인 핫 모듈 리플레이스먼트(HMR)를 지원해 탁월한 개발 경험을 제공합니다. 최근에는 기존의 create-react-app을 대체하며 React 프로젝트 생성의 주류 도구로 자리잡았습니다.

터미널을 열고 웹사이트 루트 디렉터리로 이동
터미널 앱을 실행합니다. ServBay의 기본 웹사이트 루트 디렉터리는 /Applications/ServBay/www입니다. 해당 폴더로 이동하세요:
bash
```
cd /Applications/ServBay/www
```
1
Vite로 신규 React 프로젝트 생성
아래 명령어로 create-vite 스캐폴딩 툴을 이용해 servbay-react-demo라는 새 프로젝트를 만들고, 템플릿으로 react를 선택합니다:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx : npm 패키지 실행 도구로, 전역 설치 없이 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(JS 템플릿 선택 시) 또는 src/App.tsx(TS 템플릿 선택 시) 파일을 엽니다.

내용 수정하기

주요 컨텐츠를 렌더링하는 부분을 찾아 아래와 같이 "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에서 웹사이트 추가 방법의 자세한 내용은 ServBay 웹사이트 관리 가이드를 참고하세요.
개발 웹사이트로 접속
브라우저를 열고 아래 도메인으로 들어갑니다: https://servbay-react-dev.servbay.demo
- ServBay의 강력한 기능 덕분에, 로컬 개발 사이트도 ServBay User CA 또는 ServBay Public CA가 발급한 SSL 인증서로 HTTPS 접속이 자동 활성화됩니다. 더 자세한 가이드는 웹사이트 SSL 보안 적용하기를 참고하세요.
- 이 상태에서 코드 에디터에서 소스 파일을 수정 후 저장하면, 브라우저가 자동 갱신됩니다. (이 기능이 바로 HMR입니다.)

프로덕션(배포) 빌드 생성

개발이 끝나고 배포를 준비할 때는 최적화된 프로덕션 번들을 만들어야 합니다.

터미널에서 배포용 빌드 실행
프로젝트 루트에서 아래 명령어로 프로덕션 빌드를 진행합니다:
bash
```
npm run build
```
1
이 명령은 package.json의 build 스크립트를 실행하며, Vite를 활용한 React 프로젝트의 경우 소스 코드를 HTML, CSS, JS 등 최적화 및 패킹 처리해 정적 파일로 만들어 dist 폴더에 출력합니다. 빌드 완료 후 터미널에 성공 메시지가 표시됩니다.
ServBay에서 정적 파일 서비스 설정
프로덕션 빌드를 통해 생성된 dist 폴더 안의 정적 파일을 서빙(서비스)하도록 설정하겠습니다.
ServBay 앱에서 웹사이트(Websites) 영역으로 이동 후, 새 웹사이트 추가 버튼을 누르고 아래와 같이 입력합니다:
- 이름(Name): ServBay React Prod (프로덕션용 설명)
- 도메인(Domain): servbay-react.servbay.demo (개발 도메인과 명확히 구분)
- 사이트 타입(Site Type): Static(정적)
- 사이트 루트 디렉터리(Website Root Directory): /Applications/ServBay/www/servbay-react-demo/dist (빌드 산출물이 위치한 폴더)
저장 후 ServBay는 내장 웹 서버를 통해 해당 폴더 내 정적 파일을 바로 서비스합니다.
프로덕션 웹사이트 접속 확인
브라우저에서 이제 다음과 같은 프로덕션 도메인으로 접속합니다: https://servbay-react.servbay.demo
최적화 및 빌드가 완료된 웹사이트를 접하게 되며, 이 사이트 역시 ServBay의 자동 SSL 기능으로 보안연결(HTTPS)이 활성화됩니다.

요약

지금까지 ServBay를 활용해 macOS 로컬 환경에서 React 프로젝트를 쉽고 빠르게 생성하는 방법, 개발 모드용 리버스 프록시, 프로덕션용 정적 서비스까지 단계별로 살펴봤습니다. ServBay는 Node.js 통합 지원, 다양한 웹사이트 유형(리버스 프록시/정적 사이트) 관리, 자동 SSL 발급 등으로 로컬 개발 환경 구축과 운영을 크게 간소화합니다. 이제 이 기반 환경 위에서 React 앱 개발, 테스트, 배포까지 자유롭게 진행해보세요.

macOS ServBay 환경에서 React 프로젝트 생성 및 실행하기 ​

React란 무엇인가? ​

React의 주요 특징과 장점 ​

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

사전 준비 ​

React 프로젝트 만들기 ​

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

개발 모드로 진입 ​

프로덕션(배포) 빌드 생성 ​

요약 ​