JAVASCRIPT의 THIS Java와 같은 객체지향 언어에서 this는 클래스로부터 생성된 인스턴트 자신을 의미하며, 대부분의 상황에서 클래스 밖에서는 사용할 수 없다. 하지만 Javascript의 this를 이런 관점에서 접근하면 상당히 혼란스럽다. Javascript에서의 this는 함수의 현재 실행 컨텍스트를 의미하기 때문이다. 게다가 Javas...

npm에서 dependency를 최신 버전(latest)으로 업데이트 하려면 하나씩 따로 업데이트를 해줘야한다. 모든 의존성을 한번에 업데이트 하는 것은 프로젝트 관점에서 굉장히 큰 리스크를 가지고 있는 작업이기 때문에 npm에서 공식적으로 지원하지 않는 기능이다. 하지만 여러가지 보일러플레이트를 github에서 관리해야할 때에는 분명 일괄 업데이트 기능도...

node에서 child process를 만드는 앱을 작성했을 때 이 앱을 ctrl+c키를 눌러 종료하면 child process가 죽지 않는 경우가 있다. close를 해줘야되는데 앱이 shutdown 되는 바람에 close 되지 않은 상태로 영영 남아있는다던지.. 이럴 땐 인터럽트 이벤트를 받아, 콜백에서 graceful 하게 프로세스를 종료할 수 있는...

HIGHER ORDER COMPONENT(HOC) 리액트 컴포넌트를 파라미터로 받아 리액트 컴포넌트를 리턴하는 함수 왜 쓰냐? * 코드 재사용 * 컴포넌트 강화 (원래 있던 컴포넌트에 커스텀 props, state, options 등을 추가하고 싶을 때) 함수 형태의 컴포넌트를 받아 강화된 함수형 컴포넌트를 리턴하는 HOC const withN...

WINDOWS 환경에서 NGINX에 LETSENCRYPT HTTPS 인증서 적용하기 환경 * Windows server 2012 R2 * nginx 1.12 * letsencrypt-win-simple 1.9.7 * 인증할 도메인(ahribori.com)과 연결된 서버 1. LETSENCRYPT 다운로드 letsencrypt-win-simple [...

플렉스박스 (FLEXBOX) 레이아웃을 잡는다는 것은 굉장히 어려운 일이다. 정답이 없기 때문이다. table을 이용하거나 position 또는 float 속성을 이용하는 등 여러가지 방법을 조합하여 어찌어찌 레이아웃을 잡고 나면 여러 부작용이 꼬리에 꼬리를 물고 나타난다. 하지만 Flexbox를 이용하면 표준화된 방법으로 쉽게 원하는 레이아웃을 잡을 수 ...

트랜지션과 애니메이션 요소의 속성값이 변화하면 보통 즉각 그 효과가 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정 시간(duration)에 걸쳐 나타나게 할 수 있다. 트랜지션과 애니메이션의 사용법과 각각의 특징을 정리한다. 1. 트랜지션 * 요소의 변화를 일정 기간(duration)동안 일어나게 함 * 자동으로 발동되지 않음 (hover나...

1. 위치(POSITION) 1-1. STATIC * 기본값 * HTML 기본 배치 순서인 왼쪽에서 오른쪽, 위에서 아래로 배치 * 부모 요소의 위치가 기준이 됨 1-2. RELATIVE * top, bottom, left, right 속성 사용 가능 * 부모 요소를 기준 * 기본적인 동작 원리는 기본값인 static과 동일 1-3. ABSO...

WHITE-SPACE, TEXT-OVERFLOW, WORD-WRAP, WORD-BREAK 속성 정리 볼 때 마다 헷갈리는 속성들이라 따로 정리함 1. WHITE-SPACE * space, tab, line break 세 가지를 white space라고 함 * html은 기본적으로 white space를 연속으로 아무리 입력해봤자 space 한 번만 적...

FONT와 TEXT에 대하여 1. FONT-SIZE 폰트의 크기를 정의 2. FONT-FAMILY 폰트를 지정 * 디바이스에 해당 폰트가 설치되어 있어야함 * 폰트는 여러개 동시에 지정 가능 * 첫 번째로 지정한 폰트가 디바이스에 설치되어있지 않으면 두 번째로 지정한 폰트가 적용 * 지정한 폰트가 모두 디바이스에 설치되어 있지 않으면 OS 디폴트...

Github에 지킬이나 hexo로 블로그를 운영하거나, TIL같이 마크다운으로 무언가를 포스팅 할 때, 이미지를 관리하는 것이 참 번거롭다. 마크다운으로 작성한 페이지에 이미지를 첨부하려면 이미지를 레파지토리에 같이 커밋한다음 상대경로로 링크를 걸거나 imgur같은 서비스에 업로드하고 링크를 copy & paste 해야 한다. 그러나... 꼼수지...

BACKGROUND 1. BACKGROUND-IMAGE * 요소의 배경 이미지 지정 body { background-image: url("http://image-server.com/my-image.png"); } * 여러 개의 이미지를 설정할 수 있음 (먼저 설정된게 앞에 출력) body { background-image: ur...