Vue3 반응형 상태 ref, reactive 이란? 어떤 것을 사용해야할까?

Vue2 에서는 data 옵션을 이용해서 데이터 바인딩을 하였습니다. export default { data() { return { name: '파워쿠의 블로그', address: 'https://powerku.tistory.com/' } } } Vue3 에서 Composition API 개념이 추가하면서 ref, reactive라는 개념이 추가 되었습니다. ref 란? ref는 반응형 값을 생성해서, 값이 업데이트가 되면 Vue에서 반응을 해서 DOM을 업데이트 합니다. 값은 문자, 숫자, 불리언, 객체 등 어떠한 값도 다 넣을 수 있습니다. 값을 변경하기 위해서는 .value를 이용해서 변경합니다. template에서는 .value 없이 사용할 수 있습니다. const name = ref('super..

• format_list_bulleted Develop/Vue
• · 2023. 8. 10.
• textsms

타입스크립트 장점? 언제 사용하면 좋을까?

타입스크립트란? 자바스크립트의 Superset(확대 집합)입니다. 자바스크립트의 장점과 새로운 기능들이 추가되었습니다. 타입스크립트는 파일을 컴파일해서 자바스크립트 코드로 만듭니다. 컴파일하는 과정에 새로운 구문과 더 나은 방법을 활용할 수 있게 합니다. 타입스크립트의 경우에 C언어, Java와 같은 정적 타입 언어와 Javascript의 동적 타입 언어의 장점을 모두 가지고 있습니다. 모든 변수에 타입을 지정하지 않아도 되지 않고, 필요한 곳에서만 타입을 지정하면 되는 점진적 타입 언어 입니다. 타입스크립트 장점 브라우저 런타임이 아니라 컴파일 시점에서 오류 파악 가능합니다. 자바스크립트 코드에서는 아래와 같이 예측하지 못한 버그가 발생할 수 있습니다. function add(num1, num2) { ..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 8.
• textsms

Vue3 Composition API는 무엇을 해결 해줄까? OptionsAPI 단점

Vue3에서 가장 중요한 개념인 Composition API 가 새로 추가되었습니다. Vue2에서는Options API 방식을 이용해서 스크립트를 구성하였습니다. 하지만, Options API에 단점과 한계가 있어서 새로운 개념이 도입되었습니다. 기존과 완전히 다른 방법은 아니고, 템플릿과 스타일링은 기존과 동일하고 스크립트를 구성하는 방법이 조금 달라졌습니다. 물론, 기존 Options API 방법도 Vue3에서 사용이 가능합니다. Options API 방식 Options API의 단점 1. Options 속성에 따라서 로직이 분리가 됩니다. data, method, computed 등 다양한 Options 속성이 있습니다. 컴포넌트 내에는 다양한 기능들이 있지만, 기능들로 분리되지 않고 해당 옵션으로..

• format_list_bulleted Develop/Vue
• · 2023. 8. 5.
• textsms

판교 신도시 이름 어원 뜻 봇들마을 백현마을

판교 신도시는 성남시 분당구에 위치한 2기 신도시입니다. 대한민국에 많은 기업들이 판교에 위치하고 있고, 약 8만 명 이상의 사람들이 거주하고 있습니다. 판교에는 봇들마을, 백현마을, 산운 마을 등 예쁜 이름을 가진 동네이름들이 많습니다. 그 이름들이 어디서 유래됐고 무슨 뜻인지 궁금해서 한번 찾아보았습니다. 해당 이름들은 우리 고유의 명칭을 최대한 살리려고 판교 원주민들을 모아서 해당 지역이름을 유래를 정리하는 작업을 하였다고 합니다. 판교 뜻 널빤지로 만든 다리라는 뜻으로, 강가에 널빤지로 만든 다리를 의미하고 지명으로도 많이 쓰입니다. 판교 테크노밸리 옆으로 봇들마을과 백현마을이 주거지로 있습니다. 봇들 마을 뜻 신라시대에 화랑이 이 지역에 저수시설 보를 만들었는데, 주민들이 물을 끌어다 쓰게 된 ..

• format_list_bulleted 일상/이야기
• · 2023. 8. 2.
• textsms

Vue Props 양방향 바인딩 하는 방법 sync, v-model

Vue에서 자식 컴포넌트에게 데이터를 전달할때, props 속성을 사용합니다. Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기 Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit을 powerku.tistory.com 프로그램을 개발하다 보면 자식에게 전달한 데이터를 변경하고 싶을 때가 발생하는데요. 자식 컴포넌트에서 props를 직정 변경하게 되면 오류가 발생합니다. Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg' props로 전달한 데이터를 변경하는 방법에 대하여 Vu..

• format_list_bulleted Develop/Vue
• · 2023. 7. 31.
• textsms

Nuxt asyncData / fetch 설명 차이점 무엇을 사용하는 것이 좋을까?

Nuxt에서 데이터를 가져오는 방법이 두 가지 있습니다. asyncData fetch Nuxt에서 클라이언트 사이드 방식이 mounted()를 통해서 데이터를 호출할 수는 방식을 지원하긴 합니다. 하지만 서버 측에서 데이터를 렌더링 하는 앱을 만들기 위해서는 위 두 가지 훅을 사용해야 합니다. asyncData 페이지 내에서만 사용 가능 비동기적으로 생성되는 데이터일 때 사용 생성한 데이터는 data()로 생성한 데이터와 병합 data()와 차이 없음 단지 동기 / 비동기 차이 this 사용 불가능 async asyncData({ params }) { const response = await fetch(`https://api.example.com/data/${params.id}`); const data ..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 24.
• textsms

대한민국 해양 방사능 안전 정보 지도

대한민국 해양 방사능 안전 정보 save-sea-fe.pages.dev 최근 일본의 후쿠시마 원전 오염수 방류에 관련해서 뉴스가 많이 나오고 있습니다. 오염수 방류에 대해서도 찬반 의견이 많습니다. 그래서 저도 관심을 가지고 보고 있는 중에 해양수산부에서 제공하는 대한민국 해양 방사능 안전 정보가 데이터가 있어서 지도로 만들어서 표시하였습니다. 해양수산부에서 가까운 바다와 먼바다에 대해서 방사능 물질에 대한 검사를 주기적으로 진행하고 있습니다. 삼중수소와 세슘 137과 같은 방사성 물질과 측정 수치 수준을 나타내는 자료를 Open API를 통해서 제공하고 있습니다. 현재 2023년 4월 조사된 데이터까지 제공하고 있습니다. 해당 방사성 물질의 수치가 있으면 좋겠는데 수치는 제공하지 않고, 상태만 나타나는..

• format_list_bulleted Develop/Made by powerku
• · 2023. 7. 13.
• textsms

v-if 와 v-show 성능 차이점

Vue에서 v-if와 v-show 디렉티브가 있습니다. 디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다. v-if v-show 공통점 두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다. 차이점 v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다. v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다. 성능 차이 v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다. 반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다. 무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다..

• format_list_bulleted Develop/Vue
• · 2023. 7. 10.
• textsms

Nuxt modules / buildModules 란? 사용법

Nuxt 에서 modules와 buildModules 속성이 있습니다. modules Nuxt에서 모든 기능을 제공하면 매우 복잡하고 어려워서, 사용자가 프로젝트별로 모듈을 추가 할 수 있습니다. modules에서 정의한 모듈은 Nuxt가 부팅될때 순차적으로 실행이 됩니다. nuxt.config.js 에서 modules 옵션을 설정할 수 있습니다. export default defineNuxtConfig({ modules: [ // Simple usage '@nuxtjs/eslint-module', // With options ['@nuxtjs/eslint-module', { /* module options */ }] ] }) buildModules nuxt v2.9 이후로 buildModules 속성이..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 6.
• textsms

경상도 사람들이 자유 한국당을 지지하는 이유

최근 친구들과 술자리 중에 이런 질문을 받은 적이 있습니다. 왜 경상도 사람들은 자유 한국당을 지지하냐? 이번 20대 대통령 선거에서도 경상도 모든 지역에서 윤석열 대통령을 득표율이 높았습니다. 부산 더불어민주당이재명38.15% 국민의힘윤석열58.25% 정의당심상정2.18% 대구 더불어민주당이재명21.60% 국민의힘윤석열75.14% 정의당심상정1.94% 울산 더불어민주당이재명40.79% 국민의힘윤석열54.41% 정의당심상정2.92% 경북 더불어민주당이재명23.80% 국민의힘윤석열72.76% 정의당심상정1.88% 경남 더불어민주당이재명37.38% 국민의힘윤석열58.24% 정의당심상정2.47% 실제로 부산에서 나이 드신 분들은 자유 한국당을 많이 지지하고 있습니다. 또 이런 이야기를 종종 듣고는 합니다. O..

• format_list_bulleted 일상/이야기
• · 2023. 7. 5.
• textsms