Category – JavaScript
15 posts tagged with "JavaScript" (See all categories)

JavaScript icon
Visibilitychange 이벤트 사용하기

27.08.20181 Min Read — In JavaScript

회사에서 동영상 서비스를 하고 있는데 안드로이드 디바이스 파이어폭스를 사용하는 유저가 브라우저를 내려도 동영상 재생이 계속 되어서 소리가 들리는 문제가 있었다. 간단하게 window blur 이벤트가 발생하거나 window focusout…

JavaScript icon
Jest에서 localStorage 사용

19.06.20181 Min Read — In JavaScript

회사 프로젝트 로그인 부분에서 token을 받아와 localStorage에 저장을 하고 있다. Jest를 사용해서 테스트 코드를 작성하다 보니 localStorage 가 없어서 테스트가 정상적으로 동작 하지 않았다. 그래서 좀 찾아보니 다음과 같은 패키지를 설치해서 해결 할 수 있다는걸 알게 되었다. 설치 설정 package.json jest…

JavaScript icon
Jest 시작하기

08.02.20182 Min Read — In JavaScript

설치 npm 또는 yarn 으로 개발 환경에서 쓰는 모듈이기 때문에 개발 옵션을 주고 아래와 같이 설치한다. 코드 작성 파일을 만들고 아래와 같이 코드를 작성한다. 테스트 코드 작성 테스트용 파일을 만들고 아래와 같이 코드를 작성한다. 기본적으로 * .test.js…

JavaScript icon
Jest matchers 알아보기 - 1

08.02.20181 Min Read — In JavaScript

toBe 기대치 값이 원하는 값인지 비교할 때 사용한다. toBe 앞에 not 을 붙여주면 값이 같지 않음을 비교한다. 테스트 코드 실행 toEqual 두 객체의 값을 비교할 때 사용한다. toEqual 앞에 not 을 붙여주면 같지 않음을 비교한다. 테스트 코드 아래와 같이 객체가 같을 때와 같지 않을때 비교를 할 수 있다. 실행

JavaScript icon
Number.isNaN 함수

31.01.20181 Min Read — In JavaScript

알고리즘 문제를 풀다가 해당값에 문자열이 포함되어 있는지 숫자만 있는지 구분을 하는 문제가 있어서 parseInt 를 써서 NaN 이면 숫자가 아니라고 판단하려고 했다. 하지만 아래와 같은 결과가 나왔다... 그럼 NaN 인지 판단은 어떻게 할 수 있단말인가... 검색 해보니 isNaN() 이라는게 있다는걸 알게 되었다. 예제는 다음과 같다.

JavaScript icon
JavaScript Array 변경 함수

24.01.20182 Min Read — In JavaScript

이직을 준비하면서 알고리즘을 공부하면서 느낀거지만 가 중요한 부분을 차지하고 있는거 같다. 그래서 Array 객체의 method 중에서 Array 를 변경할 수 있는 method 를 정리해볼까 한다. Array.prototype.push() 설명 예제 하나의 요소를 추가하는 경우 하나 이상의 요소를 추가하는 경우 Array.prototype.pop…

JavaScript icon
FRENDS Hackathon 2012 늦은 후기

20.04.20121 Min Read — In JavaScript

지난달 3 월 30 일 저녁 10 시부터 3 월 31 일 저녁 10 시까지 FRENDS Hackathon 2012 을 했다. 예전 한글과 컴퓨터에 포함되었던 산성비 게임을 웹으로 만들어 보면 재미있지 않을까해서 주제를 산성비 게임으로 정하고 만들어 보았다. 사실 3 월에는 둘째 출산으로 인해서 힘든 상태에 여러 귀차니즘이 발동을 해서 Hackathon…

JavaScript icon
Web Editor beforeunload event 적용하기

05.04.20121 Min Read — In JavaScript

현재 개발 하고 있는 사이트에서는 Tinymce Editor 를 사용하고 있는데 plugin 으로 Editor 을 사용중에 back space 를 누르거나 다른 페이지로 이동으로 하려고 할때 다음과 같은 modal…

JavaScript icon
Event Capturing Bubbling

03.04.20122 Min Read — In JavaScript

스터디를 진행하면서 다시 한번 알게 된것이 있어서 정리를 해볼까 한다. 보통 JavaScript 에서 click, over 등등... 이벤트가 발생하게 되면 target(예를들어 click 한 element) 에서만 이벤트가 실행 된다고 생각하고 있을것이다. 하지만 실질적으로 브라우저에서는 이벤트가 발생하게 되면 capturing 과 bubbling…

JavaScript icon
WYSIWYG Editor 만들기

02.12.20111 Min Read — In JavaScript

회사에서 작업하다가 bold, italic, underline 기능만 필요한 WYSIWYG 가 필요해서 어떻게 해야 할지 앞이 캄캄해서 그냥 오픈 소스를 써야 하나 했는데 역시 구글신이 간단한 방법을 알려줬다. contenteditable 사용해서 엘리먼트에 바로 편집이 가능하게 된다. 요것은 HTML…

JavaScript icon
JavaScript this란 무엇인가?

24.10.20113 Min Read — In JavaScript

JavaScript 를 개발할때 사용하거나 공부를 할때 해깔리고 어려운 부분중에 하나인 this 에 대해서 내가 아는 부분을 정리해 볼까 한다. 나 또한 this 에 대해서 많은 부분 해깔려 하던중 FRENDS 의 AJ( @andrwj )의 강의를 듣고 확실한 개념을 잡을 수 있었다. AJ( @andrwj )가 말하는 this…

JavaScript icon
JavaScript Console 사용하기

07.10.20114 Min Read — In JavaScript

Chrome, Firefox 에서 JavaScript 개발을 하더라도 console 창에서 log(), dir() 만 사용했었다. 위 동영상을 보고 console 에서 또 다른 기능 들에 대해서 알게되어 활용 할 수 있다면 JavaScript…

JavaScript icon
JavaScript Global 객체

07.10.20111 Min Read — In JavaScript

Global Object JavaScript 에는 Global Object 가 있다. 쉽게 말하면 JavaScript 에서 기본적으로 제공되는 전역객체 이다. 어떤것들이 있는지 알아보자. Array Boolean Date Function Number Object RegExp String JavaScript Core…