002 - 로컬 개발
Backstage 앱이 완전히 설치되어 실행할 준비가 되었어요! 설치가 완료되었으니 애플리케이션 디렉터리로 이동해서 yarn start 명령으로 앱을 시작할 수 있어요. yarn start 명령은 프론트엔드와 백엔드를 같은 창에서 별도의 프로세스([0]과 [1])로 실행해요.
출처: 문서
본문
Backstage 앱이 완전히 설치되어 실행할 준비가 되었어요! 설치가 완료되었으니 애플리케이션 디렉터리로 이동해서 yarn start 명령으로 앱을 시작할 수 있어요. yarn start 명령은 프론트엔드와 백엔드를 같은 창에서 별도의 프로세스([0]과 [1])로 실행해요.
cd my-backstage-app # your app nameyarn start
여기서도 프론트엔드가 시작될 때까지 잠시 기다려야 해요. 프론트엔드가 빌드되면 브라우저 창이 자동으로 열릴 거예요.
브라우저 창이 열리지 않았나요?
[0] webpack compiled successfully 메시지가 보이면 http://localhost:3000으로 직접 이동해서 Backstage 앱을 확인할 수 있어요.
일단 실행되면 아래와 비슷한 모습이 보일 거예요.
로컬 개발의 아키텍처
배포 아키텍처
이 섹션은 로컬 개발만 다루며, 골든 패스 프로덕션 아키텍처가 어떤 모습인지는 deployment 골든 패스에서 살펴볼게요.
이제 실행이 됐으니 방금 설정한 것을 이야기해 볼게요. yarn start의 일부로 2개의 명령이 실행되고 있어요. packages/app에 저장된 웹사이트와 packages/backend에 저장된 백엔드예요.
웹사이트는 기본적으로 포트 3000에서 수신 대기해요. 플러그인 친화적인 강력한 기본값을 제공하는 React 앱이에요. 로컬 개발에서는 빠른 컴파일과 거의 즉각적인 피드백을 위해 rspack을 사용해요.
백엔드는 기본적으로 포트 7007에서 수신 대기해요. 무엇보다도 express를 통한 HTTP 서버를 갖추고 데이터베이스와 통신하는 NodeJS 앱이에요.
로컬에서는 데이터베이스로 sqlite를 사용해요. 로컬 개발에 완벽한 빠른 인메모리 데이터베이스예요. 일시적인 특성 때문에 yarn start 사이에 데이터를 유지하는 데 의존해서는 안 돼요. 다만 핫 리로드 사이에는 데이터베이스를 유지해요.
핫 리로드는 프론트엔드와 백엔드 모두에서 지원돼요.
프론트엔드에서는 React 앱이 사용하는 파일을 저장할 때마다 잠시 후에 다음과 같은 메시지가 보일 거예요:
Rspack compiled successfully
백엔드에서는 다음 메시지가 보일 거예요:
Change detected, restarting the development server...
그 다음에는 서버의 init 로그가 이어져요.