매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue에서 리액티브한 데이터의 변경을 검지하여 어떠한 처리를 하고 싶을 때, computed나 watch, 혹은 watchEffect이라는 Composition API에서 제공하고 있는 편리한 기능을 이용할 수 있다. 그러나 "computed와 watch, 어느쪽을 써야 좋을까?"라던가, "watch랑 watchEffect의 경우는?"과 같이 망설이게 되는 순간이 온다. 이럴 때를 위해 어떤 것을 쓰는 것이 좋은지에 대해 조사한 내용을 이번 포스트를 통해 정리하고자한다. 작성법 각각의 기본 사용법에 대해서 살펴보자. computed 2배의 금액：{{priceDoubleValue..

※ 일본의 한 블로그 글을 번역한 포스터입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트의 대상 독자는 다음과 같다. Vue3의 상태 관리에 대해서 알고 싶은 분 Vue3의 작성법에 대해서 알고 싶은 분 실무에서 사용할 것같으니, 당장 습득할 필요가 있는 분 만들고자 하는 어플리케이션 이미지 이번에는 버튼을 누르면 숫자가 올라가거나 내려가는 어플리케이션을 만들고자한다. Vuex를 이용한 경우와 비교하면 꽤 알기 쉬울 것이다. Vuex를 이용하는 경우 다음과 같이 구성하게 될 것이다. store/index.ts state오브젝트안에 초기값을 설정한다. count: 0 mutation 오브젝트안에는 이와 같이 count 업과 다운 메소드를 준비한다. inc..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 커스텀 훅이란? 커스텀 훅은 여러 개의 컴포넌트 내에서 존재하는 공통 처리를 빼내어 만든 함수이다. 범용적인 커스텀 훅을 만들면 1개의 어플리케이션 내에서 재이용할 수 있을 뿐만 아니라 React, Next.js, Remix를 제약없이 다른 어플리케이션에서도 재이용할 수 있다는 장점이 있다. 커스텀 훅에는 범용적인 커스텀 훅을 모아둔 Rooks이라는 사이트가 있는데, 자체 제작하지 않고 다른 사람이 만들어 놓은 커스텀 훅을 이용할 수 있다. 또한 View(컴포넌트)와 로직을 분리하게 되므로 하나의 파일에 작성된 코드 양이 많아지지 않도록 조절할 수 있다는 것도 이점이다. 커스텀..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용이 있다면 지적해주시면 감사하겠습니다. 꽤 이전에 Vue2와 Vue3의 차이점에 대해서 다룬적이 있는데, 조금 더 상세하게 다룬 글을 발견하여 공유하고자 한다. 대상 독자 Vue2를 Vue3로 버전업을 하는 중 혹은 버전업을 검토하고 있는 사람 Vue를 다루지만, 교양으로 Vue3를 캐치업하고 싶은 사람 Vue2의 기능, 주의점을 보통 프론트엔드를 만지지 않는 멤버에게 설명하고 싶은 사람 새롭게 서포트된 API와 구문 CSS v-bind CSS의 속성에 대해서 리액티브한 값의 바인딩이 가능하게 됐다. 내부적으로는 CSS 변수의 값을 리액티브 변경하는 것으로 값을 바꿔준다. 참고로 Vue2.7버전에서도 이용할 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Composition API이란? Composition API는 2020년 9월 18일에 정식으로 릴리즈된 Vue3에 추가된 핵심기능이다. Composition API는 컴포넌트를 구축하기 위한 새로운 방법이며, Vue가 다음의 문제를 해결하기 위해 제안한 것이다. TypeScript의 서포트 로직 재이용이 어려운 문제 어플리케이션이 커지면 코드의 파악이 어려워지는 문제 컴포넌트의 예 먼저는 Composition API로 작성된 컴포넌트 전체 코드를 살펴보자. // MyTodo.vue // TodoList.vue {{ todo.title }} {{ date }} 削除 // ad..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으면 틀린 내용은 지적해주세요. Vue.js에서는 CSS를 이용할 때에 Scoped CSS나 CSS Modules, CSS-in-JS등의 방법을 사용할 수 있니다. 어쨌든 Scoped CSS는 가볍게 이용할 수 있으므로, 이용할 기회가 많이 생길거라고 생각한다. Scoped CSS가 있다면 CSS설계를 사용하지 않아도 된다는 의견도 있지만, 실제로 그럴까? 이 포스트를 통해서 우리가 생각한 방법에 대해서 소개하도록 하겠다. 참고로, 여기 나와있는 예시들은 Vue.js의 SFC(싱글 파일 컴포넌트)로 Scoped CSS를 이용하고 있는 것을 상정하고 쓰여졌다. CSS 설계란? 기본적으로 CSS는 항상 모든 페이지에서 읽어들여..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주세요. 이 포스트에서는 자신의 프로젝트에 맞게 mixin을 만들 수 있는 최소한의 지식에 대해 설명하고자한다. mixin이란? 속성이나 값을 세팅하여 정리할 수 있는 기능이다. @mixin mixin명 { 속성: 값; } @mixin mixin명으로 {}내에 정리하고 싶은 속성과 값을 기재한다. 이것으로 아이템화된다. 정리된 mixin은 @include mixin명으로 기재하면 호출할 수 있다. @mixin p-center { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); } div { @include p-ce..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며, 틀린 내용은 지적해주시면 감사하겠습니다. Vue에서 대표적인 밸리데이션 워크 프레임으로 말하자면 VeeValidate가 있다. VeeValidate는 기능이 많고 사용하기 쉬운 프레임워크이지만, Vue2계에 대응하는 v3와 Vue3계에 대응하는 v4는 완전 다른 것이라고 이야기될 정도로 사용방법이 많이 바꼈다. 이번에는 이러한 VeeValidate v4의 사용 방법에 대해서 정리하고자한다. VeeValidate의 사용 스타일 VeeValidate(v4)의 사용을 하기 위해는 아래의 두 개의 구현 스타일이 존재한다. Composition API Higher-order components(HOC) 첫 번째의 Compo..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Suspense이란? 비동기 처리가 해결되기까지 폴 백 컨텐츠 (예를 들어 Loading중 아이콘)을 표시해주는 특별한 컴포넌트이다. 지금까지는 v-if = "loading === true" 등의 상태 변수를 사용하여 제어한 것을 상태 변수를 사용하지 않고 간략하게 쓸 수 있게 해준다. Suspense의 작성법 아래와 같이 컴포넌트로 감싸서 내부의 내에 비동기 컴포넌트를 내에, 그 비동기 컴포넌트가 해결 될 때까지에 나타낼 것 (폴 백 컨텐츠)을 기재한다. 이러한 작성으로, 간략하게 비동기 컴포넌트의 처리가 해결 될 때 까지의 폴 백 컨텐츠를 구현할 수 있다. 이 코드는 의 비..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 예외의 사고방식 근원 예외또란 무엇인가? 보통 이것을 에러이며 무언가 제대로 되지 않았을 때에 알려주는 것(에러가 아닌 예외도 있지만, 현 시점에서는 이 부분은 신경쓰지 않도록 하자) 역할을 한다. 일부의 프로그래밍 언어는 에러를 반환값으로 반환하는 것을 장려하고 있으며, 당신은 반환 값을 확인한다. Python 경우 예외의 사용을 장려하고 있는 언어이며, 이러한 처리에 대해 고려할 필요가 있다. 예외는 반드시 프로그램의 충돌을 일으키는 것은 아니다. 예외는 처리할 수 있다. 예외의 원인인이 완전히 코드 버그(존재하지 않는 변수에 접근하는 등)일 수도 있지만 예외의 발생을 예..