백엔드에서 동작하는 라이브러리를 배포할 때,
특정 기능 구현을 위한 프론트엔드 구현이 필수적인 경우가 있습니다.
예를 들어,
(SSR 위주의) 백엔드 프로젝트 내 디버그 로그를 화면에 출력해주는 라이브러리를 작성한다면,
필연적으로 해당 백엔드 라이브러리에 디버그 로그를 출력하는 프론트엔드가 포함되어야겠죠.
과거에는 단순한 HTML, CSS, JS 만을 활용해 구현하였기 때문에 그저 해당 파일을 static 파일로 그대로 꽂아넣으면 충분했습니다.
그러나 요즘은 React 같은 컴파일이 필요한 방식으로 작성하다보니, 프로젝트의 디렉터리 구조도 복잡해졌고, 또 실질적으로 백엔드 라이브러리에서 필요한 코드는 컴파일이 완료된 파일이다보니, 라이브러리 저장소 관리 및 배포에 어려움을 겪고 있습니다.
아래는 제가 생각하는 이상적인(?) 방법 몇가지인데,
어떤 방법이 더 좋은 방법일지, 또는 이 이외의 다른 좋은 방법이 있을지 의견 부탁드립니다.
- 프론트엔드와 백엔드 저장소를 별도로 나누고
- 프론트엔드 저장소에서 새로운 버전이 등록되면
- CI는 이를 빌드하여, 백엔드 저장소에 자동으로 해당 빌드 파일을 반영하는 PR을 등록하는 형태
-. 고려해 보아야 할 단점
ㄴ 백엔드 저장소에 개발자가 쉽게 이해할 수 없는 컴파일된 코드가 포함됨
ㄴ 저장소가 외부의 기능인 CI 등에 의존성을 가지게 됨.
- 프론트엔드와 백엔드 저장소를 별도로 나누고
- 백엔드에는 프론트엔드의 버전값만 저장해둔 뒤 (package.json 등)
- 백엔드 라이브러리를 설치하게 되면 자동으로 npm 스크립트를 실행해 빌드 및 컴파일을 처리함
-. 고려해 보아야 할 단점
ㄴ 백엔드 라이브러리가 node, npm 등의 의존성을 가지게 됨.
ㄴ 라이브러리는 보통 유저 프로젝트가 아닌 별도 벤더 경로로 관리되는데, 이에 간섭하는 코드가 실행되며, 또 버전 관리에 영향을 끼칠 수 있음
- 백엔드 저장소 내에 프론트엔드 코드를 포함시키고
- 프론트엔드 코드의 변경이 있을 경우, 필수적으로 컴파일하여 커밋하도록 제한하거나,
- 자동화된 절차를 통해 자동으로 컴파일하도록 처리함.
-. 고려해 보아야 할 단점
ㄴ 백엔드 저장소의 디렉토리 구조가 매우 복잡해짐
ㄴ 저장소 외부의 기능인 CI 등에 의존성을 가지게 되거나, 또는 자동화하기 힘든 커밋 규칙이 생김.
- 백엔드나 프론트의 저장 장소와 관계 없이
- 프론트엔드 코드의 컴파일을 사용자에게 일임함.
- 이후 컴파일된 코드의 경로를 백엔드 라이브러리 사용 시 지정하도록 처리함.
-. 고려해 보아야 할 단점
ㄴ 백엔드 라이브러리가 node, npm 등의 의존성을 가지게 됨.
ㄴ 프론트엔드의 경로를 전달하는 등의 옵션이 필요해지는 등 라이브러리의 인터페이스가 장황해짐.
불러오는 중...