하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

강아지일기

[내돈내산] 산타마리아 노벨라 드라이 샴푸(쉬우미 데테르젠떼) 반려동물 강아지

반려동물 강아지 드라이 샴푸 산타마리아 노벨라 드라이 샴푸 실사용 리뷰 작성해볼게요 우선 내돈내산입니다 리뷰를 작성하기전에 이 샴푸를 사용할 제 동생을 소개하겠니다 잘 나온 사진이 없네요 미용 후라서 기분이 좋지 않다고 합니다 이름은 빈희 나이는 5살 믹스견 여아 중성화 수술 병력은 방광염, 요로결석, 귓병, 피부병 산타마리아 노벨라 드라이 샴푸 자 이제 리뷰를 진행해볼게요 예전 아마 코로나 터지기 1년전에 유럽여행으로 피렌체 갔을때 산타마리아 노벨라를 방문하다가 구매했습니다. 금액은 생각이 나질 않습니다 국내에서 찾아보니 3만원대 같습니다! 산타마리아 노벨라는 이탈리아 천연향수로 유명하다고 합니다! 우선 제품사진을 한번 볼게요 뚜껑은 어디로 사라졌는지 보이지가 않네요..ㅠ 뚜껑도 있던 제품입니다 산타마..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#5. 유저 로그아웃)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#4. 유저 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 5(Teleport)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Teleport Teleport Vue 컴포넌트 설계는 비지니스 로직 계층과 표현 계층으로 구축할 수 있다. 그러나 때때로 특정한 위치에 html 렌더링을 시켜야 되는 컴포넌트가 있을 수가 있다. 예를 들면, absolute, fixed, z-index를 활용하믄 모달 팝업, 태그앞에 와야 되는 경우 Vue 애플리케이션 페이지에서 작은 부분(또는 widget)에서 실행 될때, Vue app밖에 있는 DOM으로 이동하고 싶은 경우 해결 Teleport 컴포넌트를 사용해보자. Portal이라고 불렸으나 Teleport..

개발일기/Vue.js

Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Sharing State Suspense Sharing State API 호출 작업을 할때, 로딩 상태, 에러 상태, try/catch구문을 사용한다. Composition API에서 사용하는 법을 살펴보자. 아래는 이전 포스팅에 연장인 예제 코드이다. /src/App.js Search for Loading: {{ loading }} Error: {{ error }} Number of events: {{ results }} Sharing State Composition API 위에 살펴본 API 호출 로직(결과, ..

개발일기/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) } ..