Vue3 - 알고 싶은 모든 것

자바스크립트 라이브러리에서 프레임워크에 이르기까지 Vue의 여정은 인상적입니다. 특히 경량성을 유지하는 방법을 고려할 때 특히 그렇습니다. Vue3에서 제공하는 몇 가지 기능은 Vite에서 작동하는 빌드 도구 모음뿐만 아니라 더 쉬운 상태 관리를 가능하게 하는 Pinia를 포함합니다. 앱을 Vue3로 업데이트하고 싶거나 단순히 프레임워크를 실험하고 싶거나 상관없이 Vue3에 대해 알아야 할 모든 것을 여기에 정리했습니다!

Vue3는 무엇입니까?

Vue3에서 볼 수 있는 변경 사항을 살펴보기 전에 먼저 Vue.js와 핵심 구성 요소가 무엇인지 살펴보겠습니다.

뷰

Vue.js는 사용자 인터페이스를 만드는 데 사용할 수 있는 오픈 소스 프런트 엔드 JavaScript 프레임워크 입니다. 프레임워크는 사용자 디스플레이의 신속한 개발을 지원하는 선언적 및 구성 요소 기반 코딩 접근 방식을 제공합니다. 기본 또는 복잡한 인터페이스를 개발하는 데 사용할 수 있으며 업계 표준 HTML, CSS 및 JavaScript를 기반으로 구축되었습니다. Vue.js의 인기와 Vue.js의 대규모 사용자 기반의 이유는 프로그래머 친화적인 구문, 사용 용이성 및 잘 정의된 문서 때문입니다.

위에서 언급했듯이 Vue.js는 두 가지 핵심 특성을 기반으로 합니다.

선언적 렌더링 을 사용하면 JavaScript 상태에 따라 HTML 출력을 선언적으로 정의할 수 있습니다. Vue.js는 템플릿 구문을 사용하여 일반 HTML을 확장합니다.

반응성 - Vue.js는 JavaScript 상태를 적극적으로 모니터링하고 수정되면 DOM을 빠르게 새로 고칩니다.

뷰3.0

Vue 2를 사용하여 코딩하는 엔지니어는 이제 Vue3으로 업데이트해야 합니다. 읽기 쉽고 일관된 구성 요소를 훨씬 더 쉽고 더 나은 방법으로 응용 프로그램을 구성할 수 있도록 하는 새로운 기능이 포함되어 있기 때문입니다. Vue3는 사용자 친화적이며 더 짧고 유지 관리가 간단합니다. Vue3의 주목할만한 기능 중 일부는 텔레포트, 프래그먼트 및 다중 v-모델입니다.

최신 버전은 필터를 없애고 상태 기반 CSS 변수와 실험적 서스펜스 기능을 제공합니다. 또한 수명 주기 명명 수정 및 단일 파일 구성 요소 변경이 있습니다.

Vue3가 출시되었나요?

사용 가능한 최신 버전의 Vue - Vue3는 2018년 중반에 처음 발표되었으며 2020년 9월에 공식 출시되었습니다. Vue3.0은 2022년 2월 7일에 프로그레시브 자바스크립트 프레임워크의 공식 기본 버전으로 선언되었습니다.

Vue3의 새로운 기능은 무엇입니까?

Vue3에서 가장 기대되는 변경 사항은 다음과 같습니다.

제공/주사

Vue 2에서는 사용자가 코드의 props를 통해 문자열, 배열, 개체 등과 같은 데이터를 전달할 수 있습니다. 이러한 데이터는 상위 요소에서 하위 요소로 쉽게 전달할 수 있습니다. 그러나 props를 사용하면 상위 요소에서 깊이 중첩된 하위 요소로 데이터를 보내는 것이 더 어려워졌습니다. 그 결과 개발자들은 Vuex Store와 Event Hub를 사용해야 했습니다. Vue 2.2.0에는 제공/주입도 포함되어 있지만 일반 프로그램 코드에서는 사용하지 않는 것이 좋습니다.

하지만 Vue3에서 개선된 제공/주입 콤보를 사용하면 데이터를 더 빠르고 깔끔하게 전달할 수 있습니다. 이름에서 알 수 있듯이 우리는 하위 요소가 얼마나 깊이 중첩되어 있는지에 관계없이 상위 요소에서 해당 하위 구성 요소로 데이터에 액세스할 수 있도록 제공하는 데 사용합니다. 여기에서 제공을 객체 또는 함수로 사용할 수 있습니다.

텔레포트

빌드하려는 앱의 논리에 따라 구성 요소가 표시하려는 위치와 다른 위치에 표시될 수 있습니다. 예를 들어 전체 화면을 표시하고 차지하는 팝업을 만들 수 있습니다. 이를 극복하기 위해 CSS에서 이러한 구성 요소의 position 속성을 사용할 수 있지만 Vue3에서는 개발자가 Teleport를 사용할 수도 있습니다.

텔레포트를 사용하면 프로그래머는 초기 컨테이너에서 요소가 래핑되어 사용 중인 페이지의 기존 구성 요소로 요소를 이동할 수 있습니다. 예를 들어 #app div의 헤더 요소를 헤더로 재배치할 수 있습니다. Teleport를 사용하여 Vue DOM 외부에 있는 코드 구성 요소로 요소를 이동할 수만 있다는 점을 기억하십시오.

파편

Vue 2에서 파일 템플릿에 여러 루트 구성 요소를 갖는 것은 어렵습니다. 프로그래머는 동일한 솔루션으로 상위 구성 요소의 모든 구성 요소를 둘러싸기 시작했습니다. 때로는 프로그래머가 요소를 감싸는 컨테이너 없이 요소를 렌더링해야 할 수도 있습니다. 이제 엔지니어는 Vue3에 추가된 기능인 Fragments 덕분에 루트 템플릿 파일에 수많은 항목을 가질 수 있습니다.

글로벌 뷰 API

Vue 앱의 main.js 파일에서 Vue.component 또는 Vue.use를 자주 찾았을 것입니다. 이를 전역 API 라고 하며 Vue 2에는 이러한 메서드가 많이 있습니다. 앱의 인스턴스가 여러 개 있는 경우 모든 인스턴스가 Vue 위에 배치됩니다. 특정 기능을 단일 애플리케이션 인스턴스로 제한하는 것은 어렵습니다.

Vue3는 createApp이라는 새로운 글로벌 API를 도입하여 이 문제를 해결합니다. 이 방법을 사용하면 Vue 애플리케이션의 새로운 인스턴스를 얻을 수 있습니다. 모든 Vue 2.x 관련 API는 별도의 앱 인스턴스로 전송됩니다. 이를 통해 애플리케이션의 모든 인스턴스는 이미 사용 중인 다른 인스턴스를 방해하지 않고 해당 애플리케이션에 독점적인 기능을 가질 수 있습니다.

이벤트 API

Vuex Store를 사용하는 것 외에도 Event Bus의 사용은 프로그래머가 부모-자식 컨텍스트를 공유하지 않는 요소 간에 데이터를 전달하는 데 사용하는 가장 인기 있는 방법 중 하나입니다. 그러나 $on, $off , $once와 같은 코드는 Vue3에서 모두 삭제되었습니다. 그러나 자식 요소는 부모 요소에 이벤트를 내보내야 하므로 $emit에 계속 액세스할 수 있습니다. 이에 대한 해결책은 제공/주입을 사용하는 것입니다.

Vite 기반 빌드 도구 모음

Vue의 제작자인 Evan You가 디자인한 Vite는 가볍고 빠르게 생성할 수 있는 최고 수준의 Vue SFC 지원 도구 모음입니다. Vite는 이제 표준 Vue3 빌드 구성의 엔진입니다. webpack 위에 구축된 모듈 번들러 @vue-cli/service 는 실행, 핫 리로드 및 컴파일 시 전체 Vue 애플리케이션을 래핑합니다. 반면 Vite는 프로그램 코드에서 ES 가져오기 구문을 가져와 브라우저가 HTTP 요청을 보내기 전에 각 가져오기를 분석할 수 있도록 합니다.

변경은 주로 속도의 이유로 이루어집니다. 서버는 JavaScript 구성 요소에 대한 기본 브라우저 지원을 사용하고 훨씬 빠르기 때문에 즉시 시작됩니다.

구성 API 구문

옵션 API는 요소 상태 및 논리를 생성하는 데 사용되었습니다. Composition API는 Vue3에서 이를 대체하기 위해 출시되었습니다. 가져온 메서드를 사용하여 옵션을 정의하지 않고 Vue 요소를 만들 수 있게 해주는 API 모음일 뿐입니다.

구성 API에는 다음 API가 포함되어 있습니다.

반응성 API - 예: ref() 및 react(). 이를 사용하여 반응 상태, 계산 상태 및 감시자를 직접 빌드할 수 있습니다.

수명 주기 후크 - 예: onMounted() 및 onUnmounted(). 라이프사이클 후크를 사용하여 요소 라이프사이클에 연결할 수 있습니다.

종속성 주입 - 예를 들어, 제공() 및 주입(). Reactivity API와 함께 Vue의 의존성 주입 시스템을 활용하는 것은 의존성 주입을 통해 가능합니다.

구성 API 사용의 장점

옵션 API에 비해 구성 API를 사용할 때의 주요 이점은 다음과 같습니다.

• 반응 상태를 생성하기 위해 Vue3에서 요소가 더 이상 필요하지 않습니다.
• 수많은 반응 속성을 추가할 때 Vue.js 요소의 설정이 부풀려질 수 있습니다. 이 때문에 이러한 반응성 변수를 별도의 자바스크립트 파일로 추상화하는 것이 유용할 수 있습니다.
• Composition API의 주요 이점은 Composable 메서드의 형태로 명확하고 효과적인 논리를 재사용할 수 있다는 것입니다. 옵션 API에서 로직을 재사용하는 주요 방법인 믹스인의 모든 문제를 해결합니다.
• 완전한 형식 유추를 사용하여 Composition API에 코드를 입력할 수 있습니다.
• 합성 API에서 작성하는 프로그램이 더 효율적이고 변수 이름을 더 작게 만들 수 있습니다. 이렇게 하면 오버헤드가 줄어듭니다.
• Composition API를 사용하면 프로그램 코드를 더 잘 공유할 수 있습니다.

피니아

Pinia는 Vue.js용 경량 상태 관리 도구입니다. 이를 통해 요소와 페이지 간에 상태를 공유할 수 있습니다. Vue3의 새로운 반응성 개념을 사용하여 사용자 친화적이고 완전한 유형의 상태 관리 프레임워크를 만듭니다. 이것은 이제 Vue3의 새로운 표준 상태 제어 라이브러리입니다.

Pinia는 처음에 Vuex의 잠재력에 대한 연구 역할을 했습니다. 오랫동안 Vuex는 Vue에 대해 제안된 상태 관리 시스템이었지만 Vue3에서는 공식 문서에서 Pinia가 상태 관리에 권장되는 시스템입니다. 현재 Vuex는 유지 관리 모드에 있습니다. 계속 작동하지만 새로운 기능은 추가되지 않습니다. 새로운 앱에는 Pinia를 사용하는 것이 좋습니다.

왜 피니아인가?

Pinia는 매우 가벼우며 최대 1KB에 불과합니다. 또한 Vue.js 개발 도구와 통합되어 Vue 2 및 Vue3에서 코딩 경험을 개선합니다. Pinia는 모든 데이터 유형을 추론하므로 자바스크립트에서도 완전하고 정확한 자동 완성을 제공할 수 있습니다. Pinia는 설계상 모듈식이며 사용자 친화적이며 확장 가능합니다. 전반적으로 Pinia는 가볍고 복잡하지 않으며 직선적입니다. 요소를 다루는 것과 매우 유사하며 Vue3에서 동적 프로그래밍에 필요한 모든 도구를 포함합니다.

Vue 2가 더 이상 사용되지 않습니까?

Vue 2의 마지막 마이너 업데이트는 2022년 7월에 릴리스된 Vue 2.7이었습니다. Vue 2는 현재 유지 관리 모드입니다. 추가 기능은 제공되지 않지만 18개월 동안 여전히 중요한 버그 수정 및 보안 패치가 제공됩니다. 2023년 말까지 Vue 2는 더 이상 사용되지 않습니다.

Vue 2에서 마이그레이션

소프트웨어에 따라 Vue 2를 사용하여 매우 큰 프로젝트에서 작업하는 경우 Vue3으로 전환하는 것은 가치가 없을 수 있습니다. 최적화를 위한 최선의 노력에도 불구하고 효율성 문제가 지속되면 Vue3을 사용하십시오.

애플리케이션을 Vue3로 마이그레이션할지 여부는 크기와 복잡성에 따라 다릅니다. Vue 2의 대부분의 구문과 기술은 Vue3와 동일합니다. 그러나 위에서 언급한 변경 사항 중 일부를 사용하려면 마이그레이션하는 것이 좋습니다.

AppMaster 프로젝트의 Vue.js

AppMaster 플랫폼은 VueJS 프레임워크 또는 프레임워크의 세 번째 버전을 사용하여 사용자를 위한 프런트 엔드 애플리케이션을 만듭니다. Vue 3는 관리자, 패널 및 클라이언트 포털을 만드는 데 사용되며 AppMaster 스튜디오의 전체 인터페이스도 실제로 VueJS 프레임워크를 사용하여 만들어집니다.

우리는 마이크로 프론트엔드 또는 프론트엔드 마이크로서비스라는 특별한 접근 방식을 사용하여 제품을 빠르고 효율적으로 개발할 수 있습니다. 예를 들어, 각 데이터 모델 편집기 와 비즈니스 프로세스 편집기 는 우리 플랫폼에서 완전히 별개의 프론트엔드 애플리케이션입니다. 이를 통해 개발 팀의 관점에서 매우 빠르고 독립적으로 개발할 수 있으므로 제품의 전체 속도가 향상됩니다. 이러한 모든 이점은 고객이 당사 애플리케이션을 사용하여 얻을 수 있는 것입니다.

앞으로 SPA 단일 페이지 응용 프로그램 모드 외에도 SSR(서버 측 렌더링) 모드를 추가하여 고객이 관리 패널 및 사용자 지정 포털뿐만 아니라 높은 SEO 최적화.

노코드에 대해

코딩의 민주화에 영향을 미치는 핵심 요소 중 하나는 코드 없는 개발 접근 방식 입니다. 요즘에는 더 많은 사람들이 코딩 없이 일반적으로 프로그래밍에 액세스할 수 있습니다. 웹 디자인, 모바일 애플리케이션 개발 , 반응형 웹 개발을 더 간단하게 만듭니다.

AppMaster는 소스 코드를 자동으로 생성하는 데 사용할 수 있는 응용 프로그램 중 하나입니다. 언제든지 코드를 보고 검사할 수 있습니다. AppMaster를 사용하면 컴퓨터 언어를 사용하여 프로젝트 정보를 사용자 정의할 수 있습니다. 또한 사람들이 원하는 경우 코드를 내보낼 수 있습니다. 이는 귀하가 AppMaster로 작업 중인 애플리케이션에 대한 완전한 제어 및 소유권을 가지고 있음을 보장합니다.

결론

코드 스니펫과 함께 Vue3가 Vue 2와 어떻게 다른지에 대한 자세한 설명이 필요하면 공식 Vue.js 문서를 참조하세요. 우리는 당신이 알아야 할 대부분의 주요 변경 사항을 언급했습니다. 이 프레임워크로 애플리케이션을 구축하는 데 관심이 있다면 Vue3에 대한 업데이트를 계속 알고 있어야 합니다.