Web Club

해체할당(구조분해할당, 디스트럭쳐링)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. destructuring assignment는 한 마디로 정의하기 어렵다고 합니다. 이 용어에 대한 번역이 여전히 뜨거운 감자로 의견이 분분한 가운데 구조분해 할당란 용어에 무게가 실리고 있지만 책마다 제각기 다른 용어들을 사용하고 있기 때문에 유사한 용어들로 쓰이고 있다라는 정도만 숙지하고 의사소통하는 데에 유사한 용어를 사용하면 크게 문제될 것은 없을 것입니다. destructuring assignment 여기서는 위에서 언급한 여러 용어들 중에 혼동을 줄이고자 해체할당이란 용어를 사용해 이 문법에 대해 살펴보도록 하겠습니다. 해체 할당이란? 해체 할당이란 말 그대로 해체하였다가 해체..

JavaScript/ES6+ 2021. 2. 26. 18:46

name property of function

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. 이번 장에서는 함수의 name 프로퍼티와 new.target 이라는 함수의 부가적인 내용들에 대해 알아보도록 하겠습니다. name property of function 함수의 name 프로퍼티는 주로 디버깅하는 경우에 사용하지만 name 프로퍼티를 가지고 디버깅을 할 사항이 거의 없기 때문에 간단히 알아보고 넘아가 보겠습니다. 아래의 다양한 함수 리터럴 표기법에 따른 name 프로퍼티가 어떻게 달라지는지 알아보자. js // 함수 선언문 function a () { } console.log(a.name); // 함수 표현식(변수 b 에 익명함수를 할당) const b = function ..

JavaScript/ES6+ 2021. 2. 26. 18:45

화살표 함수(Arrow function)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. Arrow Function(화살표 함수) 다음의 ES5 의 함수 표현식과 es2015 의 화살표 함수를 비교해 보도록 하자. ES5 js var a = function () { return new Date() }; var b = function (a) { return a * a }; var c = function (a, b) { return a + b }; var d = function (a, b) { console.log( a * b ) } ES6(es2015) JS let a = () => { return new Date() }; let aa = () => new Date(); let..

JavaScript/ES6+ 2021. 2. 26. 18:41

enhanced object functionality

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. 계산된 프로퍼티명, 고정된 프로퍼티 열거 순서 먼저 계산된 프로퍼티명에 대한 내용을 알아보도록 하자. computed property name (계산된 프로퍼티명) 다음의 계산된 프로퍼티명에 대한 예제를 살펴보면서 알아보자. js var className = ' Class'; var obj = {}; obj.'ab cd' = 'AB CD'; // 잘못된 문법 obj['ab cd'] = 'AB CD'; // 올바른 문법 console.log( obj ); obj = { 'ab cd' : 'AB CD' }; // 규칙이 혼동스러운 부분 var obj2 = { 'A' + className : ..

JavaScript/ES6+ 2021. 2. 26. 18:39

shorthand property, concise method

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. es2015 로 넘어오면서 객체를 사용함에 있어 편리성, 간결성과 더불어 다양하게 향상된 기능들을 제공해 주고 있어 이에 대해 알아보고자 합니다. 프로퍼티 축약, 간결한 메소드 먼저 객체의 프로퍼티를 간결하게 작성할 수 있는 방법에 대해 알아보겠습니다. shorthand properties (프로퍼티 축약) 먼저 다음의 ES5 vs ES6 코드를 비교하며 살펴보자. ES5 JS var x = 10; var y = 20; var obj = { x: x, y: y }; ES6(es2015) JS var x = 10; var y = 20; var obj = { x, y }; 위 예제는 각각 똑..

JavaScript/ES6+ 2021. 2. 26. 18:36

default parameter, rest parameter, spread operator

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. es2015 이후 새로운 매개 변수와 함수 그리고 그에 따른 기타 관련 내용에 대한 문법을 알아보도록 하겠습니다. 매개변수 기본값, 나머지 매개변수, 펼치기(전개) 연산자 우선 새로운 매개 변수와 연산자에 대해 알아보고 이후 새로운 함수에 대해 살펴보도록 하겠습니다. default parameter(매개변수 기본값) default parameter 는 함수의 인자로 넘어오는 것에 기본값을 정의해 줄 수 있는 것입니다. 아래의 기존 ES5 와 ES6 가 어떻게 달라졌는지 예제를 통해 살펴보도록 하자. js [ES5] const f = function (x, y, z) { x = x ? x ..

JavaScript/ES6+ 2021. 2. 26. 18:19

template literal & 번외편(배열 메소드)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. ES5 에서는 홑따옴표, 쌍따옴표로 문자열을 표기(var a = 'abc';)하였으나 ES6 에서 또 하나의 템플릿 문자열이 생겼습니다. 이번 장에서는 이 템플릿 문자열에 대해 알아보겠습니다. 템플릿 리터럴(Template Literal) 다음의 코드를 살펴보도록 합니다. js // ES5 var a = 'abc'; var b = "abc"; // ES6(es2015) var c = `abc`; console.log( a === b ); console.log( a === c ); console.log( b === c ); console.log( a === b && b === c ); 위 ..

JavaScript/ES6+ 2021. 2. 26. 18:12

ES6 block-scope & let, const

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. ES6 에서 추가된 블록 스코프(block-scope)와 let, const 에 대해 살펴보도록 하겠습니다. Block Scope ES5 까지는 "자바스크립트에는 블록 스코프가 없다"고 알려져 있었으나 이제는 그렇지 않습니다. ES5 에서는 함수 스코프가 함수에 의해서 생기는 변수의 유효범위였다면 블록 스코프(block-scope)는 무엇일까요? 블록 스코프의 스코프도 알다시피 유효범위를 의미하는데 그렇다면 블록이란? 바로 코드 문단인 { } 즉, 중괄호를 가리킵니다. 다시 말해, { } 에 의해서 생기는 변수의 유효범위, { } 에 의해서 변수의 유효범위가 결정된다고 할 수 있습니다. ..

JavaScript/ES6+ 2021. 2. 26. 16:30

Webpack Guide for beginner #3

Webpack 기본 개발 환경을 위한 설정 앞선 챕터에서 webpack 의 기본 주요 속성들에 대해 알아보았습니다. 이번 장에서는 자주 사용되는 기본 개발 환경을 설정하면서 기타 유용한 사항들에 대해 알아보도록 하겠습니다. 참고로 여기서는 SASS, webpack-dev-server 등을 사용해 보도록 하겠습니다. webpack.config.js 개발환경 설정 사진 프로젝트 초기 생성 앞선 내용을 따라 왔다면 nodeJS 와 webpack global 이 설치되어 있을 것입니다. 만약 웹팩에 필요한 기본 설정이 되어 있지 않다면 이전 장을 참고하고, 여기서는 nodeJS 와 webpack global 이 설치되어 있음을 가정으로 진행합니다. 먼저 node, npm 버전을 확인 후 아래와 같이 디렉토리를 ..

Web Tech/Webpack 2019. 11. 19. 10:50

Webpack Guide for beginner #2

Webpack 환경 설정 맛보기 앞서 Webpack의 전반적 이해와 Webpack 사용에 필요한 선수 지식에 대해 알아보았으며, 이번 장부터는 Webpack에 대한 기본 환경 구성부터 진행해 보도록 하겠습니다. 사용자 코드작성과 번들 js 프로젝트 초기 설정 이제부터 새로운 프로젝트를 초기화하고, Webpack 을 설치해 보도록 하겠습니다. 아직까지 node.js 설치를 하지 않았다면 설치 후에 진행 바랍니다. Webpack 기본(일반적) 구성 절차 webpack 과 webpack-cli 전역 설치 npm init 으로 package.json 생성 src/index.js 와 index.html 생성 사용자 js 와 html 추가 webapck.config.js 파일 생성 webpack, webpack-c..

Web Tech/Webpack 2019. 11. 19. 10:44

Webpack Guide for beginner #1

Webpack 이란 무엇인가? Webpack 공식 사이트 소개 이미지 Webpack 페이지에서 소개하듯이 웹팩은 모듈 번들러(Module Bundler)입니다. 그렇다면 번들러(Bundler)란 무엇일까요? 번들러는 소프트웨어 및 일부 하드웨어와 함께 작동하는데 팔요한 모든 것을 포함하는 패키지라고 정의하고 있습니다. 이를 프로그래밍적으로 접근하자면 번들러란 필요한 의존성에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑 해주는 도구라고 할 수 있습니다. 다시말해, Webpack 은 공식 사이트 이미지에서 소개하듯이 웹페이지를 동작시키기 위한 서로 연관 관계가 있는 웹 자원(웹앱 애플리케이션의 구성파일)들인 js, css, img, webfont, etc.. 와 같은 구성파일들의 관계들을 Webpack..

Web Tech/Webpack 2019. 11. 19. 10:34

JS Basics #2 - Function

함수 파트에서는 함수와 관련된 다음의 다양한 개념에 대해 자세히 알아보도록 하겠습니다. 함수 생성과 스코프(scope) 변수 호이스팅(hoisting), 유효범위(scope) 함수 객체 다양한 함수 형태 함수 호출과 this 프로토타입과 프로토타입 체이닝 함수 생성하기 자바스크립트에서 가장 중요한 개념 1순위는 단연 함수입니다. 자바스크립트에서의 함수는 언뜻 보면 다른 프로그래밍 언어와 마찬가지의 기능을 제공하고 있습니다. 즉, 특정 기능을 제공하는 코드를 작성해서 함수를 정의하고, 이를 호출해서 결과값을 얻는 것처럼 말입니다. 하지만 이러한 기능 외에도 자바스크립트의 함수는 모듈화 처리나 클로저, 객체 생성 등 자바스크립트의 근간이 되는 많은 기능을 제공하고 있습니다. 함수 정의 자바스크립트에서 함수를..

Study Group/javaScript 기초 2019. 9. 4. 12:18

JS Basics #1 - JS 기본형과 참조형 차이점 정리

기본형과 자료형의 차이 자바스크립트의 두가지 타입인 기본형과 자료형의 정의에 대해 알아보고 두 타입간의 차이점이 발생하는 원인에 대해 알아보겠습니다. 자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리됩니다. 기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가되었습니다. 참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며, ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가되었습니다. 두 타입의 가장 대표적인 차이로는 기본형에는 바로 값을 그대..

Study Group/javaScript 기초 2019. 9. 3. 08:06

JS Basics #1 - 자바스크립트 참조 타입(객체 타입)

자바스크립트에서는 앞선 챕터에서 알아본 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체로 취급됩니다. 따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체입니다. Reference Type 의 정의와 특성 자바스크립트에서 객체는 단순히 '이름(key) : 값(value)' 형태로 저장하는 컨테이너로서의 역할을 합니다. 그리고 key 를 property 라고도 표현합니다. 자바스크립트에서 기본 타입은 하나의 값만을 가지는 데 비해, 참조 타입(복합객체, 합성객체라고도 부르며 일반적으로 객체라고 함)인 객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 또 다른 객체를 가리킬 수도 있습니다. 이러..