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 애플리케