하수도키의 성장일기

책일기

[북리뷰] 리팩터링 2판

한빛미디어에서 를 통해 책을 지원받아 작성한 리뷰입니다. 책 소개 이 책은 현재 2판이고 초판에서는 자바스크립트 대신 자바 언어로 구성되어 있다. 물론 표지 디자인도 다르다. 예전에 초판을 사놓고 자바 언어로 되어 있어 읽지 않은 상태였다. 운 좋게 리뷰에 당첨되어 자바스크립트로 작성된 리팩터링 2판을 받았다. 부제인, 코드 구조를 체계적으로 개선하여 효율적인 리팩터링 구현하기 이게 전부인 책이다. 프로그래밍, 나한테는 자바스크립트를 하면서 클린코드, 리팩터링에 대한 이야기를 수도 없이 들어왔다. 그럼 리팩터링이란? 뭘까? 책에서 나온 그대로 쓰겠다. 리팩터링은 겉으로 드러나는 코드의 기능(겉보기 동작)은 바꾸지 않으면서 내부 구조를 개선하는 방식으로 소프트웨어 시스템을 수정하는 과정이다. 즉, 코드를 ..

후기일기

멋이 전부인 엑소볼트 마우스 실버 후기 - EXOvalut Mouse Silver

엑소볼트(EXOvalut) 마우스 실버를 드디어 받았다. 거의 2년인가 3년만에 받았다. 처음 1년은 기다리면 오겠지 1년이 지나고 2년지나니 .... 흠... 잊고 있었다. 그러다 메일에 갑자기 shipped 이라는 단어를 보고 부랴부랴 배송 대행지 신청하고 드디어 받았다. 엑소볼트는 처음 접하게 된 건 아이폰 케이스였다. 볼트로 조이고 알루미늄 재질로 되어 있고 튼튼하면서도 유니크하고 디자인이 무척 마음에 들었다. exovault.com/ EXOvault EXOvault makes unique accessories for your life, machined and finished by hand. We take the utmost care in crafting each Metal and Wood iPh..

개발일기/Vue.js

[Vue.js] Vue3 + TypeScript #6 마지막 커스텀 타입 정의하기(Type Assertion, data, props, computed, methods)

2021.03.05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 2021.03.11 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #5 - 커스텀 타입 정의(Defining Custom Types) 지난 포스팅에서 커스텀 타입을 정의하는 방법을 알아봤다. 이제는 커스텀 타입을 적용해 보자. 우선 데이터(data) 옵션을 살펴보자. event 객체를 참조하는데 만약 event.title 대신 event.description로 수정하면 코드를 실행하기 전까지 description의 값이 있는지 없는지 확인할 방법이 없다. VS Code를 사용하면 확장..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #5 - 커스텀 타입 정의(Defining Custom Types)

2021.03.11 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals) [Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals) 타입스크립트의 기본 개념 중 하나인 개발을 향상하는 데 사용하는 정적 타입 정의하는 방법을 살펴보자. 이번 포스팅에서는 타입스크립트에서 유용하고 자주 사용하는 일부 타입들을 살펴본 hasudoki.tistory.com 이전 포스팅 마지막에 보면 미리 정의 타입에 대한 아쉬운 점을 설명하면서 커스텀 타입에 대해 살펴봤다. 프로젝트가 커지고 요구사항이 많아질수록 커스텀 타입은 필수이다. 타입스크립트에서 커스텀 타입을 만드는 방법은 2가지이다. type,..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals)

타입스크립트의 기본 개념 중 하나인 개발을 향상하는 데 사용하는 정적 타입 정의하는 방법을 살펴보자. 이번 포스팅에서는 타입스크립트에서 유용하고 자주 사용하는 일부 타입들을 살펴본다. 2021.03.09 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript) [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript) 지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. Typ..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. TypeScript 컴포넌트 변화(TypeScript Changes in Single File Components) 개발 언어 속성(The Language Attribute) 싱글 파일 컴포넌트에서 script 태그에 보면 lang 속성이 추가되었다. 자바스크립트 사용할때는 없었는데 타입 스크립트 사용 시에는 명시를 해줘야 한다. 타입스크립트로 전환하기 위해서 해야 될 일 1. script 태그에 lang 속성 정의 2. 헬퍼 메서드(defineComponent) import 하기 3. 헬퍼 메서드(defineCompo..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

이번 포스팅에서는 Vue 3 + TypeScript 세팅하는 법과 기존 Vue 3 프로젝트에 TypeScript를 추가하는 법을 알아보자. 2021/03/05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn abo..

개발일기/Vue.js

[Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript)

2020.08.26 - [개발일기/TypeScript] - [TypeScript] 타입스크립트 시작하기 [TypeScript] 타입스크립트 시작하기 타입스크립트 시작하기 개요 타입스크립트는 새로운 언어보다는 자바스크립트의 상위집합(Superset)으로 이해하면 된다. 자바스크립트 파일을 .ts 를 바꿔도 경고만 나오고 실행은 된다. 타입스크 hasudoki.tistory.com 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn about the tradeoffs of using TypeScript in a Vue ..

개발일기/Javascript

[자바스크립트] 얕은 복사, 깊은 복사 간단히 살펴보기(Learn Deep & Shallow Copy with Tricky JavaScript Questions)

이 포스팅은 아래 포스팅을 보고 의역한 겁니다. 자세한 내용은 링크를 참고해주세요. javascript.plainenglish.io/learn-deep-shallow-copy-with-tricky-javascript-questions-c563cdb5a4dd 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)는 자바스크립트 책을 볼 때, 간간이 들려오는 질문들에 항상 포함되어 있다. 그때마다 구글링을 하거나 대충 기억을 더듬더듬 거리면서 이해하는 걸로 넘어갔다. 운 좋게 간단하고 이해하기 쉬운 포스팅이 있어 정리할 겸 포스팅을 작성해보겠다. 우선 아래 코드들을 보고 차이점을 살펴보자. const flower = [{ name: 'Lily', color: 'white' }] const clo..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#5(Multi root components)

이번 포스팅에서는 Multi-Root Components(멀티 루트 컴포넌트)를 살펴 보겠다. Vue2에서는 멀티 루트 컴포넌트랑 fragments를 사용할 수 없었고 사용하려면 라이브러리 같은 것을 불러와야 가능했다. Vue3에서는 라이브러리 사용 없이 멀티 루트 컴포넌트랑 fragments를 사용할 수 있다. 싱글 루트랑 멀티 루트 컴포넌트의 차이점과, 싱글 루트에서 멀티 루트로 변경하는 작업을 살펴보자. 멀티 루트 컴포넌트(Multi-Root Components in Vue) 지난 포스팅에서 사용했떤 BaseInput 컴포넌트를 이어서 사용한다.(여기 코드 참고 https://codesandbox.io/s/purple-sky-umvws?file=/src/components/BaseInput.vue)..

책일기

[북리뷰] 맛있는 디자인 프리미어 프로&애프터 이펙트 CC 2021

한빛미디어에서 를 통해 책을 지원받아 작성한 리뷰입니다.  책 소개 우선 책 재질이 너무 반가웠다. 대부분 개발 책 재질들은 흐물흐물하고 빽빽한 텍스트로 구성되어 있다. 따라서 집중을 하지 못한 상태에서 보게 될 경우 잠을 스르륵 찾아왔다. 하지만, 프리미어 프로 & 애프터 이펙트 CC 2021 책은 코팅이 된 재질로 흑백이 아닌 컬러로 되어 있다. 개발 책에 비해 보는 맛이 쏠쏠하다. 또한, 직접 화면을 보여줘야 되서 이미지가 삽입되어 직관적이면서 이해하기가 매우 쉬웠다. 그리고 한권에 2개의 프로그램 설명이 있어서 가성비로 아주 좋은 것 같다. 지은이도 5명으로 구성되어 있는 점이 특이했다. 각각 자신 있는 분야를 나눠 작업한 덕분인지 퀄리티가 좋은 것 같다. 책 내용 책은 총 2개의 파트로 나눠져..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) 2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기) 2021/01/31 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers) 이번 포스팅에서는 $attrs 가 vue3에서 어떻게 변했는지 살펴보자. vue2에서는 HTML attributes들만 포함했지만 vue3에서는 HTML attributes뿐 아니라 listeners, classes, styles까지 다 포함한다. 이러한 개념을 배우면서 부모에서 자식 컴포넌트로 e..