드리프트의 코-자-경(코딩, 자동차, 경제)

안녕하세요? 자바스크립트 ES6에 대해 제가 쓴 블로글을 모아 봤습니다. 많은 도움이 되었으면 하네요. 자바스크립트 ES6 - 배열의 디스트럭쳐링(구조 분해 할당) 자바스크립트 ES6 - 객체의 디스트럭쳐링(구조 분해 할당) 자바스크립트 ES6 - 스프레드 연산자(spread operator) 이해 자바스크립트 ES6 - 나머지 매개변수(rest parameters) 이해 자바스크립트 ES6 - 디폴트 파라미터(default parameters) 자바스크립트 ES6 - 모듈(modules)

자바스크립트 윈도우 객체, javascript window global object, window, this, global 안녕하세요? 이번 시간에는 지난 시간에 이어 Execution Context에서 생성되는 글로벌 객체(window)에 대해 알아보겠습니다. 글로벌 객체(window)가 뭔지 코드를 보면서 알아보기 위해 지난 시간처럼 index.html 파일과 index.js파일을 준비하겠습니다. index.html 파일입니다. index.js 파일입니다. // 빈 줄 이렇게 두 개의 파일을 준비하고 현재 폴더를 http 서빙하기 위해 다음과 같이 실행합니다. serve . 이제 모든 준비가 끝났네요. 이제 크롬을 열고 크롬 devtools로 들어가 보겠습니다. index.js가 빈 줄이라서 아무것도..

Javascript Hoisting, 자바스크립트 호이스팅 안녕하세요? 지난 시간에 배운 Execution Context에 이어 이번에는 자바스크립트의 호이스팅(Hoisting)에 대해 알아보겠습니다. 먼저, 지난 시간의 핵심 부분만 복습하고 다음으로 진행하겠습니다. 자바스크립트의 모든 것은 바로 Execution Context안에 싸여 있다고 말할 수 있으며, 약간은 추상적인 콘셉트로 들릴지 모르겠지만 자바스크립트 모든 코드가 실행되는 주위 모든 환경의 정보를 전부 가지고 있는 커다란 컨테이너? 또는 박스?라고 볼 수 있습니다. Execution Context는 두 가지 단계(Phase)를 가지는데요. 하나는 Memory Allocation Phase, 다른 하나는 Code Execution Phase..

자바스크립트 Execution Context, Synchronous Single Thread Language 안녕하세요? 오늘은 자바스크립트를 처음 배울 때 한 번쯤은 배우고 지나가면 큰 도움이 될만한 기초 개념을 알아볼 예정인데요. 바로 자바스크립트가 작동하는 방식, 작동 원리에 대해 간단히 알아보겠습니다. 자바스크립트를 가장 잘 표현한 영어 문구는 위와 같이 "동기식 싱글 스레드 언어(Synchronous Single-Threaded Language)"가 아닐까 싶은데요. 동기식이란 현재의 명령어가 실행 완료가 다돼야 다음 행으로 이동한다는 뜻이며, 동기식이란 말은 특정 순서에 의해 한번에 하나의 명령어만 수행한다는 뜻입니다. 지금은 자바스크립트로 비동기식 프로그래밍이 유명한데 무슨 말씀이냐고 하실 ..

안녕하세요? 오늘은 자바스크립트에서 가장 많이 쓰이는 객체인 배열의 연산 관련 함수인 map, filter, reduce에 대해 알아보겠습니다. React로 웹 프로그래밍할 때 가장 많이 쓰는 게 아마 map 함수 일 건 대요. 자바스크립트는 배열을 이용하여 쉽게 데이터를 가공할 수 있게 하는 헬퍼 유틸을 많이 가지고 있습니다. 위의 첫 그림을 보시면 find, findIndex, indexof 같은 함수는 딱 봐도 쉽게 이해할 수 있는데요. 오늘은 자바스크립트 코딩 초창기에 느꼈을 법한 map, filter, reduce에 대해 아주 쉽게 알아보겠습니다. Map 먼저, map 함수입니다. MDN에 나와있는 문법인데요. 읽어보면 너무 어렵습니다. map함수를 쉽게 이해하려면 예제를 들어서 이해하면 쉽습니..

안녕하세요? 오늘은 자바스크립트 프레임워크에 대해 알아 보겠습니다. 20년전 초장기에는 jQuery가 웹 개발에서 차지하는 비중이 대단했었는데요. React가 나오면서 자바스크립트 프레임워크 세계에서 일대 혁명을 일으켰습니다. 사실 Angular 가 먼저 붐을 일으켰지만 Angular는 너무 어려워서 React가 대세가 되었죠. React의 Virtual DOM 이 대 유행하면서 Vue가 나왔고, 중국을 위주로 Vue가 React를 추격하는 모양새가 되었지만, 미국을 중심으로한 React의 아성에는 못 미치고 있습니다. 최근에는 Svelte 등 여러가지 자바스크립트 프레임워크가 나오고 있으며, 각각 React의 아성에 도전하려고 노력하고 있습니다. 그래서 오늘은 자바스크립트 Todo 앱을 통해 각각의 프..

안녕하세요? 오늘은 자바스크립트나 NodeJS에서의 모듈(Module)에 대해 살펴보겠습니다. 먼저, 요즘 프런트엔드 쪽에서 많이 쓰는 React나 Vue 등은 NodeJS를 사용해서 웹페이지를 만드는데요. 그래서 먼저 NodeJS 쪽 모듈 import 및 exports에 대해 알아보겠습니다. 자바스크립트 표준 규격 체계인 ECMAScript 에는 모듈을 import export 하는 방법에 대한 규칙이 있는데요. 예전에 쓰인 방법이 CommonJS 방법입니다. CommonJS는 require, module.exports 명령어를 써서 모듈 관리를 하는 거라고 이해하시면 쉽고요. ES5나 ES6에서의 ES 모듈 처리 방식은 최근에 ECMAScript가 개정되면서 추가됐는데요. ES 모듈 처리 방식이 더 ..

안녕하세요? 오늘은 자바스크립트에서 가장 많이 쓰이는 배열에 대해 알아볼 건데요. 그중에서도 배열의 항목을 무작위로 섞는 방법을 알아보겠습니다. 일명 array.shuffle 함수를 만들어 보겠습니다. 1. Array.sort() 함수 사용 let arr = [1, 2, 3]; 일단 arr 배열이 위와 같이 숫자 1,2,3으로 세팅하겠습니다. 자바스크립트 Array 객체에는 sort() 함수가 있습니다. 기본적인 문구는 아래처럼 compareFunction을 두어 어떻게 순서를 결정할 것인지에 대한 함수를 넣어주는데요. arr.sort([compareFunction]) compareFunction의 예는 다음과 같습니다. function compare(a, b) { if (a is less than b ..

목차 1. 함수 선언 (Function declaration) 1.1 일반적인 함수 1.2 함수 표현식과의 차이점 1.3 조건문에서의 함수 선언 2. 함수 표현식(function expression) 2.1 명명된 함수 표현(Named function expression) 2.2 선호된 명명된 함수 표현식(Favor named function expression) 3. 약식 메서드 정의 3.1 계산된 속성 이름 및 메서드(Computed property names and methods) 4. 애로우 함수(Arrow function) 4.1 콘텍스트 투명성(Context transparency) 4.2 짧은 콜백 5. 제너레이터 함수(Generator function) 6. new Function 함수는 ..

목차 1. 호이스팅이란 2. 함수 범위(function scope) 변수: var 2.1. 호이스팅과 var 3. 블록 범위(block scope) 변수: let 3.1. 호이스팅과 let 4. const 4.1. const 호이스팅 5. 함수 선언(function declarations) 6. 클래스 선언 안녕하세요? 우리가 자바스크립트나 다른 랭귀지로 코드를 짤 때 제일 중요한 것 중 하나가 바로 변수인데요. 변수란 서로 상호 작용하는 작은 데이터 또는 논리 조각이라고 볼 수 있습니다. 이러한 변수의 활동으로 프로그램(애플리케이션)이 작동되는 것이죠. JavaScript 변수의 중요한 측면은 바로 그 변수에 액세스 할 수 있는 시점을 정의하는 호이스팅(Hoisting)이라 할 수 있습니다. 이제 본격..