매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. https://www.youtube.com/watch?v=6D58SI9P-aU&t=1237s 영상의 내용을 번역했다. ref() vs reactive() ref()와 reactive() 중 어느 쪽을 쓰는 것이 좋을까? Composition API를 이용한 라이브러리의 코드를 집계한 결과는 다음과 같다. 거의 ref()를 사용하고 있다는 것을 알 수 있다. 생각할 수 있는 주된 이유는 "일관성(consistency)"일 것이다. reactive에는 제한이 있지만 ref는 어디에서 사용할 수 있으며 대부분의 개발자들은 일관성을 중시하기 때문에 ref를 선택하는 경우가 많다고 예..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 지금까지 알게 된 사소하고 자잘한 TypeScript관련 테크닉을 모은 포스트이다. 자신이 정의한 타입에 대해 타입 가드하기 유저 정의 타입 가드에 대해서 TypeScript에서는 typeof, instanceof, in등의 연산자를 이용하여 변수에 대해 타입 가드할 수 있지만, 이러한 연산자로는 자신이 정의한 타입을 가드할 수 없다. type Hoge = "hoge" | "fuga"; const attr = document.querySelector(".hoge")?.getAttribute("name") ?? ""; if (typeof attr === Hoge) { // NG..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 즉시 실행 함수란? 먼저 즉시 실행 함수의 기본부터 설명하도록하겠다. 즉시 실행 함수란 정의된 직후에 실행되는 함수를 의미한다. 보통의 함수와 다른 점은 이름을 가지지 않고, 바로 실행된다는 특징이 있다. 기본적으로는 다음과 같이 쓸 수 있다. (function() { console.log("이것은 즉시 실행함수입니다！"); })(); 이 코드에서는 함수가 정의된 직후, 콘솔에 메시지가 출력된다. 인수를 가진 즉시 실행 함수의 사용법 다음은 즉시 실행함수에 인수를 전달하는 방법에 대해서 소개하도록 하겠다. 인수를 전달하여 외부의 데이터를 함수 안에서 이용할 수 있게 된다. 그럼..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 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..