본문 바로가기

Dev.FrontEnd

 (51)
[JS] JavaScript의 Event Loop [JS] Javascript 작동 원리에 대해서, Event LoopJavscript를 공부하다 보면 이런 말을 종종 듣는다. 싱글스레드 기반으로 동작하는 자바스크립트 이벤트 루프를 기반으로 하는 싱글 스레드 Node.js 이런 말은 많이 들었지만 구체적으로 내부 원리에 대해 간단하게라도 설명하는 글은 보기 힘들다. (초심자 입장에서는 쉬운 내용이 결코 아니라고 생각한다.) 이번 포스팅에서는 "정말 싱글 스레드인가?", "싱글 스레드의 정체는 무엇이며, 어떻게 싱글 스레드인가?" "이벤트 루프는 또 무엇인가?" 등등에 대해 정말 간단히 알아보기 위해 자바스크립트가 동작하는 환경(Environment)과 자바스크립트를 해석하고 실행시키는 엔진에 대해서 알아본다. Javascript Engine ?일단 한 ..
[ES6] 부록. ECMAScript 2015 개발환경 Setting with Webpack, ESLint ECMAScript 2015 개발환경 Setting with Webpack and ESLint ES6 문법으로 자바스크립트 코드를 작성하는 것이 간결하지만, 현재 모든 브라우저에서 완벽하게 ES6 문법을 지원해주지 못하고 있다. 그렇기에 개발자들은 ES6로 작성된 코드를 이전의 문법인 ES5 문법으로 transpile하여 배포해야하는 경우가 발생했다. 이를 도와주는 것이 babel 이라는 npm이 있다. 하지만 여기서 한 발짝 더 나아가 bundle 기능까지 함께 제공하는 ( 원래 주가 bundle 기능이다. ) webpack을 활용하여 transpile 하자. webpack은 이 두 가지 기능 이외에도 정말 다양한 기능을 갖고 있다. 또한 ESLint를 이용하여 보다 우아한 ES6에 맞는 자바스크립트 ..
[ES6] 7. Module system Chater 7. Module System Module이란ES6의 모듈은 Javascript 코드를 담고 있는 파일을 말한다. global scope에서의 변수명 충돌을 방지하기 위해 모듈화 방식을 사용한다.ES6 모듈은 모듈안에서 자동적으로 strict 모드로 처리되며 모듈안에서는 import, export 키워드로 모듈을 노출시키거나 불러올 수 있다. 모든 import와 export 구문은 모듈의 작성된 코드의 top level에만 올 수 있다. 조건적으로 import하거나 export할 수 없으며 import 구문을 함수 스코프에서 사용할 수도 없다. export 구문은 명시적인 이름으로 export 되어야 한다. 배열을 순회한다던가의 방법은 사용할 수 없다. 단 중괄호 안에 한꺼번에 여러 개의 모..
[ES6] 6. Class sugar syntax and Template Strings Chapter 6. Class sugar syntax and Template Strings 기존의 자바스크립트에서는 캡슐화를 하기 위해 constructor function을 사용하였다. 이를 보완하기 위해 class 문법이 등장하였다. class라는 키워드로 말 그대로 클래스를 생성할 수 있게 된 것이다. 이것은 새로운 객체 모델이 아니라 기존에 사용했던 프로토타입 객체 지향의 문법을 class 기반인 것처럼 wrapping 한 문법이다. sugar syntax라고도 한다. ES5>>12345678function SponsorWidget(name, description, url){ this.name = name; this.description = description; this.url = url;}Sp..
[ES6] 5. Collection - Map, Set Chapter 5. Collection - Map, SetMap Maps는 key-value 쌍으로 이루어진 자료구조이다. key들은 중복될 수 없으며, 하나의 키에 하나의 value만 올 수 있다. maps를 이용하여 객체를 사용할 때, 객체의 key들은 항상 string 으로 변환된다. code> 12345678910111213141516//user1, user2라는 다른 두 객체를 생성하자.let user1 = { name : “Sam” };let user2 = { name : “Tyler” }; //그리고 totalReplies라는 객체에 두 객체를 key 값으로 value값을 추가하자.let totalReplies = { };totalReplies[user1] = 5;totalReplies[us..
[ES6] 4. Array, Symbol Chapter 4. Collection - Array, Map and Symbol Array배열의 여러 요소에 접근하기 위해 destructuring을 사용할 수 있다.ES5>>1234567let users = [“Sam”, “Tyler”, “Brook”]; let a = users[0];let b = users[1];let c = users[2]; console.log(a,b,c); // Sam Tyler Brookcs ES6>>12345678910let users = [“Sam”, “Tyler”, “Brook”]; let [a, b, c] = users;console.log(a,b,c); // Sam Tyler Brook let [a, ,b] = users;console.log(a, b); // Sa..
[ES6] 3. Object shorthand, destructuring, assign Chapter 3. Object ShorthandES6에서는 객체를 반환하는데 있어서 불필요한 반복을 없앴다. key, value 형식으로 object의 프로퍼티를 추가했다면, shorthand 방식으로도 가능해졌다. 함수에서 반환하는 형식에서 뿐만 아니라 객체 그 자체를 정의하는데에도 사용할 수 있다. 물론, 객체의 프로퍼티 명과 지역변수의 명이 같아야 한다. ES5>> 123456789function buildUser(first, last){ let fullName = first + “ “ + last; return { first : first, last : last, fullName : fullName };}let user = bulidUser(“Sam”, “Williams”); console.lo..
[ES6] 0. Intro Intro기존에 우리가 적응되어 있는 자바스크립트 문법은 ECMA Script 3.1로 발표되고, ECMAScript 5라고 부르고 있는 것에 기반하고 있다. 그리고 나서 수년간에 걸쳐 수많은 문제점을 해결한 새로운 문법이 발표되었다. 기존의 문법에 기반하면서 여러 가지가 추가된 것이다. 너무 여러 가지가 추가되다 보니 새로운 언어같은 느낌이 들 정도이다. ES6, ECMA6, ECMA 2015 여러 가지로 불리고 있으며 공식 명칭은 ECMA Script 2015이다. 더이상 ECMAScript2015 문법으로 자바스크립트 코드를 작성하는 것은 선택이 아닌 필수가 되어가고 있다. 프론트 엔드에 위치하는 코드들이 거대해지고 복잡해지면서 여러 가지 부족한 요소가 드러나고 그에 대응한 문법들이 추가되었기 때문..

티스토리툴바