LabHub
배우기 러닝패스 코스

CBA — Backstage 인증 어소시에이트 · 개발 워크플로 — 만들고, 띄우고, 타입 검사하고, 이미지로 굽고, 테마를 입힌다 · 실습

소스를 고쳤는데 로컬 백엔드 응답이 그대로다

LabHub 에서 이어서 보기

목표

Backstage 앱 저장소와 같은 모양의 Yarn 4 워크스페이스를 직접 세우고, 의존성 설치와 잠금 파일,
TypeScript 컴파일, 빌드 산출물, 로컬 실행으로 이어지는 개발 흐름을 한 바퀴 돌립니다. 채점기는 파일만 보지 않고
yarn·tsc·node 를 다시 실행한 결과로 판정합니다.

왜 중요한가

"내 PC 에서는 되는데 CI 에서 설치가 실패한다", "타입 오류가 났는데 dist 는 왜 생겼지", "소스를 고쳤는데 응답이
그대로다" — Backstage 를 개발하며 가장 자주 부딪히는 것은 플러그인 코드보다 이 흐름입니다. 잠금 파일이 무엇을 고정하고,
tsc 가 무엇을 잡고 무엇을 놓치며, 백엔드가 실제로 어떤 파일을 실행하는지 알아야 원인을 빨리 찾습니다.

처음 VM 이 뜨는 데 4분쯤 걸리고, 2단계 설치는 인터넷에서 수십 초 걸립니다.
실제 프로젝트의 backstage-cli(yarn start·yarn build)와 프런트엔드 앱(packages/app)은 설치 용량과 빌드 시간이 커서
쓰지 않고, 같은 일을 yarn·tsc·node 로 손으로 합니다. 이 VM 에는 docker 가 없어 이미지 빌드는 하지 않습니다.

단계

1. 루트·backend·플러그인 세 package.json 과 .yarnrc.yml 로 워크스페이스를 세웁니다.
2. yarn install 로 잠금 파일과 워크스페이스 링크를 만듭니다.
3. 잠금 파일과 어긋난 package.json 이 --immutable 에서 막히는 것을 기록하고 되돌립니다.
4. 잘못된 정책 값을 tsc 가 잡는 것과, 그래도 JS 가 만들어지는 것을 기록합니다.
5. noEmitOnError 를 켜고 고쳐서 빌드합니다.
6. 플러그인을 붙인 백엔드를 로컬에서 띄웁니다.
7. 소스만 고치고 재시작하면 안 바뀌고, 빌드해야 바뀌는 것을 확인합니다.
8. 지금 저장소에서 잰 값으로 개발 흐름 점검표를 씁니다.

참고

단계 8개

  1. 앱 저장소와 같은 모양의 워크스페이스를 세운다
  2. 한 번의 설치로 잠금 파일과 워크스페이스 링크가 생긴다
  3. 잠금 파일과 어긋난 package.json 은 CI 에서 막힌다
  4. tsc 는 잘못된 정책 값을 잡지만 JS 는 그래도 만든다
  5. 타입 오류가 있으면 아무것도 내보내지 않게 빌드한다
  6. 워크스페이스 플러그인을 붙인 백엔드를 로컬에서 띄운다
  7. 소스를 고치고 빌드하고 다시 띄워야 응답이 바뀐다
  8. 개발 흐름 점검표를 지금 저장소로 채운다