본문 바로가기

javascript

(5)
[javascript] DOM event 발생 경로 서론 js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다. 이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자. Event Bubbling, Capturing 클릭해주세요. 다음과 같은 html이 있을 경우에, 밑과 같이 event가 일어난다. 출처 우선 Event Capturing이라는 것이 일어나는데, 최상단 요소에서 클릭한 요소로 찾아가는 과정을 의미합니다. 이 과정에서, 이벤트가 따로 발생된다거나 그런 것은 없습니다. 그 이후에, 클릭한 요소에서 이벤트가 발생합니다. 여기서 등록한 event handler가 실행됩니다. 그 이후에는 Event Bubbling 이 일어납니다. Event..
npm install과 버전 문제 npm install npm install은 package.json에 있는 dependency가 있는 library들을 다운받는 명령어 이다. package.json은 dependency version을 ^를 이용하여 다운로드 한다. 이 때, ^는 어떤 방식으로 구동될까? 다음과 같이, ^1.1.0으로 표기되어 있을 경우에 1.1.0에서 2.0.0의 범위를 가지고 있다고 내포하고 있다. 하지만 0.0.x부터는 miner version을 범위로 치기때문에, 2번째 범위인 ^0.0.1이면 0.0.1
[javascript] axios intercepter로 error handling 하기 Error Handling? error handling은 언제 해야 할까요? 대체적으로 프론트엔드에서는 에러 핸들링을 해야 할때는, api server와 통신할 때 자주 해야 합니다. 프론트엔드 개발자라면, api server와 통신할 때, 특정 error에 대응해주어야 할 때, 코드 중복이 자주 발생하는 것을 느낀 적 있을 겁니다. (적어도 저는 그랬습니다.) 물론 요청마다 겹치지 않는 handling도 있지만, 401같은 token expired는 공통적인 error입니다. 그럼 저 401같은 에러는 한군데 묶어서 관리할 수 있지 않을까요? Axios Intercepter axios에는 request를 보내기 전이나 response를 받기 전에, 코드를 실행할 수 있습니다. axios intercep..
[javascript] html canvas hover animation 서론 html canvas로 여러가지 실험을 해보던 과정에서, html canvas에서 다각형을 그린 후에, 그 안에서 hover event를 받아야 하는 문제가 생겼다. google느님께 여쭤보니, 다 사각형이나 원형의 hover event만 다루고 있다는 것을 알게 되었다. 그래서 직접 구현한 과정과, 코드를 공유하려고 한다. cavas에서 다각형 그리기 우선 다각형을 그리기 위해서는, 다각형 꼭짓점의 좌표가 필요하다. 우선 다각형 꼭짓점의 좌표를 다음과 같이 가지고 있다고 생각하겠다. const coordinates = [x1,y1,x2,y2....]; 다음과 같이 꼭짓점의 좌표를 가지고 있을 때, 다음과 같은 코드로 다각형을 그릴 수 있다. function drawPolygon: function(..
[javascript] iterator와 generator 서론 이 글은 2년차 예비 프론트엔드 개발자가 쓴 글로, 틀린 부분이 있을 수 있습니다. 그런 부분은 댓글이나 메일로 알려주시면 감사하겠습니다. 이 글을 쓰게 된 동기 프론트엔드 개발자라면 redux-saga라는 redux middleware를 본 적이 있을 것이다. 이 때 generator라는 문법을 사용하는데, generator를 그저 함수를 순서대로 사용할 수 있게 하는 문법 정도로 기억하고 있을 것이다. 필자도 초기에는 그렇게 생각하고 있었다. 그럼 이 generator는 어떻게 돌아가는지 궁금했다. 그것에 대해 알아보자 iteratable과 iterator iterator mdn에서 말하는 itereator입니다. 자바스크립트에서 반복자(Iterator)는 시퀀스를 정의하고 종료시의 반환값을 잠..