Javascript
-
Arrow Function(화살표 함수)이란? :: 마이구미Javascript 2017. 10. 4. 23:42
이 글은 ES6 문법 중 하나인 Arrow Function(화살표 함수) 를 다뤄본다. 완벽히 숙지하지 않고 사용한다면, 예기치 못한 오류가 발생할 수 있다. 글을 이해하기 위해서는 this 에 대한 이해가 필요하다. this 공식 문서 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this ES5 이하는 지원하지 않는다. // 함수 표현식 function () {} // 화살표 함수 표현식 () => {} 현재 ES6를 대부분 알고 있거나, 사용하고 있다고 볼 수 있다. 그 중 가장 많이 사용하는 것이 let, const, arrow function 이 아닐까 생각한다. 깊게 보지 않는다면, 단순히 짧게 표현하..
-
Typescript 써야할까? :: 마이구미Javascript 2017. 9. 9. 01:19
이 글은 Typescript 도입 과정 중 일어난 경험을 통해 작성된다.Typescript 도입을 고민한다면, 참고하면 좋을 것이다.개인적인 견해임을 참고바란다.참고한 링크 - the shocking secret about static types 본인은 프론트 쪽을 Vue.js를 도입한 후, 서버쪽을 구현하기에 앞서 고민했다. "서버 쪽도 새로운 시도를 해보면 어떨까?" 그 결과 Typescript 도입을 고민해보았다.요즘 Typescript 사용량에 있어서도, Angular 영향이 크더라도 증가하는 추세이다. 그렇다면 도대체 Typescript란 무엇인가? Typescript는 MS에서 만든 자바스크립트의 상위 언어로써, 서로 다른 언어가 아니다.큰 차이는 정적 타입과 동적 타입이라고 볼 수 있다. 포..
-
jQuery 더이상 쓰지 않아야하는가? :: 마이구미Javascript 2017. 8. 28. 01:13
이 글은 "이제와서 JQUERY를 쓰면 안되는 이유, 혹은 JQUERY와 웹개발의 역사" 글이 계기가 되었다. 조금 지난 글이지만, 많은 공감을 샀다. 참고로 글도 글이지만, 댓글이 훨씬 영양가가 풍부하다. 작성되는 글은 개인적인 견해이다. 글의 제목인 "jQuery 더이상 쓰지 않아야하는가?" 에 대한 본인의 답은 다음과 같다. 그렇다. 조금만 쓰자... 아니 그냥 없애자. 아니 왜..? 10년이 넘게 사용되어왔고, 아직도 쓰고 있는데... 수많은 jQuery 코드는... 그렇다. jQuery는 자바스크립트라고 할 정도로 많이 사용해왔다. javascript 문법 말고 jQuery부터 공부해. 어차피 jQuery 밖에 안써. 위와 같은 말이 나올 정도로, jQuery는 대중적이였다. 자바스크립트 또는 ..
-
자바스크립트 엔진이란? 렌더링 엔진이란? :: 마이구미Javascript 2017. 6. 22. 01:14
이번 글은 자바스크립트 엔진(Javascript Engine)과 렌더링 엔진(Rendering Engine)에 대해 다뤄본다.정의와 오해를 알아본다. 자바스크립트 엔진이란 무엇인가?자바스크립트 코드를 실행하는 인터프리터 또는 프로그램이라고 볼 수 있다.전형적인 인터프리터의 역할 및 JIT 컴파일 활용 및 많은 기능을 하고, 주로 웹 브라우저를 위해 사용된다. 대중적으로 알려진 자바스크립트의 엔진은 구글의 V8이라고 들어봤으리라 생각한다.Node.js에서 사용되는 엔진이기도 하다.엔진의 종류로는 아래와 같다. (이미 잘 알려진 브라우저를 기준) Rhino - 모질라SpiderMonkey - 파이어폭스V8 - 구글, 오페라JavascriptCore - 사파리Chakra - 익스플로러, 마이크로소프트 엣지 간..
-
Do not use 'new' for side effects :: 마이구미Javascript 2017. 6. 13. 22:00
이번 글은 Linter에서 검출해주는 에러 중 하나인 "Do not use 'new' for side effects" 에 대해 다뤄본다.관련 에러는 new 키워드에 대한 에러 검출이다.대부분 Linter에서 발생되는 에러이지만, 본인은 standard.js 를 기준으로 한다는 점을 참고바란다. Do not use 'new' for side effects 에러는 new 키워드를 통해 인스턴스를 생성하는 과정에서 발생한다.위와 같은 에러가 뜨는 코드는 아래와 같다. new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }) or new App() 이러한 코드는 인스턴스 생성만이 목적일 때(main.js 또는 app.js), 간결하게 많이 사용된다.하지만, 일..
-
jQuery $.each() 주의사항 :: 마이구미Javascript 2017. 6. 12. 21:00
이번 글은 jQuery의 함수인 each의 주의사항을 다뤄본다.each 함수는 기본적으로 for문이라고 봐도 무방하다.jQuery에서 제공하는 일반적인 iterator function 이다. callback 개념이 부족하다면 발생할 수 있는 경우와, each 함수의 return에 대해 알아볼 것이다. 반복문을 쓰는 이유 중 하나의 예로, 배열에 있는 값 중 원하는 값을 찾기 위해 루프를 돌린다고 가정하자.코드는 아래와 같다. someArray = new Array(); someArray[0] = 't5'; someArray[1] = 'z12'; someArray[2] = 'b88'; someArray[3] = 's55'; someArray[4] = 'e51'; someArray[5] = 'o322'; s..
-
getter setter in ES6 :: 마이구미Javascript 2017. 5. 19. 23:55
이번 글은 getter와 setter를 다뤄본다.getter와 setter에 대한 자료는 이해할 수 없는 글들과 궁금증을 해결시켜주는 못하는 글들이 대부분이다.도대체 왜 getter와 setter 굳이 왜 쓰는지? 왜 써야하는거지? 대한 궁금증에 도움이 되는 글이 쓰겠다.예제는 ES6 기준으로 진행하지만, 언어와 상관없이 봐도 무관하다. getter와 setter를 언급한다면, 대부분 private 개념이 따라오게 된다.책이나 글에서 볼 수 있는 극단적인 예는 아래와 같다.private 변수를 지정한 후, 이 변수에 접근하기 위해 getter, setter를 이용한다.맞는 말이다. 하지만 이해하기 힘들 거라고 생각한다. 다음 예제를 통해 확인해보자.1. name을 저장할 때는 정확한 값일 때 저장한다.2..
-
Array-like objects [javascript] :: 마이구미Javascript 2017. 4. 21. 19:58
이번 글은 자바스크립트에서의 "Array-like objects" 를 다뤄본다.Array-like objects 익숙하지 않는 용어일 수도 있다.그대로 해석하면 배열 같은 객체? 한번 알아보자. 자바스크립트에서 몇몇 객체는 배열처럼 보이지만, 실제로 배열은 아니다.이것이 바로 Array-like objects 라고 불린다. Array-like objects의 조건은 아래와 같다.배열처럼 인덱스로 접근이 가능하고, length 속성이 존재한다.실제 배열의 네이티브 메소드인 push, forEach, indexOf 와 같은 메소드는 존재하지 않는다. (Array Document) Array-like objects의 두가지 예로는 아래와 같다.document.getElementsByClassName() 의 결..