Peep

ES2018(ES9) 변화

Rest, Spread

Rest

• 선택되지 않은 나머지 속성을 모아준다.
• 값이면 복사하고 객체는 참조한다.

const { a, ...rest } = { 
	a: 1, b: 2, c: 3 
}; 

console.log(rest); // { b: 2, c: 3}

- 코드 출처 : 제로초님 블로그

Spread

• Object.assign과 비슷하다.
• 값이면 복사하고 객체는 참조한다.(같은 속성명이라면 덮여씌워진다.)

const obj = { 
	a: 1, b: 2, c: 3 
}; 

const spread = { 
	a: 3, d: 4, ...obj, 
}; 

console.log(spread); // { a: 1, b: 2, c: 3, d: 4 } (a: 3이 덮어씌워짐)

- 코드 출처 : 제로초님 블로그

Promise.prototype.finally

• then, catch외에 finally 추가
• promise 실행 결과에 상관없이(성공 실패 여부 상관 없이) 마지막에 무조건 실행
• finally 뒤에 then, catch 등을 체이닝 할 수 있음
• resolve 값은 바꿀 수 없고 reject값만 바꿀 수 있다.

for-await-of (Async iteration)

• 비동기 iterable 객체를 반복하는 구문
• Async for - of문은 비동기 함수, 비동기 generator 함수 내에서만 사용 가능
• promisa.all외에도 비동기 반복 처리에 옵션이 하나 더 생김

정규표현식

• lookbehind 생김 - 특정 문자열 뒤의 문자열을 찾는 기능 - 이를 위해 ?>=, ?>! 심볼 추가
• 캡쳐링 그룹에 네이밍가능
  • 캡쳐링이란? 괄호로 묶어준 것들
  • 기존에는 순서대로 번호가 매겨졌지만 이제 사용자가 네이밍할 수 있음
  • 결과에 groups 속성으로 접근 가능
• s 플래그 추가되어 .의 기능이 강화
• u 플래그 추가(특정 유니코드를 정규표현식으로 표현 가능 해짐)
• \n도 매칭

ES2018(ES9)의 변화

https://www.zerocho.com/category/ECMAScript/post/5adae68aca91b1001b14dd29

[JS] ECMA2018 : ES9 알아보기

https://a-tothe-z.tistory.com/15

ES2016(ES7) 변화, ES2017(ES8)의 변화

ES7

ES6에 비해 변경된 것이 별로 없다.

제곱연산자와 includes 메소드가 가장 큰 변화

제곱연산자

** 를 통해 제곱연산을 할 수 있다.

Math.pow(5, 3); // 125
5 ** 3; // 125

var i = 5; 
i **= 3; // 125

includes(찾을요소, 시작 순서)

배열에 해당 요소가 있는지 확인

indexOf와 같은 결과가 나오지만 NaN에 대한 처리가 다르다.

[NaN].includes(NaN); // true 
[NaN].indexOf(NaN) > -1; // false

ES8

메소드

Object

• Object.values(객체)

• Object.entries(객체)

  • Object.keys와 Object.values를 합쳐 놓은 메소드

• Object.getOwnPropertyDescriptors(객체)

  • 속성 설명, OwnProperty이기에 상속받지 않은 속성들만 설명

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

String

• 문자열.padStart(최종길이, 보충문자열)

  • 문자열 앞부분에 공백이나 문자열 추가하여 최종 길이로 만듬, 최종길이가 안채워지면 보충 문자열이 반복해서 들어감 원래 길이보다 최종길이의 값이 작으면 기존 문자열 반환

• 문자열.padEnd(최종길이, 보충문자열)

  • padStart와 같지만 문자열 뒷부분에 공백이나 문자열 추가

Trailing commas in function

• 함수의 인자, 매개변수 마지막에 콤마가 있어도 에러가 나지 않는다.

• git 같은 버전관리에서 콤마하나 추가한 것으로 수정된 것으로 나타나는 관리상 비효율적인 행동을 줄이기 위해 허용한다.

A( 'a', () => { 
	console.log('hello'); 
}, () => { 
	console.log('zero'); 
}, 
// 이렇게 마지막에 콤마를 붙이면 다음 인자가 더 들어올 것을 대비할 수 있습니다. );

async/ await

• promise를 await이 받아 처리함

• async는 promise가 없으면 의미 없음

• async 함수로 선언 후 await을 사용해야함.

ES7 변화, ES8의 변화

https://www.zerocho.com/category/ECMAScript/post/57d51fd976f9ec00153633b5

https://www.zerocho.com/category/ECMAScript/post/58cea165ab6eaa00180c5234

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a

ES6 간단하게 알고가기

선언 

ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다.

• let

  •  

    변수

• const

  • 상수 (배열과 오브젝트의 값 변경은 가능하다.)

• immutable array

  • 기존 배열을 복제하여 사용한다. 

  • 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.)

const a = [1,2,3];
const b = [...a];

메서드

• 화살표함수(Arrow function)

• 클래스 개념 도입

• setPrototypeOf

  • 프로토타입 객체 추가

• 모듈(module)

• 프록시(proxy)

• startsWith(), endWith()

  • 앞 뒤로 문자열 일치 여부 판단

• includes()

  • 문자열 포함 여부 판단

• for-of

  • for-in 에서 상위 프로토타입의 값이 포함되는 문제 발생, value 순회로 for-in 문제 방지

• 전개연산자(Spread Operator)

• 나머지 매개변수(rest parameter)

• 기본 매개변수(default parameter)

• Array.from

  • 유사배열을 배열로 만들어준다.

  • querySelectAll로 얻은 노드리스트를 배열로 변경할수도 있다.

• 필수(기본) 파라미터

• 구조 분해

• set(), weakset()

• 백틱(`), 템플릿처리 ${}

객체와 변경불가성(Immutability)

원시 타입은 변경 불가능한 값이며 그 외 값은 객체 타입. 객체 타입은 변경 가능한 값이다.

(새로운 값을 다시 만들지 않고 직접 변경 가능)

참조하는 동작으로 의도하지 않은 결과가 나올 수 있다.

따라서 불변 데이터 패턴이 필요하다.

불변 데이터 패턴

참조가 아닌 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경한다.

(원본 데이터의 불변)

1.객체의 방어적 복사(defensive copy) - Object.assign

Object.assign은 shallow copy이며 deep copy가 아니다.

2.불변 객체화를 통한 객체 변경 방지- Object.freeze

Object.freeze는 shallow freeze이며 객체 내부의 freeze를 원한다면 deep freeze를 해야한다.

immutable.js

Object.assign, Object.freeze는 번거로우면 성능상 이슈가 있어서 큰 객체에는 사용을 지양한다. (??)

다른 대안 : Facebook이 제공하는 라이브러리 immutable.js를 대안으로 사용할 수 있다.(영구 불변 데이터 구조를 제공)

ES6 정리 

https://velog.io/@godori/ES6-%EC%A0%95%EB%A6%AC-vpjmrh6hhe

ES6 특징 핵심요약

https://avengersrhydon1121.tistory.com/104

객체와 변경불가성(Immutability)

https://poiemaweb.com/js-immutability

ref https://dassur.ma/things/deep-copy/

ES6-꿀팁

원문 :  https://www.sitepoint.com/shorthand-javascript-techniques/

ref https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html

[CSS 방법론] BEM 방식 

BEM (Block Element Modifier)

• Block
  • 독립적인 컴포넌트 단위
  • header, search 등이 될 수 있다.
• Element
  • 블럭을 구성하는 단위
  • search의 input 등이 될 수 있다.
• Modifier
  • 블럭, 엘리먼트의 속성
  • search의 focused나 button의 disabled 등이 될 수 있다.
• __와 --로 구분한다.
  • 이름연결시에는 하이픈(-)하나로 연결한다.
    • block-name
• Block Element Modifier
  • class만을 사용한다.
  • 어떤 목적인가를 중점으로 네이밍한다.

Block

• header, logo, search 등이 될 수 있다.
• header > logo 일 경우 분리될 수 있는 컴포넌트 단위인 경우 block으로 처리한다.

<div class="search">
    <label>
        <button>검색</button>
    </label>
    <input type="text" value="" />
</div>

Element

• search 블럭의 input이나 label, button등이 될 수 있다.
• search__input, search__label처럼 작성하며 label 엘리먼트 내부에 버튼 엘리먼트가 있다면 하위 엘리먼트로 작성하지 않고 search__label처럼 블럭의 엘리먼트로 똑같이 취급한다.
• block-name__element-name 형식을 따른다

<div class="search">
    <label class="search__label">
        <button class="search__button">검색</button>
    </label>
    <input class="search__input" type="text" value="" />
</div>

Modifier

• 생긴게 다르거나 동작이 다른 블럭이나 엘리먼트에 사용한다.
• search의 focused, button의 default 등으로 사용할 수 있다.
• 불리언 타입으로 작성할경우 search__input--focused로 표현할 수 있으며 키-밸류 타입으로 작성할 경우 search__input--color-gray 와 같이 작성할 수 있다. 
• --로 연결해 사용한다.

<div class="search">
    <label class="search__label">
        <button class="search__button">검색</button>
    </label>
    <input class="search__input" type="text" value="" />
    <input class="search__input search__input--hidden" type="text" value="" />
</div>

클래스 네이밍으로 구조를 파악할 수 있으며 이 글을 읽게된 계기가 SCSS에서 어떻게 하면 편할까를 생각하다가였다.

BEM에 대해 대략적으로 알고있었지만 도움이 많이 되는 글이었다.

글쓴이가 말하는 좋았던 점에서 부모참조자(&)와 찰떡궁합이라고하는데, 실제로 사용할 때 편리함을 느꼈다.

하지만 BEM에 익숙하지 않기때문에 Block, Element, Modifier를 파악해서 네이밍하는데에 꽤나 많은 시간을 소모하고있었도 그리고 네임이 길어지고....

플러스로 복사 붙여넣기 시에 셀렉트가 한번에 안되기 때문에 불편하기도 했다.

BEM 글을 읽고 공부하는데, 마크업 구조를 같이 공부하는 것 같기도하고 컴포넌트화 시키는 공부인 것 같기도해서 재미있는 방법론인것 같다.

[CSS 방법론] BEM 방식 

https://nykim.work/15