하수도키의 성장일기

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Modularizing(모듈) Lifecycle Hooks(라이프사이클 훅) Watch Modularizing(모듈) Composition API 사용하는 이유는 기능별로 구분, 코드 재활용이다. 모듈을 통해 구현해보자. 현재 코드는 아래와 같다. ... 컴포지션 함수로 빼기(Extracting into a Composition Function) ... useEventSapce() 함수를 exrpot default {} 외부에 작성하고 분리했다. 그 함수를 setup() 내부에서 사용한다. 이제 컴포지션 함수를 파..

먹는일기

스타벅스 리틀 위치 할로윈 라떼 후기

스타벅스 할로윈 프로모션이 나왔습니다 2020년도 할로윈은 10월 31일이라도 합니다음료말고 케익, 마카롱, 캔디 등도 팔고 있습니다음료 가격대는 6000원대입니다 아이스 리틀 위치 할로윈 라떼를 골랐습니다사악한 흑임자를 보고 다른 음료 설명도 보지 않고 바로 시켰습니다 미숫가루 이런거 좋아합니다단백질 7g을 챙겨봅시다 알레르기 있으신분들 한번 더 체크해주세요 마녀 모자 모양의 초콜릿, 녹차 크림, 흑임자 라떼 조합이 아주 제 취향에 쏙입니다 달달한게 맛이 아주 좋네요 흑임자, 녹차가 들어가서 더 건강식 느낌나서 죄책감이 덜하네요! 다음에 스타벅스 방문하시면 한번 드셔보세요!

먹는일기

머슬팜 컴뱃 100% 웨이 프로틴 초콜렛(단백질 보충제)

2020년 되면서 새해 다짐으로 건강하게 살기라고 개인프로젝트를 진행중에 있습니다 현재 프로젝트는 실패할 확률이 크네요ㅠㅠ 프로젝트는 운동과 식단 위주로 계획을 세웠습니다 이 포스팅은 식단에 관련된 단백질 보충제에 대해 써보겠습니다. 제가 구매한건 제목에서 봤듯이 머슬팜 컴뱃 100% 초콜렛입니다 찾아보니 마이프로틴, 신타6, 컴뱃, 옵티멈등이 자주 보였는데 그중에서 컴뱃을 선택했습니다! 한스쿱에 단백질 25g을 제공해준다고 하는군요 하루권장량의 반이라고 수치상 표기됐네요 전 건강 프로젝트라서 몸무게에 비례해서 1kg당 단백질 1g를 목표로 섭취했으나 실패했습니다 힘들더라고요 ㅜㅠ 이제 한번 맛을 보겠습니다 츄릅 우유랑 전 섞어먹었습니다 우유는 약 270ml정도 입니다 너무 맛있어서 흔들자마자 먹어버려서..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Vue2 한계 Setup & Reactive References Methods Computed Properties The Reactive Syntax Vue2 한계 컴포넌트가 커지면 커질수록 가독성이 떨어짐 예를 들면, 검색어를 입력하고 해당 검색어로 찾은 정렬된 결과를 보여주는 컴포넌트를 살펴보자. // Vue2 export default { data() { return { 검색어 로직(Search) 결과 정렬(Sorting) } }, methods: { 검색어 로직(Search) 결과 정렬(Sorting) } ..