javascript79 Vue3 Component 예제를 통해 배워보기 (부모 자식간 연동하기) 안녕하세요. 오늘은 Vue3 환경에서 Component을 다루는 방법을 포스팅하려고 합니다. 요즘은 Vue로 개발하는 환경이 정말 많아진 것 같은데요. Vue의 업데이트도 꾸준히 되면서 새로운 것이 많이 나오고 있습니다. 하지만 어떤 기술이든 기초적인 것이 가장 중요하기 때문에 오늘은 Vue의 Component에 대해서 알아보고 기초적인 것들이 익숙해지고 나면 조금씩 단계를 올려 포스팅해 보도록 하겠습니다. :) ( 저도 기초가 부족해서 오래 걸릴것 같긴 합니다..ㅜ ) Vue를 사용하다 보면 기능별, 메뉴별 등 시스템 설계에 따라 Component를 나눠서 개발을 많이 하는데, 현재 저도 프로젝트를 진행하면서 하나의 페이지를 개발할 때 Component 구조를 잡는데 시간이 많이 들어가고 있습니다 ㅎㅎ.. 2023. 1. 30. Vue Options API와 CompositionAPI 비교하기! 안녕하세요. 오늘은 Vue의 Options API와 CompositionAPI의 특징과 차이점을 정리해 보려고 합니다! Options API는 Vue 2 버전에서 주로 사용하는 디자인 방식이고, Composition API는 Vue 3 버전이 나오면서 2 버전보다 조금 더 유연하고 향상된 방식이라고 보시면 될 것 같아요. 실제로 어떤 차이가 있는지 간단한 예제를 통해서 알아보겠습니다. :) 1. Vue 2 - Options API 방식 click 먼저 Vue 2 버전의 Options API 방식입니다. 위의 방식은 Vue의 가장 기본이 되는 방식이라고 할 수 있습니다. 보통 Vue를 배우기 시작하신 분이라면 Options API 방식을 많이 보셨을 텐데요. 아직은 Vue 3의 Composition API.. 2023. 1. 29. jQuery attr(), prop() 차이점 알아보기! 안녕하세요. 오늘은 jQuery에서 속성값을 다루는 attr()과 prop()에 대해 포스팅하려고 합니다. 자바스크립트의 DOM 요소를 다루면서 태그마다 특수한 기능을 가진 요소가 있습니다. 오늘 예제를 통해 다뤄볼 요소는 a, input, checkbox, radio 태그를 이용하여 attr(), prop() 기능을 다루는 방법과 차이점을 알아보도록 하겠습니다. attr() attr : attribute를 줄인 용어로 태그의 속성 값을 key, value 구조로 태그에 등록하여 다루는 기능으로 html 기준의 속성값이라고 이해하면 됩니다. prop() prop : property를 줄인 용어로 태그의 고유 속성 값을 다루는 기능으로 javascript 기준의 속성값이라고 이해하면 됩니다. 그럼 간단한 .. 2023. 1. 28. 자바스크립트 async / await 이해하기 ! 안녕하세요. 오늘은 지난 시간에 이어서 자바스크립트의 async와 await에 대해 포스팅하려고 합니다. 지난번에 포스팅했던 콜백과 프로미스를 먼저 보시고난 후에 이번 글을 보게 되면 이해하시는데 많은 도움이 될 거예요! * 자바스크립트 콜백지옥 알아보기! https://sancode.tistory.com/70 * 자바스크립트 프로미스 이해하기! https://sancode.tistory.com/73 async와 await가 나오게 된 이유는 자바스크립트의 콜백 지옥과 프로미스를 조금 더 수월하게 처리하기 위해 나왔다고 이해하시면 됩니다. 자바스크립트는 동적인 처리가 많으며, 그렇기 때문에 비동기로 처리해줘야 하는 상황이 많습니다. 기능 동작을 구현하면서 조금이라도 더 수월하게 처리하기 위해서 async.. 2023. 1. 26. 자바스크립트 경과시간 체크하기 안녕하세요. 오늘은 자바스크립트에서 간단하게 경과시간 체크하는 방법을 포스팅하려고 합니다. 보통 성능 체크를 하거나 서비스의 로딩 체크 등 실제 걸리는 시간을 체크할 때 많이 사용합니다. 그럼 어떤 방식으로 시간 체크를 하는지 알아볼까요?! 1. Date.now() 먼저 위의 예제 소스 코드를 보게 되면 간단하게 예제 함수를 만들었습니다. 경과 시간을 체크하기 위해서 로직의 시작 전 시간과 종료된 종료 시간을 체크해야 합니다. 시간 체크를 위해서 Date.now() 함수를 사용하였습니다. 시작 시간 : var startTime = Date.now(); 종료 시간 : var endTime = Date.now(); 이렇게 로직의 시작과 종료 시점에서 시간을 체크하고, 체크가 끝난 후 마지막에 두 시간차를 구.. 2023. 1. 25. 자바스크립트 히스토리 (history) 알아보기 ! 안녕하세요. 오늘은 자바스크립트의 히스토리(history) 기능에 대해 정리해보려고 합니다. 히스토리 기능은 브라우저의 페이지를 다루는 기능이며, 서버 통신 없이 간단하게 페이지 전환이 가능한 기능입니다. 물론 요즘 많이 사용하는 SPA framework (react.js, vue.js, angular.js 등)를 사용하면 라우터 처리 및 페이지 전환 기능이 잘 구현되어 있어 사용할 경우가 많지는 않지만 자바스크립트의 순 기능들이 필요한 경우가 꼭 한 번씩 올 때가 있습니다! 그렇기 때문에 히스토리 기능의 동작 원리를 정리해 두시면 도움이 많이 되실 겁니다 :) 그럼 바로 알아볼까요?! 1. back 현재 페이지에서 뒤로 한 페이지 이동 history.back(); history.back()의 기능은 현.. 2023. 1. 25. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
