Vue

GitLab 프론트엔드에서 Vue.js 애플리케이션을 구성하고 테스트하는 방법과 아키텍처 권장 사항을 설명합니다.

Vue를 시작하려면 Vue 공식 문서 를 참고합니다. 예시 # 다음 섹션에서 설명하는 내용은 아래 예시에서 확인할 수 있습니다: Security products Registry Vue 애플리케이션을 추가해야 하는 경우 # 경우에 따라 HAML 페이지만으로도 요구 사항을 충족할 수 있습니다. 이는 주로 정적 페이지나 로직이 거의 없는 페이지에 해당합니다. 페이지에 Vue 애플리케이션을 추가할 가치가 있는지는 "애플리케이션 상태를 유지하고 렌더링된 페이지를 그 상태와 동기화해야 하는지"를 기준으로 판단합니다. 이를 더 잘 설명하기 위해, 토글이 하나 있고 그 토글을 누르면 API 요청이 전송되는 페이지를 예로 듭니다. 이 경우에는 유지해야 할 상태가 없으므로 요청을 보내고 토글을 전환하기만 하면 됩니다. 그러나 항상 첫 번째 토글과 반대 상태여야 하는 토글을 하나 더 추가한다면 상태 가 필요해집니다. 즉 하나의 토글이 다른 토글의 상태를 "인식"해야 합니다. 순수 JavaScript로 작성하면 이 로직은 보통 DOM 이벤트를 수신하고 DOM을 수정하는 방식으로 처리됩니다. 이런 경우는 Vue.js로 훨씬 쉽게 처리할 수 있으므로 여기서는 Vue 애플리케이션을 만들어야 합니다. 페이지에 Vue 애플리케이션을 추가하는 방법 # Vue 애플리케이션을 위해 app/assets/javascripts 에 새 폴더를 만듭니다. 애플리케이션을 로드하기 위해 페이지별 JavaScript 를 추가합니다. `initSimpleApp helper 를 사용하면 HAML에서 JS로 데이터를 전달 하는 과정을 간소화할 수 있습니다. Vue 애플리케이션이 필요하다는 신호 # 여러 요소에 기반한 복잡한 조건을 정의하고 사용자 상호작용에 따라 업데이트해야 할 때; 어떤 형태로든 애플리케이션 상태를 유지하고 태그·요소 간에 공유해야 할 때; 앞으로 복잡한 로직이 추가될 것으로 예상될 때 - 다음 단계에서 JS·HAML을 Vue로 다시 작성하는 것보다 기본 Vue 애플리케이션으로 시작하는 쪽이 더 쉽습니다. 페이지에 여러 Vue 애플리케이션을 두는 것은 지양 # 과거에는 렌더링된 HAML 페이지의 여러 부분에 소규모 Vue 애플리케이션을 여러 개 추가하는 방식으로 페이지에 조각조각 인터랙션을 더했습니다. 그러나 이 방식은 여러 가지 복잡한 문제를 낳았습니다: 대부분의 경우 이러한 애플리케이션은 상태를 공유하지 않고 API 요청을 독립적으로 수행하므로 요청 수가 증가합니다; Rails에서 Vue로 데이터를 제공하려면 여러 엔드포인트를 사용해야 합니다; 페이지 로드 후 Vue 애플리케이션을 동적으로 렌더링할 수 없으므로 페이지 구조가 경직됩니다; 클라이언트 사이드 라우팅을 활용해 Rails 라우팅을 대체할 수 없습니다; 여러 애플리케이션은 예측하기 어려운 사용자 경험, 늘어난 페이지 복잡도, 더 어려운 디버깅 과정으로 이어집니다; 앱들이 서로 통신하는 방식이 Web Vitals 수치에 영향을 미칩니다. 이러한 이유로, 이미 다른 Vue 애플리케이션이 있는 페이지에는 새 Vue 애