Javascript
-
클로저(Closures) 무엇인가? :: 마이구미Javascript 2018. 5. 29. 21:27
이 글은 클로저(Closures) 에 대해 다룬다.자바스크립트 개발 면접이라면, 필수적으로 물을 정도로 중요하다.참고보다 번역에 가까운 글이 되었다.참고 링크 - https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8 자바스크립트의 클로저는 입문자뿐만 아니라 중급자에게도 다소 어려운 개념이 된다.그렇기에, 클로저를 설명하기 위해 서론이 굉장히 길 수도 있다. 실행 문맥(Execution Context)어휘적 범위(Lexical Scope)함수를 통한 함수 반환(A Function that return a function)클로저(Closures) 심지어 모르고 있었더라도, 이미 클로저를 이용하고 있었을 지도 모르는 신기하..
-
Javascript: 타이머는 어떻게 동작하는가? :: 마이구미Javascript 2018. 4. 30. 00:16
이 글은 자바스크립트 내부에서의 setTimeout, setInterval 과 같은 타이머들의 동작을 알아본다.타이머들은 비동기로 처리되는데 이와 관련된 싱글 스레드, 비동기 처리등과 같은 또한 얻을 수 있을 것이다.참고 자료 - https://johnresig.com/blog/how-javascript-timers-work/ 글의 주제는 두 가지 의문을 가지고 글을 진행할 것이다. 첫번째 의문은 다음과 같다. 자바스크립트에서 타이머 관련 함수는 2가지로 볼 수 있다. setTimeout() - 일정 시간 뒤에 함수가 실행된다. * ms(1000분의 1초)setInterval() - 일정 시간마다 함수가 실행된다. 즉, 지연시간(delay)을 조작할 수 있다.하지만 100ms 후 실행을 원하는 함수가 있..
-
Javascript: prototype 이란 :: 마이구미Javascript 2018. 4. 22. 23:20
자바스크립트의 프로토타입(prototype) 에 대해 다뤄본다. 항상 필요할때마다 찾는 모습을 보니 완전히 내것이 아니라고 느껴 정리하게 되었다. 참고한 글은 오래된 글이지만 아직까지도 가장 잘 정리된 글이라고 생각한다. 참고 링크 - http://insanehong.kr/post/javascript-prototype/ 자바스크립트는 프로토타입이라는 용어를 뗄 수 없다. 그만큼 매우 중요하기에 확실히 이해해야한다. 하지만 자바스크립트 프로토타입은 많은 이들에게 혼란을 주기도 한다. 이유는 천천히 읽어보자. "자바스크립트의 프로토타입(Prototype)은 무엇인가?" 일반적으로 프로토타입(prototype)이란 시제품, 견본 등과 같은 의미로 일반적으로 원형이라는 뜻을 가진다. 질문은 "C++, JAVA ..
-
DOMContentLoaded, load, unload :: 마이구미Javascript 2018. 1. 3. 13:06
이 글은 문서의 로드 시점에 관련된 이벤트들을 다뤄본다.문서 로드 시점에 관련하여 onload 또는 jQuery 의 ready 를 접해봤을 것이다.로드 시점에 관련된 이벤트들을 통해 관련된 의문점들을 해결해본다.참고 링크 - http://javascript.info/onload-ondomcontentloaded 페이지 라이프사이클은 크게 3가지로 분류된다.로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때beforeunload / unload - 페..
-
이미지 미리 불러오기(image preload) :: 마이구미Javascript 2017. 12. 27. 20:12
이 글은 이미지를 미리 로딩하는 법에 대해 다룬다.흔히 이미지 프리로딩(Image Preloading) 이라고 불린다.참고 - https://www.photo-mark.com/notes/image-preloading/ 웹 사이트에는 많은 이미지가 존재한다.특히 갤러리 관련 페이지에는 더욱 많을 것이다.많은 자원을 통해 웹 페이지는 무거워질 수 밖에 없다.그에 대한 해결책으로 현재는 이미지의 크기, 질 등을 최소화하는 작업이 존재한다. 다른 방법 중에는 preloading 이 존재한다.용어 그대로 이미지를 미리 로딩해놓는다는 의미가 된다.즉, preloading 은 미리 로딩하고 캐시로 가져오게 하는 방식이다. preloading 을 구현하는 방법은 여러가지가 존재한다.자바스크립트를 활용한 대표적인 방법은..
-
Velocity.js: 스프라이트 이미지로 게임 만들기 :: 마이구미Javascript 2017. 12. 16. 23:57
이 글은 Velocity.js 을 통해 스프라이트 이미지를 조작해본다.Velocity.js 는 애니메이션을 보다 쉽게 구현하고, 빠른 성능을 낼 수 있는 라이브러리다.Velocity.js 의 기본적인 사용법을 알리기 위해 만든 예제이다.Velocity.js 사용 예제 - https://codepen.io/mygumi/pen/baGVRWVue.js 버전 예제 - https://codesandbox.io/s/vj2ymr9p2y공식 사이트 - http://velocityjs.org/ Velocity.js 는 무엇인가? jQuery의 $.animate() 와 동일한 API를 사용하는 애니메이션 엔진이다.jQuery와 함께 사용할 수도 있지만, 독립적으로 사용할 수도 있다. 오래 전부터 $.animate() 와 ..
-
use strict에 대한 이해 :: 마이구미Javascript 2017. 11. 17. 18:22
이 글은 'use strict' 에 대해 다룬다.단순히 엄격 모드라고 알려진 더 나은 오류 검사를 위한 방법이다.참고 링크 - https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-ituse strict 문서 - https://msdn.microsoft.com/ko-kr/library/br230269(v=vs.94).aspx 'use strict' 즉, 엄격 모드는 ES5부터 새로운 기능이다.Lint를 통한 에러 또는 다른 개발자의 코드를 통해 'use strict' 가 타이핑되어 있는 것을 경험했을 것이다. 엄격 모드를 사용하는 방법은 어떻게 되는가? ..
-
ES6 class 도입에 대한 이해 :: 마이구미Javascript 2017. 10. 18. 15:43
이 글은 ES6에서 도입된 class 키워드에 대한 이해를 도울 것이다.광범위하고 깊은 내용이 많기에, 다소 간략하게 다룬다.자세한 사항은 관련 링크를 참고하길 바란다. 자바스크립트는 ES6에서 class 키워드가 도입되었다.class, super, extends, static 등 class 기반의 키워드들이 도입되었다.클래스 기반에 익숙한 사용자에게는 좋은 소식이지만, 한편으로는 많은 비평이 존재한다. Why? 왜 class 도입에 대해 많은 이야기가 오고가는 것인가? 우선 자바스크립트가 나온 시점으로 돌이켜보자.클래스 기반 언어인 C++ 또는 JAVA 개발자가 자바스크립트는 다룬다면, 과거에나 현재에나 비슷한 의문과 혼란을 가진다.(간단히 말하자면, 동적 언어라는 것과 클래스가 존재하지 않는다는 점이..