jQuery를 Vue.js로 교체: 빌드 단계가 필요하지 않음

최근 JavaScript 프레임워크를 둘러싼 모든 과대 광고를 무시하는 것은 불가능하지만 프로젝트에 적합하지 않을 수 있습니다. 아마도 당신은 실행 가능하지 않을 수 있는 몇 가지 작은 추상화를 위해 전체 빌드 시스템을 설정하고 싶지 않을 것입니다. 아마도 프로젝트를 빌드 시스템으로 옮기고 따라서 다른 배포 방법은 클라이언트에게 청구할 수 없는 추가 시간과 노력을 의미할 수 있습니다. 아마도 모든 HTML을 JavaScript로 작성하고 싶지는 않을 것입니다. 목록은 계속됩니다.

어떤 사람들은 알지 못할 수도 있습니다. 빌드 단계가 필요하지 않고 jQuery를 통합하는 것과 같은 방식으로 Vue를 프로젝트에 통합할 수 있습니다. Vue는 HTML에서 직접 사용할 수 있다는 점에서 유연합니다.

따라서 현재 페이지 구조가 다음과 같은 경우:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> //some jquery code here </script>

여기에서 말 그대로 스크립트 태그를 변경할 수 있으며 이전과 마찬가지로 HTML과 JS를 함께 사용할 수 있으며 몇 가지 작은 코드만 리팩토링할 수 있습니다. JavaScript로 HTML을 다시 작성할 필요가 없고, webpack을 사용할 필요도 없으며, 거대한 시스템을 설정할 필요도 없습니다.

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> <script> //some vue code here </script>

태그를 교체하고 마크업을 그대로 둘 수 있습니다. 가장 좋은 점은 코드가 더 복잡해질 것이라고 생각할 수 있지만 이 기사를 읽고 예제를 보면 Vue가 매우 간단하고 읽기 쉽고 유지 관리 및 적용하기 쉽다는 것을 알 수 있습니다. 크기 측면에서 볼 때 CDN에서 그대로 사용하기에는 상당히 비슷합니다. 축소된 Vue 버전 2.5.3은 86KB 입니다. jQuery 3.2.1은 87KB 입니다.

jQuery의 몇 가지 일반적인 사용 사례와 이를 Vue로 전환하는 방법, 그리고 그렇게 하려는 이유를 살펴보겠습니다.

사용자 입력 캡처

사이트에서 JavaScript가 필요한 정말 일반적인 사용 사례는 양식에서 사용자 입력을 캡처하는 것이므로 여기서 시작하겠습니다. 단순성과 명확성을 위해 아직 전체 형식을 통합하지는 않겠지만 끝까지 작업할 것입니다.

사용자가 입력할 때 정보를 캡처하기 위해 jQuery와 Vue에서 이 작업을 나란히 수행하는 방법은 다음과 같습니다.

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model="name" /> <!--v-model is doing the magic here--> <p>{{ name }}</p> </div>

 //this is a vue instance new Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for 'name' } })

이 예제를 사용하는 이유는 Vue의 몇 가지 장점을 보여주기 때문입니다. Vue는 반응형이므로 특히 변경 사항에 응답할 수 있습니다. 입력 중인 내용을 업데이트할 때 지연 없이 즉시 변경되는 것을 볼 수 있습니다.

또한 jQuery 버전에서 DOM이 제어되고 있음을 알 수 있습니다. DOM에서 항목을 가져와서 수신하고 응답합니다. 이것은 우리를 DOM이 현재 설정되어 있는 방식과 연결하고 그것을 탐색하는 방법에 대해 생각하게 합니다. HTML 요소의 구조가 변경되면 이러한 변경 사항에 맞게 코드를 조정해야 합니다.

Vue 버전에서는 상태 를 저장하고 있습니다. 업데이트 및 변경하려는 속성 하나를 추적하고 지시문이라고 하는 것으로 변경하려는 요소를 추적합니다. 즉, 대상으로 지정해야 하는 HTML 요소에 직접 연결됩니다. DOM의 구조가 변경될 수 있고 HTML이 이동할 수 있으며 이 중 어느 것도 성능에 영향을 미치거나 이러한 이벤트를 캡처하지 않습니다. 우리의 경우 입력에서 해당 v-model 속성을 사용하여 JavaScript에 저장하고 있는 데이터에 연결합니다.

하지만! 이것은 엔터 키를 눌렀을 때 무언가를 저장하는 것만큼 일반적인 사용 사례가 아니므로 다음에 살펴보겠습니다.

단일 이벤트에 사용자 입력 저장

Vue가 작동하는 방식에 대한 흥미로운 점은 데이터를 저장하고 검색할 때 특정 DOM 이벤트에 대해 생각할 필요가 없다는 것입니다. 본질적으로, 우리는 우리가 포착하고자 하는 것에 대한 아이디어를 이미 가지고 있습니다. 변경할 이벤트를 선택하여 모양을 지정합니다. 대조적으로 jQuery는 DOM이 수행하는 작업과 밀접하게 연결되어 있으며 이러한 DOM 이벤트에 의존하여 저장하는 변수를 구축합니다. 이 변수는 검색을 위해 하나의 일관된 그룹(데이터 내)이 아니라 어디에나 배치될 수 있습니다. Enter 키를 누를 때 정보가 수집되는 마지막 예제의 업데이트된 버전에서 이를 확인할 수 있습니다.

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model.lazy="name" /> <p>{{ name }}</p> </div>

 new Vue({ el: '#app', data: { name: '' } });

이 버전에서는 모든 키 입력에 대해 캡처할 필요가 없기 때문에 jQuery가 다소 단순화되었지만, 여전히 DOM에서 작업을 수행하고 이러한 변경 사항에 단계별로 대응하고 있습니다. jQuery의 코드는 항상 다음과 같이 약간 진행됩니다.

"가서 이 요소를 가져와서 무엇을 하고 있는지 확인하고 이러한 변경 사항을 유지하고 이러한 변경 사항에 대해 조치를 취하십시오."

이에 비해 Vue에서는 변경 사항을 제어하고 DOM은 명령을 기반으로 이러한 변경 사항에 응답합니다. 업데이트하려는 항목에 직접 첨부합니다. 우리의 경우 수정자(modifier: v-model.lazy 라고 하는 작은 추상화가 있습니다. Vue는 이제 변경 이벤트가 발생할 때까지 이것을 저장하지 않는다는 것을 알고 있습니다. 꽤 깔끔한!

토글 클래스

다음으로 다룰 내용은 CSS 클래스를 토글하는 것입니다. 왜냐하면 전능하고 항상 지켜보는 Googly가 저에게 알려준 것처럼 이것이 가장 일반적인 jQuery 기능이기 때문입니다.

 <div> <button aria-pressed="false">Toggle me</button> <p class="toggle">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS $(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); }); }); 

 <div> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS new Vue({ el: '#app', data: { active: false } })

다시 말하지만, 여기서 우리가 보는 것은 jQuery 버전에서 우리가 DOM에 상태를 저장하고 있다는 것입니다. 요소에는 클래스가 있고 jQuery는 클래스의 존재를 기반으로 결정을 내립니다. 클래스는 DOM을 ping하여 확인합니다. Vue 버전에서는 조건을 저장하고 그 상태에 따라 스타일을 지정합니다. 우리는 이 정보를 DOM에 요청하는 것이 아니라 우리가 직접 보유합니다.

데이터에 active 을 저장하고 버튼이 조건을 전환하며 .red 가 해당 조건에 따라 변경됩니다. Vue의 스크립트에서 아무 것도 설정할 필요가 없기 때문에 접근성에 대한 상태인 aria-pressed 도 훨씬 더 빨리 지정됩니다. ' active 상태를 기반으로 템플릿에서 직접 인라인 상태로 전환할 수 있습니다 .'

또한 마지막 몇 가지 예에서 jQuery보다 Vue.js로 작업을 시작하는 것이 훨씬 더 많은 코드가 될 것이라고 생각했을 수도 있지만 실제로는 꽤 비슷합니다.

숨기고 보여주기

또 다른 일반적인 jQuery 사용 사례는 무언가를 숨기고 표시하는 것입니다. jQuery는 이 작업을 정말 간단하게 만드는 데 항상 좋은 일을 해왔으므로 Vue와 나란히 어떻게 보이는지 살펴보겠습니다.

 <div> <button type="button" aria-expanded="false"> Toggle Panel </button> <p class="hello">hello</p> </div>

 $(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); }); }); 

 <div> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> Toggle Panel </button> <p v-if="show">hello</p> </div>

 new Vue({ el: '#app', data: { show: true } })

jQuery와 Vue는 모두 이 작업을 단순하게 유지하는 데 훌륭하지만 토글과 같은 작업을 위해 Vue를 사용하는 데에는 몇 가지 이유가 있습니다. Vue에는 Vue devtools라는 도구가 있습니다. 이것은 Chrome devtools와 다르지 않지만 사용하면 Vue에서 무슨 일이 일어나고 있는지에 대한 몇 가지 특별한 정보를 얻습니다.

jQuery와 Vue 버전 모두에서 요소가 숨겨지고 나타나는 것을 볼 수 있습니다. 하지만 뭔가 잘못되면 어떻게 될까요? 코드의 무언가가 예상한 대로 작동하지 않으면 어떻게 됩니까? jQuery로 디버깅을 시작하기 위해 우리는 아마도 일부 console.log 를 추가하거나 오류가 발생한 위치를 추적하기 위해 일부 중단점을 설정했을 것입니다.

이제 console.log 에는 아무 문제가 없지만 Vue devtools의 도움으로 실제로 Vue가 생각하는 일에 대한 실습 Vue(저항할 수 없음)를 얻을 수 있습니다. 아래 이 gif에서 버튼을 토글할 때 Vue devtools가 그에 따라 true/false 상태를 업데이트하는 것을 볼 수 있습니다. DOM이 예상대로 작동하지 않는다면 실시간으로 Vue에서 데이터를 볼 수 있습니다. 이렇게 하면 디버깅이 훨씬 쉬워집니다. 그것은 실제로 아주 훌륭합니다.

내가 이것에 대해 좋아하는 또 다른 점은 v-if 가 다른 조건으로 확장하기 쉽다는 것입니다. 내가 토글하는 것이 자주 표시되고 숨길 경우 v-if 대신 v-show 라는 것을 사용하기로 결정할 수 있습니다. v-if 는 요소를 완전히 마운트 해제하는 반면 v-show 는 가시성을 토글합니다. DOM 노드를 완전히 마운트 해제/마운트하는 것보다 스타일에서 가시성을 토글하는 것이 훨씬 더 성능이 좋기 때문에 이 구별은 정말 중요합니다. 많은 조건, 또는 사용자 입력 또는 기타 조건의 존재 여부에 따라 무언가를 표시하거나 숨길 수 있습니다. 이것은 일반적으로 jQuery가 약간 지저분해져서 여러 위치에서 DOM을 ping하고 이를 조정할 수 있는 곳입니다. 다음은 사용자 입력의 존재를 기반으로 무언가를 보여주는 조정의 예입니다.

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea v-model="tacos"></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 new Vue({ el: '#app', data() { return { tacos: '' } } }) 

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 $(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length > 0) { button.show(); } else { button.hide(); } }) });

이 예제에서 Vue가 상태를 유지하도록 하는 것의 가치를 볼 수 있습니다. 우리는 변경 사항에 매우 자연스럽게 그리고 더 적은 코드로 반응하고 있습니다. 스타일에 익숙해지면 한 줄씩 논리를 추적할 필요가 없기 때문에 이해가 더 빠릅니다. 많은 사람들이 이 차이를 "필수적 vs. 선언적"이라고 부릅니다.

양식 제출

jQuery의 정식 사용 사례는 역사적으로 AJAX 호출을 사용하여 양식을 제출하는 것이므로 이에 대해서도 살펴봐야 합니다. Vue에는 실제로 AJAX와 같은 내장 기능이 없습니다. 이 작업을 돕기 위해 Axios(HTTP 요청을 만들기 위한 JavaScript 라이브러리)와 같은 것을 사용하는 것이 Vue 애플리케이션에서 일반적입니다.

이 예제는 나머지 예제보다 조금 더 복잡합니다. 여기서 몇 가지 작업을 수행합니다.

1. 버튼은 양식에 입력을 시작하기 전에 회색으로 표시되고 "활성" 클래스를 수신하고 파란색으로 바뀝니다.
2. 양식을 제출하면 페이지가 로드되지 않습니다.
3. 양식이 제출되면 페이지에 응답 데이터가 표시됩니다.

 <div> <form action="/"> <div> <label for="name">Name:</label><br> <input type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" name="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea name="caps" required></textarea> </div> <button class="submit" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre class="response"></pre> </div> </form> </div>

 $(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); }); });

여기에서 2-10행에서 이전에 했던 것과 유사하게 버튼 클래스를 처리하는 것을 볼 수 있습니다. event라는 매개변수를 폼에 전달한 다음 event.preventDefault() 라고 말하여 페이지를 다시 로드하지 않도록 합니다. 그런 다음 양식 입력에서 모든 양식 데이터를 수집하고 양식을 처리한 다음 응답을 AJAX 요청의 .done() 호출에 넣습니다.

 <div> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" v-model="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea v-model="caps" required></textarea> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre>{{ response }}</pre> </div> </form> </div>

 new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response => { this.response = JSON.stringify(response, null, 2) }) } } })

Vue 버전에서는 양식에 채워야 할 필드를 결정한 다음 이전에 사용한 해당 v-모델과 연결합니다. 클래스를 토글하기 위해 이름이 있는지 확인합니다. 이벤트를 전달하고 event.preventDefault() 를 작성하는 대신 양식 요소에 @submit.prevent 를 작성하기만 하면 됩니다. 게시물 자체를 제출하기 위해 Axios를 사용하고 응답으로 Vue 인스턴스에 응답을 저장합니다.

유효성 검사, 오류 처리 및 테스트 작성을 포함하여 프로덕션 준비 형식을 갖기 위해 하고 싶은 일이 여전히 많지만 이 작은 예제에서 많은 것을 처리하면서 Vue가 얼마나 깨끗하고 가독성이 좋은지 알 수 있습니다. 사용자 입력을 포함하여 업데이트 및 변경 사항.

결론

당신에게 적합하다면 jQuery를 사용해도 괜찮습니다! 이 기사는 Vue가 많은 오버헤드를 필요로 하지 않는 소규모 사이트를 위한 꽤 좋은 추상화라는 것을 보여줍니다. Vue는 크기가 비슷하고 추론하기 쉬우며 JavaScript로 HTML을 다시 작성하고 대역폭이 없는 경우 빌드 시스템을 채택하지 않고 Vue로 작은 기능을 전환하는 것은 상당히 간단합니다. 이 모든 것이 고려하기에 매우 매력적입니다.

Vue의 유연성으로 인해 시간이 지남에 따라 더 복잡한 구조를 채택하려는 경우 이 코드를 빌드 단계 및 구성 요소 구조로 쉽게 전환할 수 있습니다. 실제로 그것을 시도하는 것은 꽤 재미있기 때문에 할 준비가 되면 vue-cli를 확인하십시오. 이 도구는 몇 가지 터미널 명령으로 전체 프로덕션 수준의 Vue 및 webpack 빌드를 스캐폴딩할 수 있는 기능을 제공합니다. 이를 통해 재사용 가능한 단일 구성 요소를 구성하는 하나의 파일에서 HTML, CSS 및 스크립트를 함께 사용할 수 있는 단일 파일 구성 요소로 작업할 수 있습니다. 특별한 작업을 하지 않는 한 webpack 빌드를 구성할 필요가 없으므로 설정하는 데 많은 시간을 절약할 수 있습니다. 프로덕션 배포를 위해 모든 것을 준비하는 기본 제공 명령도 있습니다.

Vue를 프로젝트에 통합하는 방법 중 하나를 선택할 수 있는 유연성의 좋은 점은 작업 스타일을 한 번에 모두 변경해야 하는 압박을 받지 않고 시간이 지남에 따라 천천히 변경할 수도 있다는 의미입니다. 이것이 사람들이 Vue를 프로그레시브 프레임워크라고 부르는 이유입니다.