매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 어느 데이터 타입에서 다른 데이터 타입으로 변환을 쉽게 해주는 것을 유틸리티 타입이라고 한다. 타입 스크립트에는 Partial이 외에 몇 가지 유틸리티 타입을 제공하고 있다. Partial타입 Partial 타입은 오브젝트를 변환하는 타입 중 하나로 Partial 형태로 사용하며 T의 모든 속성을 옵셔널 타입으로 만들어준다. type Human1 = Partial const human1_1: Human1 = { name: "nao", age: 18 } const human1_2: Human1 = { name: "nao" } Human1에는 옵셔널 속성을 선언하기 위한 "?"가..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 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(컴포넌트)와 로직을 분리하게 되므로 하나의 파일에 작성된 코드 양이 많아지지 않도록 조절할 수 있다는 것도 이점이다. 커스텀..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주세요. 이 포스트에서는 자신의 프로젝트에 맞게 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의 작성법 아래와 같이 컴포넌트로 감싸서 내부의 내에 비동기 컴포넌트를 내에, 그 비동기 컴포넌트가 해결 될 때까지에 나타낼 것 (폴 백 컨텐츠)을 기재한다. 이러한 작성으로, 간략하게 비동기 컴포넌트의 처리가 해결 될 때 까지의 폴 백 컨텐츠를 구현할 수 있다. 이 코드는 의 비..