Javascript 개발 노트

Javascript로 개발하면서 자주 사용하는 내용을 정리했다.

이벤트

마우스 관련 :

이벤트 핸들러 설명
onmouseenter 포인터가 한 요소로 이동될 때 발생
onmouseleave 포인터가 요소의 바깥으로 나갈 때 발생
onmousemove 요소 위에서 포인터가 움직일 때
onmousedown 요소에서 마우스 버튼을 눌렀을 때 발생
onmouseup 요소위에서 마우스 버튼을 눌렀을 때 발생(release)

자주 사용하는 이벤트 메소드 :

이벤트 핸들러 설명
e.preventDefault() 기본 기능이 동작하는 걸 막는다.
e.stopPropagation() 부모 노드 방향으로 이벤트가 전파되지 않도록 한다.

배열

map

template (ES6)

유용한 객체

ES6 Generator 예제

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수다.

파일 업로드 처리 하는데, 동시에 처리하는 파일의 갯수를 제한할 필요가 있었다. while과 setInterval 조합으로 처리하려다가 좀 더 세련되고, 최근 기술을 사용하고 싶어서 Generator를 사용했다.

1번 예제는 써도 괜찮지만 2번 예제는 보완이 필요해 보인다.

비동기 함수를 순차적으로 실행하는 예제

다음은 Generator를 사용해서 비동기 함수를 순차적으로 실행하는 간단한 코드다.

동시에 10개씩 처리하는 예제

이번에는 10개씩 동시 처리하는 예제다.

자주 사용하는 React Snippet

자주 사용하는 React Snippet을 모아놓은 페이지다.

Lifecycle

Mounting

Updating

Unmounting

Redux, Router를 사용하는 뷰

컴포넌트 뷰

자주 사용하는 패턴

조건에 맞게 컴포넌트 노출

ref 참조

PropTypes

서브라임텍스트에서 자바스크립트 파일 ES6 Syntax Highlight 설정하기

프로젝트를 진행할 때 자바스크립트를 사용하는데, 오래된 프로젝트는 ES3, ES5를 사용하고, webpack을 사용한 이후에는 ES6만 사용한다. 프로젝트에 따라 문법을 다르게 써야할 필요가 있는데, 서브라임에서는 기본적으로 한 확장자에 하나의 언어만 지원한다. 물론 변경할 수도 있지만 파일마다 변경해야해서 귀찮다. 그래서 찾은 플러그인이 sublime-project-specific-syntax이다.

이 플러그인을 사용하면, 프로젝트마다 syntax를 설정할 수 있다.

방법은 플러그인 설치 후 프로젝트에서 다음과 같이 설정하면 된다.

Project – Edit Project