하수도키의 성장일기

책일기

[북리뷰] 모던 자바스크립트로 배우는 리액트 입문

오랜만에 책 리뷰로 돌아왔습니다. 이번 리뷰는 모던 자바스크립트로 배우는 리액트 입문입니다. 우선 저자가 일본인이다. 자케(오카다 다쿠미)!! 표지 일러스트부터 애니메이션 느낌이 나면서 딱딱한 일반 개발 서적과는 다른 느낌이다. 제목에도 입문이 들어가니 더 쉽고 가볍게 읽을 수 있는 느낌이다. 마지막으로 컬러북이다! 다른 책들과 마찬가지로 모던 자바스크립트(ES6)를 먼저 설명하고 그다음 리액트를 알려준다. 하지만, 다른 점은 표지에 있던 일러스트들의 인물들이 등장한다. 등장인물들이 회사에서 일어나는 에피소드를 바탕으로 공부하게 만든다. 만화책 읽듯이 쉽게 배울 수 있다. 여러 리액트책을 읽어봤지만, 이 책으로 시작한 다음 흥미를 느끼고 더 전문적인 책을 보는 것을 추천한다. 책에서 본 간단하고 이해하기..

책일기

[북리뷰] 모던 자바스크립트 핵심 가이드

자바스크립트 입문 책이 많이 존재한다. 매년 새로운 책들이 많이 나온다. 이 책도 그중 하나이다. 표지 오른쪽 하단에 씌여진대로 자바스크립트 기초부터, 타입스크립트, ES2021까지딱 이 부분만 보면 책이 최소 500 페이지 이상이겠구나 싶었다. 하지만, 밑에 핵심만 쏙쏙 이 부분이 포인트다. 총 300페이지도 되지 않는다. 자바스크립트 기초를 공부하는데 너무 두꺼운 책이 부담될 경우, 이 책을 여러 번 보면서 용어들과 친해지는 게 좋을 것 같다. 그리고 자바스크립트를 다시 한번 정리하고자 하는 사람들한테도 좋다. 설명과 코드를 보면서 부담없이 책을 읽을 수 있다. 그리고 각 장 마지막에 퀴즈를 풀면서 성과를 이룬 것 같은 느낌을 받게 한다. 덕분에 지루할 틈이 더 없는 것 같다. 한권 들고 다니면서 ..

개발일기/Javascript

[Javascript] 값과 변수(Values, Variables)

이번 포스팅에는 값(Value)과 변수(Variables)에 대한 차이점을 살펴보고, 원시 값과 참조 값에 데이터 할당되는 과정을 살펴보자. 원시 값과 참조값에 대한 설명은 이전 포스팅을 참조 2021.11.14 - [개발일기/Javascript] - [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) 자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크..

개발일기/Javascript

[Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value)

자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크게 2개의 챕터로 나눠서 포스팅을 진행하겠다. 기본적으로 값(Value)은 내 코드에서 사용할 순 있지만 내 코드에는 존재하지 않습니다. 이미지 참고 원시값(Primitive Value) String, Numbers, Undefined, Null, Boolean, Symbol로 이루어져 있다. 최근 BigInt도 추가되었다. Symbol, BigInt는 아직 많이 사용하진 않는다. 이 원시값들은 자바스크립트에서는 영구적인 부분이다. 즉, 가져다가 사용할 수 있지만 변경하거나 삭제할 순 없다 ..

개발일기/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 예제도 수록해 진화한 노드와 익스프레스를 체험할 수 있도록 개정했다. 책의 뒷편을 참고하면 자바스크립트 개발 스택의 핵심인 노드와 익스프레스로 동적 웹 애플리케이션을 만들어보세요. 이 책은 웹 사이트 개발 과정을 살펴보며 익스프레스 기본..

책일기

[북리뷰] 리팩터링 2판

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

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

개발일기/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 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로..

책일기

[북리뷰] 누구나 자료 구조와 알고리즘

1~2달전에 이 책을 읽었는데 이제 리뷰를 쓴다. 자료구조, 알고리즘 비전공자인 나에게는 너무 어려운 내용들이다. 어려운 이유 중 하나는 필요할때 벼락치기식으로 공부하고 그 뒤로는 머리속에 남아있질 않고 증발해버린다.ㅠㅠ 그래서 1일 1알고리즘풀기를 해봤지만, 문제 이해 안되는것들도 많고, 문제를 어떻게 풀어야 될지 모르는 경우(1~2일 고민해봤지만..)가 대부분이었다. 그리고 프론트 개발하는데 알고리즘을 깊게 사용하지 않아도 실무에서 큰 문제가 없는 상태였다.(아마 내 시야가 너무 좁아져 있어서 모르는듯) 시니어 개발자로 가기 위해서는 자료 구조와 알고리즘에 대한 개념과 이해를 바탕으로 더 좋은 프로그래밍을 할 수 있다는 생각도 들었다. 결국, 책을 사서 한번 보자라고 생각해서 알고리즘 책 쇼핑을 했다..

개발일기/Vue.js

[Vue.js] textarea 자동 높이 조절 하는법(autosize)

textarea를 사용할때 내용 길이에 따라 자동으로 높이가 조절 되는 방법을 살펴보자. 개요 Vue를 기반으로 설명한다. 총 3개의 방법을 알려준다. 이 포스팅은 번역/의역/오역 다수 같으므로 이해가 되지 않거나 자세히 알고 싶으면 아래 링크를 통해 살펴보자. Vuejs-auto-size 1번째 방법 : window.addEventlistener 사용 // 자동 높이 조절을 하고 싶은 textarea가 있는 컴포넌트 // 여기서는 ResizeByClass.vue 이다. // auto-resize.js function resize() { this.style.height = "auto"; this.style.height = `${this.scrollHeight}px`; } export const setRe..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..