Posts by Tag

[Node.js] PM2(Process Manager) 알아보기

4 minute read

현재 회사에서 운영 중인 프로젝트들 모두 PM2를 이용해 프로세스를 관리하고 있다. PM2 는 코드를 작성하는 데에 직접적인 영향을 주지 않아서 필자는 큰 관심을 가지지 않고 있었고, 타 팀원이 설정해둔 그대로 사용하고 있었다.

[Javascript] 지연 평가(Lazy evaluation) 를 이용한 성능 개선

3 minute read

이전 글에서 Iterable/Iterator와 Generator 에 대해 알아보았다(이 글은 이전 글을 읽었다는 가정 하에 작성되었다.). Generator를 설명하는 글 말미에서 말했듯, 이번 글에서는 지연 평가란 무엇이고 어떻게 성능 개선에 활용할 수 있는지 알아보도록 한다.

[Javascript] Generator 이해하기

3 minute read

이전 글에서는 Iterable과 Iterator에 대한 개념을 정리해보았다(이번 글을 읽기 전에 먼저 읽어보는 것을 추천한다). 이전 글의 끝에서 말했듯, 자바스크립트는 손쉽게 well-formed Iterable을 생성할 수 있는 Generator 함수를 제공한다. 이번에는 Ge...

[Javascript] Iterable과 Iterator 이해하기

2 minute read

자바스크립트의 레퍼런스를 살펴보면 Iterable, Iterator라는 단어를 자주 접할 수 있다. 또한 ES6에 새롭게 추가된 Set, Map 객체는 Iterable로 평가된다. 심지어 항상 사용하는 String, Array 또한 Iterable로 평가된다.

[Javascript] IntersectionObserver API 설명과 사용 방법

3 minute read

Intersection​Observer 란?

[ES6] destructuring과 default parameter를 이용한 항샹된 함수 매개변수 정의 방법

2 minute read

ES6에서 추가된 기능인 destructuring과 default prameter를 이용해 단계적으로 함수의 매개변수를 향상시켜서 정의하는 방법을 알아보자.

[ES6] const, let을 통한 변수 선언

2 minute read

const와 let은 ES6이후 도입된 새로운 변수 선언 방법이다. 개인적으로 const와 let이 일상에서 느끼는 가장 큰 변화 중 하나인 것 같다. 기존에 사용되었던 var와 이들 사이에는 어떤 차이가 있는지 정리해보았다.

[Electron] Youtube Music desktop application 빌드 경험기

less than 1 minute read

근 1년 전부터 멜론 정기결제를 중단하고 Youtube Premium을 이용하고 있다. Youtube Premium 회원은 Youtube Music이라는 별도 앱을 통해 모바일 기기에서 음원 스트리밍 서비스를 제공받을 수 있다.

[javascript]Promise를 보다 잘 활용 할 수 있는 Tip

2 minute read

Promise는 javascript에서 비동기 처리를 위해 사용된다. 개인적으로 es7에 들어서며 async/await로 그 사용처가 줄어들었다(Promise로 작성된 코드는 async/await로 작성된 코드에 비해 가독성이 떨어진다). 그럼에도 불구하고 여전히 특정 케이스에서...

[javascript] this 톺아보기

1 minute read

javascript에서 this는 호출 환경에 따라 그 대상이 달라진다. 다음과 같은 환경에서 서로 다른 this를 가지게 된다.

[lodash] throttle vs debounce

1 minute read

1.throttle

[javascript] Event bubbling & capturing

1 minute read

javascript event handling에 있어서 필수적인 event bubbling & capturing에 대해 알아보자.

[HTML] 좋은 사용자 경험(UX)을 제공하는 Form 만들기

3 minute read

들어가며

[edge case] 웹폰트 적용에서 최적화까지

5 minute read

들어가며

[CSS] Grid layout 이해하기

4 minute read

Grid layout은 지난 글에서 다뤘던 Flexbox와 마찬가지로, 레이아웃을 보다 수월하게 구성할 수 있도록 도와준다. 특히 열과 행으로 구성된 레이아웃에 탁월함을 보인다. 이 글에서는 Grid layout에 대해 설명하고, 예제를 통해 어떻게 활용할 수 있는지 알아보자.

[CSS] Flexbox 이해하기

4 minute read

필자는 웹 페이지의 레이아웃을 구성하기 위해 float와 position 등의 속성을 주로 이용했다. 그러나 Flexbox의 등장 이후 사용 빈도가 현저히 줄어들었다. 이 글에서는 Flexbox에 대해 설명하고, 예제를 통해 어떻게 활용 할 수 있는지 알아보고자 한다.

[html & css] WebP 파일을 이용한 이미지 최적화

1 minute read

WebP 파일이란?

[edge case] 웹폰트 적용에서 최적화까지

5 minute read

들어가며

[CSS] Grid layout 이해하기

4 minute read

Grid layout은 지난 글에서 다뤘던 Flexbox와 마찬가지로, 레이아웃을 보다 수월하게 구성할 수 있도록 도와준다. 특히 열과 행으로 구성된 레이아웃에 탁월함을 보인다. 이 글에서는 Grid layout에 대해 설명하고, 예제를 통해 어떻게 활용할 수 있는지 알아보자.

[CSS] Flexbox 이해하기

4 minute read

필자는 웹 페이지의 레이아웃을 구성하기 위해 float와 position 등의 속성을 주로 이용했다. 그러나 Flexbox의 등장 이후 사용 빈도가 현저히 줄어들었다. 이 글에서는 Flexbox에 대해 설명하고, 예제를 통해 어떻게 활용 할 수 있는지 알아보고자 한다.

[html & css] WebP 파일을 이용한 이미지 최적화

1 minute read

WebP 파일이란?

[Refactoring] 8장 데이터 체계화

8 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Refactoring] 7장 객체 간의 기능 이동 요약

4 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Refactoring] 6장 메서드 정리 요약

3 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Refactoring] 8장 데이터 체계화

8 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Refactoring] 7장 객체 간의 기능 이동 요약

4 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Refactoring] 6장 메서드 정리 요약

3 minute read

본 게시물은 마틴 파울러의 리팩토링: 코드 품질을 개선하는 객체지향 사고법 도서를 읽고 정리한 내용입니다.

[Javascript] Iterable과 Iterator 이해하기

2 minute read

자바스크립트의 레퍼런스를 살펴보면 Iterable, Iterator라는 단어를 자주 접할 수 있다. 또한 ES6에 새롭게 추가된 Set, Map 객체는 Iterable로 평가된다. 심지어 항상 사용하는 String, Array 또한 Iterable로 평가된다.

[ES6] 배열(array) 관련 메서드 소개 및 활용

4 minute read

배열은 개발에서 빠질 수 없는 기초적인 자료구조이다. 때문에 프로그래밍 언어는 배열과 관련된 다양한 메서드들을 제공한다. 자바스크립트도 마찬가지로 활용도 높은 메서드들을 제공하고 있다.

[ES6] destructuring과 default parameter를 이용한 항샹된 함수 매개변수 정의 방법

2 minute read

ES6에서 추가된 기능인 destructuring과 default prameter를 이용해 단계적으로 함수의 매개변수를 향상시켜서 정의하는 방법을 알아보자.

[개발일기 #3] 코로나 발 재택근무 체험기

1 minute read

[개발 일기 #2] rel=canonical과 rel=alternate을 이용한 SEO 최적화

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[개발 일기 #1] Polyfill 적용기

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[HTTP] CORS(Cross Origin Resource Sharing)란?

4 minute read

CORS(Cross Origin Resource Sharing) 정의

[HTTP] 응답코드 목록

1 minute read

항상 헷갈리는 HTTP 응답 코드를 정리하고자 한다. 전체 코드 보다는 주로 사용 할 것같은 코드 위주로 진행하겠다 :-) *물론 주관적인 사용 빈도이다.

[개발 일기 #1] Polyfill 적용기

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[Javascript] IntersectionObserver API 설명과 사용 방법

3 minute read

Intersection​Observer 란?

[HTML] 좋은 사용자 경험(UX)을 제공하는 Form 만들기

3 minute read

들어가며

UI Component Framework의 장단점(feat. Vuetify)

2 minute read

[CSS] Grid layout 이해하기

4 minute read

Grid layout은 지난 글에서 다뤘던 Flexbox와 마찬가지로, 레이아웃을 보다 수월하게 구성할 수 있도록 도와준다. 특히 열과 행으로 구성된 레이아웃에 탁월함을 보인다. 이 글에서는 Grid layout에 대해 설명하고, 예제를 통해 어떻게 활용할 수 있는지 알아보자.

[CSS] Flexbox 이해하기

4 minute read

필자는 웹 페이지의 레이아웃을 구성하기 위해 float와 position 등의 속성을 주로 이용했다. 그러나 Flexbox의 등장 이후 사용 빈도가 현저히 줄어들었다. 이 글에서는 Flexbox에 대해 설명하고, 예제를 통해 어떻게 활용 할 수 있는지 알아보고자 한다.

[javascript] Event bubbling & capturing

1 minute read

javascript event handling에 있어서 필수적인 event bubbling & capturing에 대해 알아보자.

[lodash] throttle vs debounce

1 minute read

1.throttle

[javascript] this 톺아보기

1 minute read

javascript에서 this는 호출 환경에 따라 그 대상이 달라진다. 다음과 같은 환경에서 서로 다른 this를 가지게 된다.

[javascript]Promise를 보다 잘 활용 할 수 있는 Tip

2 minute read

Promise는 javascript에서 비동기 처리를 위해 사용된다. 개인적으로 es7에 들어서며 async/await로 그 사용처가 줄어들었다(Promise로 작성된 코드는 async/await로 작성된 코드에 비해 가독성이 떨어진다). 그럼에도 불구하고 여전히 특정 케이스에서...

[javascript]Promise를 보다 잘 활용 할 수 있는 Tip

2 minute read

Promise는 javascript에서 비동기 처리를 위해 사용된다. 개인적으로 es7에 들어서며 async/await로 그 사용처가 줄어들었다(Promise로 작성된 코드는 async/await로 작성된 코드에 비해 가독성이 떨어진다). 그럼에도 불구하고 여전히 특정 케이스에서...

[HTTP] 응답코드 목록

1 minute read

항상 헷갈리는 HTTP 응답 코드를 정리하고자 한다. 전체 코드 보다는 주로 사용 할 것같은 코드 위주로 진행하겠다 :-) *물론 주관적인 사용 빈도이다.

[Electron] Youtube Music desktop application 빌드 경험기

less than 1 minute read

근 1년 전부터 멜론 정기결제를 중단하고 Youtube Premium을 이용하고 있다. Youtube Premium 회원은 Youtube Music이라는 별도 앱을 통해 모바일 기기에서 음원 스트리밍 서비스를 제공받을 수 있다.

[Electron] Youtube Music desktop application 빌드 경험기

less than 1 minute read

근 1년 전부터 멜론 정기결제를 중단하고 Youtube Premium을 이용하고 있다. Youtube Premium 회원은 Youtube Music이라는 별도 앱을 통해 모바일 기기에서 음원 스트리밍 서비스를 제공받을 수 있다.

[html & css] WebP 파일을 이용한 이미지 최적화

1 minute read

WebP 파일이란?

[html & css] WebP 파일을 이용한 이미지 최적화

1 minute read

WebP 파일이란?

[ES6] const, let을 통한 변수 선언

2 minute read

const와 let은 ES6이후 도입된 새로운 변수 선언 방법이다. 개인적으로 const와 let이 일상에서 느끼는 가장 큰 변화 중 하나인 것 같다. 기존에 사용되었던 var와 이들 사이에는 어떤 차이가 있는지 정리해보았다.

[ES6] const, let을 통한 변수 선언

2 minute read

const와 let은 ES6이후 도입된 새로운 변수 선언 방법이다. 개인적으로 const와 let이 일상에서 느끼는 가장 큰 변화 중 하나인 것 같다. 기존에 사용되었던 var와 이들 사이에는 어떤 차이가 있는지 정리해보았다.

[ES6] const, let을 통한 변수 선언

2 minute read

const와 let은 ES6이후 도입된 새로운 변수 선언 방법이다. 개인적으로 const와 let이 일상에서 느끼는 가장 큰 변화 중 하나인 것 같다. 기존에 사용되었던 var와 이들 사이에는 어떤 차이가 있는지 정리해보았다.

[ES6] destructuring과 default parameter를 이용한 항샹된 함수 매개변수 정의 방법

2 minute read

ES6에서 추가된 기능인 destructuring과 default prameter를 이용해 단계적으로 함수의 매개변수를 향상시켜서 정의하는 방법을 알아보자.

[React] The Component lifecycle(ver 16.3 ~)

2 minute read

React에서 사용되는 Component lifecycle method의 종류와 사용처를 정리하고자 한다. 비록 16.8 버전 이후 Hook 기능의 추가로 인해 Class Component의 사용량은 떨어질 것이라 생각되지만 정리에 의의를 두자.

[ES6] 배열(array) 관련 메서드 소개 및 활용

4 minute read

배열은 개발에서 빠질 수 없는 기초적인 자료구조이다. 때문에 프로그래밍 언어는 배열과 관련된 다양한 메서드들을 제공한다. 자바스크립트도 마찬가지로 활용도 높은 메서드들을 제공하고 있다.

UI Component Framework의 장단점(feat. Vuetify)

2 minute read

UI Component Framework의 장단점(feat. Vuetify)

2 minute read

UI Component Framework의 장단점(feat. Vuetify)

2 minute read

[Javascript] Generator 이해하기

3 minute read

이전 글에서는 Iterable과 Iterator에 대한 개념을 정리해보았다(이번 글을 읽기 전에 먼저 읽어보는 것을 추천한다). 이전 글의 끝에서 말했듯, 자바스크립트는 손쉽게 well-formed Iterable을 생성할 수 있는 Generator 함수를 제공한다. 이번에는 Ge...

[Javascript] 지연 평가(Lazy evaluation) 를 이용한 성능 개선

3 minute read

이전 글에서 Iterable/Iterator와 Generator 에 대해 알아보았다(이 글은 이전 글을 읽었다는 가정 하에 작성되었다.). Generator를 설명하는 글 말미에서 말했듯, 이번 글에서는 지연 평가란 무엇이고 어떻게 성능 개선에 활용할 수 있는지 알아보도록 한다.

[CSS] Flexbox 이해하기

4 minute read

필자는 웹 페이지의 레이아웃을 구성하기 위해 float와 position 등의 속성을 주로 이용했다. 그러나 Flexbox의 등장 이후 사용 빈도가 현저히 줄어들었다. 이 글에서는 Flexbox에 대해 설명하고, 예제를 통해 어떻게 활용 할 수 있는지 알아보고자 한다.

[CSS] Grid layout 이해하기

4 minute read

Grid layout은 지난 글에서 다뤘던 Flexbox와 마찬가지로, 레이아웃을 보다 수월하게 구성할 수 있도록 도와준다. 특히 열과 행으로 구성된 레이아웃에 탁월함을 보인다. 이 글에서는 Grid layout에 대해 설명하고, 예제를 통해 어떻게 활용할 수 있는지 알아보자.

[edge case] 웹폰트 적용에서 최적화까지

5 minute read

들어가며

외부 라이브러리를 wrapping 해야 하는 이유

2 minute read

우리는 프로젝트를 진행하면서 수많은 외부 라이브러리의 도움을 받는다. 많은 사람들이 외부 라이브러리를 사용할 때 wrapping 해서 사용해야 한다고 말한다. 이번 글에서는 왜 많은 사람들이 wrapping을 권고하는지 필자가 겪었던 사례를 통해 알아보고자 한다.

외부 라이브러리를 wrapping 해야 하는 이유

2 minute read

우리는 프로젝트를 진행하면서 수많은 외부 라이브러리의 도움을 받는다. 많은 사람들이 외부 라이브러리를 사용할 때 wrapping 해서 사용해야 한다고 말한다. 이번 글에서는 왜 많은 사람들이 wrapping을 권고하는지 필자가 겪었던 사례를 통해 알아보고자 한다.

[HTML] 좋은 사용자 경험(UX)을 제공하는 Form 만들기

3 minute read

들어가며

계약에 의한 설계(Design by Contract)로 견고한 서비스 만들기

3 minute read

계약(출처: 픽사베이)

계약에 의한 설계(Design by Contract)로 견고한 서비스 만들기

3 minute read

계약(출처: 픽사베이)

계약에 의한 설계(Design by Contract)로 견고한 서비스 만들기

3 minute read

계약(출처: 픽사베이)

[개발 일기 #1] Polyfill 적용기

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[개발 일기 #1] Polyfill 적용기

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[개발 일기 #2] rel=canonical과 rel=alternate을 이용한 SEO 최적화

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

[개발 일기 #2] rel=canonical과 rel=alternate을 이용한 SEO 최적화

2 minute read

실무에서 경험한 삽질기를 다루기 위한 개발 일기입니다. 각 잡고 포스팅하기엔 너무 가볍고, 기록하지 않으면 잊어버릴 것 같은 내용을 다룹니다.

제조업 개발자의 웹 서비스 적응기

4 minute read

필자는 제조업 기반 회사에서 직장 생활을 시작해 작년까지 커리어를 쌓아 왔다. 그러던 중 작년 4월 온라인 서비스를 하는 회사로 첫 이직을 했다. 이번 글에서는 이직 후 약 9개월 동안 온라인 서비스 개발을 처음 접하면서 느낀 온/오프라인 서비스의 차이를 이야기해보려고 한다.

[개발일기 #3] 코로나 발 재택근무 체험기

1 minute read

[Node.js] PM2(Process Manager) 알아보기

4 minute read

현재 회사에서 운영 중인 프로젝트들 모두 PM2를 이용해 프로세스를 관리하고 있다. PM2 는 코드를 작성하는 데에 직접적인 영향을 주지 않아서 필자는 큰 관심을 가지지 않고 있었고, 타 팀원이 설정해둔 그대로 사용하고 있었다.

[Node.js] PM2(Process Manager) 알아보기

4 minute read

현재 회사에서 운영 중인 프로젝트들 모두 PM2를 이용해 프로세스를 관리하고 있다. PM2 는 코드를 작성하는 데에 직접적인 영향을 주지 않아서 필자는 큰 관심을 가지지 않고 있었고, 타 팀원이 설정해둔 그대로 사용하고 있었다.