Javascript
-
[러닝 자바스크립트] 변수와 상수 :: 마이구미Javascript 2018. 12. 22. 20:51
자바스크립트의 대해 책 한 권을 통해 정리하면 좋겠다고 생각한 것을 다룬다.전체적으로 다루는 것이 아닌, 하나의 주제를 다룰 예정이다.이 글은 "변수와 상수 중 어떤 것을 써야 할까요?" 를 중점으로 한다. 이전에도 비슷한 걸 다룬 적이 있다. let, const 키워드를 모른다면, 읽으면 도움이 될 것이다.- let vs const 도서는 대부분 사람들이 추천하는 책으로써, 많이 알려져있다.- 러닝 자바스크립트(Learning JavaScript) 이 책의 3장 "리터럴과 변수, 상수, 데이터타입" 에서는 다음과 같은 질문이 있다. "변수와 상수 중 어떤 것을 써야 할까요?" 대답은 "변수보다 상수를 써야한다."본인은 이것을 이해하기 위해 우선 "변수와 상수가 무엇을 뜻하는가?" 과 "변수와 상수를 왜..
-
Javascript: isNaN() 동작원리 및 주의사항 :: 마이구미Javascript 2018. 11. 11. 22:42
이 글은 자바스크립트 네이티브 함수인 isNaN() 를 다룬다.isNaN() 사용에 있어, 동작 원리와 이에 따른 주의사항을 알아본다.공식 문서 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN#special-behavior참고 링크 - https://stackoverflow.com/questions/115548/why-is-isnannull-false-in-js isNaN() 함수는 대부분 많이 사용하거나, 익숙할 것이다.NaN 는 Not a Number 으로써, 숫자가 아닌 것으로 정의하고 있다.그로인해, 타입이 숫자인지 아닌지를 판별할 경우 많이 사용한다. isNaN(1) // falseisNaN..
-
Binary data to RGB in canvas :: 마이구미Javascript 2018. 11. 5. 21:05
이 글은 javascript 로 원시 이진 데이터(raw binary data)를 조작하여 canvas 를 통해 이미지를 출력한다.흔하게 경험하는 것도 아니고, 사용하는 일도 많지는 않다.하지만 글을 통해 기본적인 canvas 원리와 binary 이해에 도움이 되리라 생각한다. raw 데이터로써, 바이너리 형태인 파일이 존재한다.즉, 이 raw 데이터의 파일은 이미지 포맷(png, jpg, etc..) 형태도 아닌, RGB 형태도 아니다.이러한 raw 데이터를 가지고, 흑백 이미지를 출력할 것이다. 대부분 이미지 포맷이 된 형태의 파일을 넘겨받기 때문에, 앞단에서는 대부분 이러한 행위를 하지 않는다.하지만 자바스크립트에서 raw 데이터를 조작하는 것이 점차 늘어가고 있고, 늘어갈 것이다.아무튼 이 글에서..
-
removeEventListener, this 동작 :: 마이구미Javascript 2018. 9. 20. 14:19
이 글은 removeEventListener 관련된 주제로 글을 다룬다.이벤트 리스너를 관련해서 원하는 결과를 얻지 못한 경험이 있다면, 읽어보길 바란다.그리고 자연스럽게 this 와 call, bind, apply 와 같은 메소드를 익힐 수 있을 것이다.참고한 링크 - https://kostasbariotis.com/removeeventlistener-and-this/ 글을 진행하기 전에, 사전에 필요한 것들을 많은 용도가 있지만 여기서는 간략히 다뤄본다. addEventListenerremoveEventListenerbindcall, apply 이벤트 리스너 등록을 위해 addEventListener 메소드를 사용한다.등록된 이벤트 리스너를 제거하기 위해 removeEventListener 메소드를 ..
-
Javascript: hasOwnProperty 쓰는 이유 :: 마이구미Javascript 2018. 8. 31. 11:03
이 글은 자바스크립트 객체의 네이티브 메소드 중 하나인 hasOwnProperty 를 다룬다.간혹 코드에서 사용하는 모습을 경험했을 것이다.언제 써야하는지? 왜 쓰는지? 에 의문을 가지고 있다면 이 글을 읽어보길 바란다.MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty 우선 hasOwnProperty 메소드가 하는 일은 객체가 특정 프로퍼티에 대한 소유 여부를 반환한다. const obj = { a: 1 }; obj.hasOwnProperty("a"); // true obj.hasOwnProperty("b"); // false 해당 객체에 특정 프로퍼티가 존재하면 t..
-
[Async function] async/await 비동기 처리 :: 마이구미Javascript 2018. 8. 22. 11:51
이 글은 ES8(ECMA2017) 스펙에서 정의된 async/await 키워드를 다뤄본다.async/await 를 사용하기 위해서는 Promise 의 이해는 필요하다.이 글에서는 다루지 않고, 오로지 async/await 에 초점을 맞춰 예제 위주로 진행한다.실질적인 사용에 있어, 도움을 줄 수 있는 글이 될 것이라 생각한다.참고한 글 - https://developers.google.com/web/fundamentals/primers/async-functions ES8 에서 정의된 비동기 함수(async function) 는 용어 그대로, 비동기 처리를 위함이다.async/await 를 사용하는 가장 큰 이유는 코드 품질의 향상이다.코드를 읽기 좋게 해주고, 작성에 있어서도 굉장한 간결함을 나타낸다. ..
-
Javascript:Shallow and Deep Copy :: 마이구미Javascript 2018. 6. 18. 11:08
이 글은 자바스크립트에서 객체 복사에 대해 다룬다.크게는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 로 분류된다.본인은 단순히 두가지의 복사에 대해 참조 여부로 판단하고있었다.그로 인해, 이번 포스팅 과정에서 오해와 명확하지 않은 것들이 많이 존재했다.글을 읽는다면, 복사에서 더 나아가 조금 더 자바스크립트를 이해할 수 있을 것이다.참고 링크 - https://scotch.io/bar-talk/copying-objects-in-javascript 단순 복사 객체 복사에 있어, 가장 순수하게 생각할 수 있는 것은 대입 연산자(=) 를 통한 복사이다.이것은 단순 복사라고 칭하겠다. let mainObject = { a: 1, b: 2}; let copyObject = mainObje..
-
focusout, blur 이벤트 차이와 이해 :: 마이구미Javascript 2018. 6. 9. 15:35
이 글은 focusout 와 blur 의 차이점을 알아보고, 이벤트 발생에 있어, 주의사항을 다뤄본다.다음과 같은 의문 또는 버그가 발생했다면, 글이 도움이 될 것이다.focusout 과 blur 의 차이를 알고 싶다.focusout 또는 blur 를 사용중 다음과 같은 에러가 발생했다. "Uncaught DOMException: Failed to execute 'remove' on 'Element': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?" focusout 과 blur 의 차이 focusout 는 의미 그대로 엘리먼트가 포커스를 잃었을 때 발생되는 이벤트..