지금, 개발하기81 [Vue.js] compositionAPI에서 watch사용법 📌1. Composiotion API의 감시자 Vue.js에서 'watch'는 특정 데이터의 변화를 감지해서 원하는 코드를 실행해주는 기능입니다. 주로 API 호출, 데이터 유효성 검사 등 특정 데이터가 변경되자마자 어떠한 작업을 수행하려는 경우에 유용하게 사용됩니다. Vue3의 CompositonAPI에서는 감시자로 watch와 watchEffect를 사용할 수 있는데요, 이번 글에서는 watch()함수의 사용법을 하나씩 알아보도록 하겠습니다. 📌 2. watch 사용법 watch(source, (newValue, oldValue) => { ........ }); 1) 첫번째 인자: 감시하려는 소스 ① ref - ref를 사용하는 반응형 데이터 ② reactive - reactive의 getter함수를.. 2024. 4. 21. [Vue.js] compositionAPI에서 computed 사용법 📌1. Computed 속성이란? Computed 속성은 간단한 계산을 수행해주는 반응형 속성을 의미합니다. computed를 사용하면 데이터가 변경될 때마다 자동으로 업데이트 해주기 때문에 동적으로 변하는 데이터를 효율적으로 처리할 수 있습니다😉 또한, computed 속성은 데이터가 변경되지 않는 한, 한번 계산된 값을 들고있다가 필요할 때마다 재사용합니다. 이는 불필요한 계산을 방지해서 성능을 향상시켜 줍니다. 📌 2. Composition API에서 computed를 사용하기 Composition API에서도 계산된 속성과 동일한 기능을 computed 함수를 이용해서 작성할 수 있습니다. computed 속성은 함수로 정의되지만, 속성처럼 접근할 수있어서 계산된 값을 쉽게 가져올 수 있습니다. .. 2024. 4. 20. [Vue.js] 반응성(reactivity)를 가진 상태 데이터 만들기 📌1. Compositoin API에서 ref, reactive를 사용하는 이유? Vue.js Composition API에서는 Options API와 달리 반응 상태 데이터를 수동으로 생성해야 합니다. Options API에서는 data옵션에 선언된 데이터들을 Vue가 자동으로 반응형으로 만들어줍니다. 자동으로 반응성이 주입되기때문에 프로세스가 단순해 진다는 장점이 있지만, 복잡한 구성요소 논리를 처리할때는 제한이 생길 수도 있습니다. Composition API는 이러한 단점을 극복하고 효과적으로 상태를 관리하기위해 반응성을 명시하도록 바뀌었는데요. ref 또는 reactive를 사용하여 상태 데이터를 명시적으로 선택할 수 있게되었습니다. 반응성을 직접관리해야해서 사전 작업이 조금 더 필요할 수 있지.. 2024. 4. 19. [javascript] 변수명, 함수명 잘 짓는 법 📌1. 변수명을 잘 지어야하는 이유? 1. 가독성 및 이해성: 변수와 함수를 의미있는 이름으로 지으면 목적과 사용법이 한 눈에 보이기때문에 코드를 빠르게 파악하고 이해하기가 쉽습니다. 2. 유지보수성: 변수와 함수의 이름이 명확하지 않은 경우, 유지보수하는 개발자는 코드를 이해하는데 더 많은 시간을 쏟아야하기때문에 버그를 수정하고 기능을 추가하는데 불필요한 에너지가 소모됩니다. 3. 문서화: 명확하고 설명적인 이름은 이름만으로도 코드의 의도를 전달합니다. 이렇게 하면 과도한 주석의 필요성이 줄어들고 시간이 지남에 따라 코드가 발전하더라도 코드가 정확하게 유지됩니다. 4. 디버깅: 예상치 못한 동작이나 오류가 발생할 경우, 의미있는 이름은 개발자가 문제의 원인을 신속하게 식별하고 추적하는데 단서를 제공하여.. 2024. 4. 16. 이전 1 2 3 4 ··· 21 다음
