AHRIBORI.COMv0.9
HomeAbout (2)Javascript (7)CSS (12)React (3)Webpack (1)Java (0)Node.js (4)ElasticSearch (1)자료구조 (8)알고리즘 (6)Selenium (1)Linux (2)Docker (1)Git (1)Tip (4)Issue (1)Memo (3)
star0
[Javascript] this
JAVASCRIPT의 THIS Java와 같은 객체지향 언어에서 this는 클래스로부터 생성된 인스턴트 자신을 의미하며, 대부분의 상황에서 클래스 밖에서는 사용할 수 없다. 하지만 Javascript의 this를 이런 관점에서 접근하면 상당히 혼란스럽다. Javascript에서의 this는 함수의 현재 실행 컨텍스트를 의미하기 때문이다. 게다가 Javas...
5년 전
아리보리댓글 0|조회 624
star0
Npm dependency들을 모두 최신 버전으로 업데이트하기
npm에서 dependency를 최신 버전(latest)으로 업데이트 하려면 하나씩 따로 업데이트를 해줘야한다. 모든 의존성을 한번에 업데이트 하는 것은 프로젝트 관점에서 굉장히 큰 리스크를 가지고 있는 작업이기 때문에 npm에서 공식적으로 지원하지 않는 기능이다. 하지만 여러가지 보일러플레이트를 github에서 관리해야할 때에는 분명 일괄 업데이트 기능도...
5년 전
아리보리댓글 0|조회 1646
star0
Node.js 프로세스 안전하게 종료하기
node에서 child process를 만드는 앱을 작성했을 때 이 앱을 ctrl+c키를 눌러 종료하면 child process가 죽지 않는 경우가 있다. close를 해줘야되는데 앱이 shutdown 되는 바람에 close 되지 않은 상태로 영영 남아있는다던지.. 이럴 땐 인터럽트 이벤트를 받아, 콜백에서 graceful 하게 프로세스를 종료할 수 있는...
5년 전
아리보리댓글 0|조회 5580
star0
Higher Order Component(HOC)
HIGHER ORDER COMPONENT(HOC) 리액트 컴포넌트를 파라미터로 받아 리액트 컴포넌트를 리턴하는 함수 왜 쓰냐? * 코드 재사용 * 컴포넌트 강화 (원래 있던 컴포넌트에 커스텀 props, state, options 등을 추가하고 싶을 때) 함수 형태의 컴포넌트를 받아 강화된 함수형 컴포넌트를 리턴하는 HOC const withN...
5년 전
아리보리댓글 0|조회 392
star0
Windows 환경에서 Letsencrypt 적용하기
WINDOWS 환경에서 NGINX에 LETSENCRYPT HTTPS 인증서 적용하기 환경 * Windows server 2012 R2 * nginx 1.12 * letsencrypt-win-simple 1.9.7 * 인증할 도메인(ahribori.com)과 연결된 서버 1. LETSENCRYPT 다운로드 letsencrypt-win-simple [...
5년 전
아리보리댓글 0|조회 6015
star0
[CSS] 플렉스박스 (Flexbox)
플렉스박스 (FLEXBOX) 레이아웃을 잡는다는 것은 굉장히 어려운 일이다. 정답이 없기 때문이다. table을 이용하거나 position 또는 float 속성을 이용하는 등 여러가지 방법을 조합하여 어찌어찌 레이아웃을 잡고 나면 여러 부작용이 꼬리에 꼬리를 물고 나타난다. 하지만 Flexbox를 이용하면 표준화된 방법으로 쉽게 원하는 레이아웃을 잡을 수 ...
5년 전
아리보리댓글 1|조회 2559
star0
[CSS] 트랜지션(Transition)과 애니메이션(Animation)
트랜지션과 애니메이션 요소의 속성값이 변화하면 보통 즉각 그 효과가 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정 시간(duration)에 걸쳐 나타나게 할 수 있다. 트랜지션과 애니메이션의 사용법과 각각의 특징을 정리한다. 1. 트랜지션 * 요소의 변화를 일정 기간(duration)동안 일어나게 함 * 자동으로 발동되지 않음 (hover나...
5년 전
아리보리댓글 0|조회 19312
star0
[CSS] position, z-index, overflow
1. 위치(POSITION) 1-1. STATIC * 기본값 * HTML 기본 배치 순서인 왼쪽에서 오른쪽, 위에서 아래로 배치 * 부모 요소의 위치가 기준이 됨 1-2. RELATIVE * top, bottom, left, right 속성 사용 가능 * 부모 요소를 기준 * 기본적인 동작 원리는 기본값인 static과 동일 1-3. ABSO...
5년 전
아리보리댓글 0|조회 1418
star0
[CSS] white-space, text-overflow, word-wrap, word-break 속성에 대하여
WHITE-SPACE, TEXT-OVERFLOW, WORD-WRAP, WORD-BREAK 속성 정리 볼 때 마다 헷갈리는 속성들이라 따로 정리함 1. WHITE-SPACE * space, tab, line break 세 가지를 white space라고 함 * html은 기본적으로 white space를 연속으로 아무리 입력해봤자 space 한 번만 적...
5년 전
아리보리댓글 0|조회 1575
star0
[CSS] 폰트(Font)와 텍스트(Text)
FONT와 TEXT에 대하여 1. FONT-SIZE 폰트의 크기를 정의 2. FONT-FAMILY 폰트를 지정 * 디바이스에 해당 폰트가 설치되어 있어야함 * 폰트는 여러개 동시에 지정 가능 * 첫 번째로 지정한 폰트가 디바이스에 설치되어있지 않으면 두 번째로 지정한 폰트가 적용 * 지정한 폰트가 모두 디바이스에 설치되어 있지 않으면 OS 디폴트...
5년 전
아리보리댓글 0|조회 421
star0
Github 마크다운 작성 시 이미지 업로드 꿀팁
Github에 지킬이나 hexo로 블로그를 운영하거나, TIL같이 마크다운으로 무언가를 포스팅 할 때, 이미지를 관리하는 것이 참 번거롭다. 마크다운으로 작성한 페이지에 이미지를 첨부하려면 이미지를 레파지토리에 같이 커밋한다음 상대경로로 링크를 걸거나 imgur같은 서비스에 업로드하고 링크를 copy & paste 해야 한다. 그러나... 꼼수지...
5년 전
아리보리댓글 6|조회 16689
star0
[CSS] 백그라운드(Background) 속성
BACKGROUND 1. BACKGROUND-IMAGE * 요소의 배경 이미지 지정 body { background-image: url("http://image-server.com/my-image.png"); } * 여러 개의 이미지를 설정할 수 있음 (먼저 설정된게 앞에 출력) body { background-image: ur...
5년 전
아리보리댓글 0|조회 1462