JavaScript/ETC 썸네일형 리스트형 babel babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. babel-polyfill babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한.. 호이스팅 아래의 코드를 실행하면, onclick 안의 i는 6이 되기 때문에 onclick이벤트 시, i를 활용하지 못한다. window.onload = function() { var $wrap = document.getElementById('wrap'); var $nav = document.getElementsByTagName('nav')[0]; var $nav_li = $nav.getElementsByTagName('li'); var len = $nav_li.length; console.log(len); for (var i = 0; i < len; i++) { $nav_li[index].onclick = function() { $wrap.className = 'box' + index; for (var k = .. Naver ESLint 적용 프로젝트를 총 세명이 진행하다보니, 다들 코드 스타일이 달랐다. 코드의 품질을 높이고, 좋은 코딩 스타일을 익히기 위해 eslint를 프로젝트에 적용하기로 했다. https://github.com/naver/eslint-config-naver naver/eslint-config-naver Naver JavaScript Coding Conventions rules for eslint - naver/eslint-config-naver github.com eslint 는 Airbnb를 기반으로 한 naver eslint를 적용하기로 하였다. # 적용 순서 1. 프로젝트에 eslint를 설치한다. yarn add eslint -D 2. 설치가 완료되었다면, IDE(phpstorm 사용)에 eslint를 설정한다.. 불변성 우리가 sameArray = array 를 했다고 해서 기존에 있던 배열이 복사되는것이 아니라 똑같은 배열을 가르키고 있는 레퍼런스가 하나 만들어진 것이기 때문에, 우리가 sameArray 에 push 를 하게 된다고 해서 array 와 sameArray 가 달라지지 않는다. const array = [1,2,3,4]; const sameArray = array; sameArray.push(5); console.log(array !== sameArray); // false 하지만, 우리가 불변성을 유지하려면 아래와 같이 작성해야 된다. const array = [1,2,3,4]; const differentArray = [...array, 5]; // 혹은 = array.concat(5) console... Object.entries() Object.entries()메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른 점은 프로토 타입 체인의 속성도 열거한다는 점이다.) const object2 = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(object2)[2]); // expected output: Array ["2", "c"] 고수의 코드를 염탐하다 Object.entries()를 신기하게 활용하는 코드조각을 보았다. * 예시 const temp = { fn1(event) { console.log("fn1테스트 입니다."); }, fn2(event) { console.log(".. 자바스크립트 비동기 처리와 콜백함수 비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 처리의 첫번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다. function getData() { var tableData; $.get('https://domain.com/products/1', function (response) { tableData = response; }); return tableData.. async.js Node.js 프로그래밍을 하다보면 여러 단계로 중첩된 콜백함수 처리에 대한 문제를 겪게 된다. 이를 "Callback Hell" 이라고 부른다. 여러겹의 중첩된 비동기 콜백 함수 문제는 최초 콜백 함수 내부에서 콜백함수를 호출하고, 그 콜백함수에서 또 다시 콜백 함수를 호출하고, 이런식으로 콜백함수가 계속 중첩되는 상황에서 발생한다. 콜백함수의 중첩단계가 늘어날수록 코드는 지저분해지고 결국엔 가독성에 심각한 문제를 갖게되어 관리 불가능의 상태가 될 수도 있다. Node.JS의 써드파티 모듈 라이브러리들중 중첩 콜백 문제를 처리하기 위한 다양한 비동기 제어 모듈들이 있는데 그 중 가장 많이 활용되고 있는 모듈이 Async 모듈이다. Async에 대한 Reference Site에 접속해 보면 크게 3종류로.. this this 작성 시점이 아닌 런타임 시점에서 바인딩 되며 함수 호출 당시 상황에 따라 콘텍스트가 결정 된다.함수 선언 위치와 상관 없이 this 바인딩은 오로지 어떻게 함수를 호출했느냐에 따라 정해진다.어떤 함수를 호출하면 실행 콘텍스트가 만들어지는데, 여기엔 함수가 호출된 근원과 호출 방법, 전달된 인자 등의 정보가 담겨있다. this 레퍼런스는 그 중 하나로, 함수가 실행되는 동안 이용할 수 있다. 이전 1 2 3 다음
