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

성공적으로 투자 하는 방법

다시 주식 시장이 불타고 있는 것 같습니다. 에코프로와 포스코 홀딩스가 엄청난 상승을 보이고 있네요. 1년새 10배 이상 상승한 모습이 보입니다. 이번 포스팅에서 성공적인 투자를 할 수 있는 방법에 대해서 3가지 작성해보려고 합니다. 1. 여유 자금 많은 전문가들이 부동산이나 주식 전망을 예측하지만, 실제 현상과 많이 틀리기도 합니다. 투자는 반드시 여유자금으로 해야합니다. 투자의 경우 심리적인 요소가 큽니다. 여유자금이 아닌 돈으로 투자를 하게 되서 손실이 나기 시작한다면, 마음이 조급해져서 쉽게 돈을 잃을 수 있습니다. 또 결혼을 준비하려고 하는 사람은 결혼을 미루게 되고, 가정이 있는 사람들은 가정 파괴의 주범이 될 수도 있습니다. 여유 자금으로 투자를 해야 심리적 안정을 얻을 수 있어서 투자에 성..

• format_list_bulleted 일상/재테크
• · 2023. 7. 26.
• textsms

랭킹닭컴 제품별 닭가슴살 성분표

닭가슴살 성분표 랭킹닭컴 제품 이름을 클릭하시면 랭킹닭컴 사이트로 이동합니다. 단백질 닭고기 비율 나트륨 칼로리 가격 (100g) 맛있닭 닭가슴살 스테이크 오리지널 20g 71.21% 390mg 165kcal 1790원 맛있닭 닭가슴살 스테이크 야채맛 14g 61.33% 350mg 140kcal 1790원 맛있닭 닭가슴살 스테이크 호박맛 18g 73% 230mg 165kcal 1790원 맛있닭 닭가슴살 스테이크 고추맛 17g 72% 380mg 155kcal 1790원 맛있닭 닭가슴살 스테이크 갈릭맛 16g 68.40% 360mg 165kcal 1790원 러브잇 슬라이스 닭가슴살 칠리맛 23g 89.5% 270mg 125kcal 1990원 러브잇 슬라이스 닭가슴살 마늘맛 21g 89.6% 270mg 110..

• format_list_bulleted 일상/리뷰
• · 2023. 7. 25.
• 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

투자와 투기 차이

최근 미국 주식도 애플, 테슬라, 마이크로 소프트 등등 다시 상승하였고, 국내 주식 또한 반도체, 2차 전지 분야 등이 또 많이 상승하였습니다. 최근 부동산도 다시 반등세를 다시 보이고 있긴 합니다. 많은 분들이 투자를 많이 하고 있는데, 투자와 투기의 차이에 대해서 알아보도록 하겠습니다. 투자(投資)란? 더 높은 수익을 얻기 위해서 자본을 이용해서 변동성이 높은 자산을 구매하는 행위를 투자라고 말합니다. 1. 이익을 얻기 위하여 어떤 일이나 사업에 자본을 대거나 시간이나 정성을 쏟음. 2. [경제 ] 이익을 얻기 위하여 주권, 채권 따위를 구입하는 데 자금을 돌리는 일. 3. [경제 ] 기업의 공장 기계, 원료ㆍ제품의 재고 따위의 자본재가 해마다 증가하는 부분. 투기(投機) 1. 기회를 틈타 큰 이익을..

• format_list_bulleted 일상/재테크
• · 2023. 7. 21.
• textsms

사회 초년생 때 반드시 해야 하는 재테크 기초

사회 초년생이 돼서 월급을 받기 시작하면 기분이 좋습니다. 취업을 준비하는 동안 용돈이나 아르바이트로 생활하였지만, 돈을 벌게 되고 매달 백만 원 이상 되는 돈이 고정적으로 통장에 들어오게 되면 평소 사고 싶은 것도 구매 할 수 있고 할 수 있는 것이 많아집니다. 첫 월급을 받게 되면 예상치 못한 과도한 지출로 첫 달부터 마이너스로 시작할 수 있습니다. 사회 초년생 때부터 좋은 습관을 만들어야 합니다. 좋은 현금흐름 시스템 만들기 현금 흐름 시스템을 잘 만들어야 합니다. 나에게 돈이 들어와서 나가는 시스템을 한 눈에 보고 파악할 수 있어야, 돈을 모으고 지출을 통제할 수 있습니다. 좋은 현금 흐름을 만들기 위해서는 어떻게 해야하는지 알아보도록 하겠습니다. 1. 급여통장 / 지출 통장 / 비상금 통장 만들..

• format_list_bulleted 일상/재테크
• · 2023. 7. 20.
• textsms