하수도키의 성장일기

책일기

[북리뷰] 러닝 리액트 2판

최근 프론트엔드 개발자로 일하면서 React는 빠질 수 없는 존재다. 페이스북에서 사용하고 있어 Vue 보다 더 점유율이 높고 React-navtive까지 지원하니 많은 사람들이 관심을 갖고 공부를 하고 있다. 그중에 나도 한 명인데 관심만 갖고 공부를 하지 않고 있는 상태였다. 책 사고 스터디하고 강의 결제하고 딱 여기까지 보고 공부하고 듣지를 않는다. 이번에 한빛에서 지원받은 책이 러닝리액트 2판(Learning React)라서 타이밍 좋게 집중하고 힘들게 책을 읽어봤다. O'REILLY 출판사에서 나온 책답게 표지 동물은 멧돼지이다. 아주아주 무섭다. 쓰다 보니 러닝 리액트 1판도 예전에 구매했던 기억이 생각났다. 1판(2018년)에서는 리덕스(redux)에 대한 내용을 다뤘다면 2판에서는 훅스(h..

개발일기/Javascript

[Javascript] URL페이지를 Location, Redirect, Reload 통해 살펴보자.

Javascript를 통해 URL 페이지를 관리할 때 loaction.load, location.href 등을 많이 사용했다. 사용할 때마다, 자연스럽게 손에 익어 타자를 치고 실행을 했지만 정확하게 살펴본 적이 없었다. 운 좋게 미디엄 포스팅에서 관련 내용이 있어서 한번 의역 위주로 번역해보았다. 원문은 아래 링크를 참고 https://betterprogramming.pub/redirect-refresh-and-access-the-url-of-the-current-page-in-javascript-3d9160e8317e Redirect, Refresh, and Access the URL of the Current Page in JavaScript JavaScript’s location object be..

책일기

[북리뷰] 한 권으로 끝내는 Node & Express(2판)

한 권으로 끝내는 Node & Express 소개 초판이 아니고 2판이다. 개정판으로 생각하면 된다. Express 4.0을 바탕으로 알려준다.(현재는 Express 5.0 alpha가 나온 상태) 안정성을 인정받은 최선 버전으로 진행된다. 아래부터는 책 내용을 인용했다. 대상 독자는 자바스크립트와 노드, 익스프레스로 웹 애플리케이션을 만들고자 하는 프로그래머를 위한 책이다. 2판에서 달라진 점은 API와 정적 자원의 서버로 익스프레스를 사용하는 법을 설명하고, SPA 예제도 수록해 진화한 노드와 익스프레스를 체험할 수 있도록 개정했다. 책의 뒷편을 참고하면 자바스크립트 개발 스택의 핵심인 노드와 익스프레스로 동적 웹 애플리케이션을 만들어보세요. 이 책은 웹 사이트 개발 과정을 살펴보며 익스프레스 기본..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #1 - Transition

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition(이번 포스팅) Page Transition Transition Group Javascript Hooks + Velocity GSAP Transition(트랜지션) Vue에서 Transition 래퍼(Wrapper) 컴포넌트를 기본으로 제공하고 있다. 이 Transition 컴포넌트를 이용해 다양한 애니메이션 효과를 낼 수 있다. Transition은 번역하자면 전환이다. 말 그대로 from → to로 되는 것이 전환이다. 전활 될 때 애니메이션을 ..

개발일기/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] 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

[Javascript] replace를 이용해 문자열을 치환하는 방법(How to replace a string in javascript)

JS - replace(regx) 오늘 포스팅할 주제는 자바스크립트를 이용해 문자열을 치환하는 방법이다.(How to replace a string in javascript) 우리는 코드를 작성하면서 일괄 수정할때 보통 CTRL + F로 찾은 다음 바꾸기를 하거나 일괄적으로 한번에 원하는 단어를 치환한다. 에디터에서 하는 기능을 자바스크립트에서는 어떻게 구현하는지 알아보자. replace 를 한국어로 치환한다고 정의해서 포스팅 글을 쓰겠다. 목차 1. replace 알아보기 2. replace 활용하기 전체 문자열 모두 치환하기 대소문자 구분하여 치환하기 전체 문자열 대소문자 구분없이 치환하기 replace 알아보기 replace 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#2)

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#2) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 프로토타입이 조합된 자바스크립트 클래스를 살펴볼 예정이다. get과 set으로 인터페이스를 단순하게 만들어라. 제너레이터로 이터러블 속성을 생성하라 bind()로 문맥 문제를 해결하라 get과 set으로 인터페이스를 단순하게 만들어라. 이전 tip에서 클래스에 기본을 알아 보았다. 인스턴스 생성 속성과 메서드 호출 부모 클래스 확장(쌍속) 이번 tip에서는 get, set를 통해 비공개 속성처럼 사용해보기 클래스는 아래 코드처럼 속성에 접근하여 변경도 가능하다. 같이 협업하는 개..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#1)

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#1) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 프로토타입이 조합된 자바스크립트 클래스를 살펴볼 예정이다. 읽기 쉬운 클래스를 만들어라 상속으로 메서드를 공유하라 클래스로 기존의 프로토타입을 확장하라 읽기 쉬운 클래스를 만들어라(TIP37) 자바스크립트에서 클래스를 작성하는 방법을 살펴보자. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || "2주"; } } const coupon = new Coup..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라)

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 이 장에서는 함수의 사용법을 다룰 예정이며, 기본기는 다루지 않을 예정이다. 테스트 가능한 코드 작성법 화살표 함수의 매개변수에 대한 개념 함수를 반환하는 고차함수와 재사용 가능한 함수 화살표 함수의 문맥 개념 테스트하기 쉬운 함수를 작성하라(TIP32) 테스트를 작성하면 코드를 쉽게 리팩토링 가능 오래된 코드를 쉽게 이해 가능 마지막으로 명확하고 버그가 적은 코드를 작성 가능 위와 같은 장점들이 있지만 현실을 테스트를 작성하는것 쉽지 않다.(테스트 작성의 어려움, 코드가 외부 의존성이 강하게 결합..

개발일기/Web

JavaScript에서 Local Storage를 사용하는 방법

JavaScript에서 Local Storage를 사용하는 방법 원글(https://tania.dev/how-to-use-local-storage-with-javascript)을 번역/의역했습니다. 서론 일반 JavaScript를 사용하여 간단하고 새로운 탭 페이지 응용 프로그램을 만들어 브라우저의 내장 웹 스토리지를 사용하는 방법에 대해 알아보자. 저는 작은 응용 프로그램을 처음부터 순수한 JavaScript로 완전히 구축하는 튜토리얼을 만드는 것을 좋아한다. todolist은 일반적인 앱 아이디어이지만, 할 일을 저장할 데이터베이스가 없으면 그다지 유용하지 않으며, 이는 초보자 영역을 넘어서는 복잡성을 가중시킨다. 이것은 실제로 빠른 메모를 하는데 유용할 수 있다. 브라우저에서 앱을 새 탭페이지로 설..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 6 - 매개변수와 return 문을 정리하라)

자바스크립트 코딩의 기술(시리즈 6 - 매개변수와 return 문을 정리하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 함수 인수를 변경하는 계획을 세워보고, 간결하면서 유연성을 제공하는 매개변수를 생성하는 방법을 알아보자. 예를 들면, 함수는 인수 2개를 받고 있었는데 갑자기 받을 인자가 늘어 6개의 인자를 받게 될 경우 대처하는 방법 등을 살펴보자. 매개변수 기본값을 생성하라(TIP28) 이번 팁에서 매개변수가 채워져 있지 않을 때 매개변수 기본값으로 값을 설정하는 방법을 알아보자. 파운드(pound)를 킬로그램(kilogram)으로 변환하는 코드를 보면서 알아보자. pound를 2.2로 나눠야 k..