[ES6] 용어 정리

yed·2022년 1월 28일
web
0

ES6 및 vue.js 사용 전 알아둬야 할 키워드 요약

ES6(ECMA Script)

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.

ES6는 ECMAScript 2015를 의미하며 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가된 버전

ES6를 사용하면 가독성과 유지보수성 향상

<ES6 주요 문법>

const & let : let(변수 재선언 방지), const(상수)
화살표 함수 : => 문법을 사용하는 축약형 함수
새로운 객체 리터럴 : 객체를 더 축약해서 정의
Spread Operator : 객체나 배열의 값을 다른 객체/배열로 복제 시 사용
템플릿 리터럴 : 문자열에서 변수 사용 시 용이
구조 분해 문법 : 객체, 배열 등 데이터를 변수 밖으로 꺼내서 사용하는 방법

🔸javascript module (import, export)

js파일을 곧 모듈이라고 한다.

모듈에서 다른 모듈을 가져올import 수 있고 내보낼export 수 있다.

생성한 모듈은 브라우저도 모듈로 인식할 수 있도록 <script> 태그에 명시해줘야 한다.
<script type="module" src="./utils.js"></script>

모듈은 자신만의 스코프를 가져서 export 하지 않으면 다른 모듈에서 접근할 수 없다.

동일한 모듈을 여러번 import 하면 최초 import만 적용된다.

✔export

모듈에 선언한 변수나 함수 등 전부 다른 모듈에 제공할 때 사용

export const firstName = 'lee';

export function getAge() {
	return 5;
}

export default는 기존 내보내기로 대표나 한개만 export할 경우 지정한다.

  • named exports

여러값을 export하기 쉬움. export 된 이름을 사용하여 import한다.

  • default exports
export default myFunctionOrClass

모듈 당 한개의 default export를 가질 수 있음.
가장 간단학게 export 할 수 있어서 보통 모듈의 대표성을 가지는 것을 지정한다.
단일 값이나 모듈에 대한 대체 값 export 시 사용

예제
<my-module.js>

function a(x) { 
	return x * x * x; 
} 
const foo = Math.PI + Math.SQRT2;
export { a, foo };
//
let b = function b(x) { 
	return x * x * x; 
} 
export default b;

<import 시>

import { a, foo } from 'my-module';
//default export를 import 시 
import myFunction from 'my-module';

console.log(a(3));와 console.log(myFunction(3)) 둘다 27이 나온다.

✔import

외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져와서 사용할 수 있음

  • 하나의 멤버 가져오기 
import {myMember} from "my-module.js";
  • 여러개 멤버 가져오기
import {foo,bar} from"my-module.js";
  • 다른이름의 멤버 가져오기
    as 사용, 여러 멤버를 가져올 때도 가능
import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";
  • 모듈을 가져와 실행만 할 경우 가져오기
import "my-module.js";
  • default export 가져오기
import myModule from "my-module.js";

🔸javascript destructuring (구조분해할당)

비구조화라고 하며 구조(객체, 배열 등) 밖으로 데이터를 꺼내올 수 있는 문법이다.

기존 객체의 데이터에 접근하려면 

const settings = {
    notifications: {
        follow: true,
        alerts: true
    },
    color: {
        theme: "dark"
    }
};

console.log(settings.notifications.follow); 이런 방식으로 접근해야 했다

Destructuring을 적용할 경우 

const { 
    notifications: { follow = false },
    color
} = settings;

바로 console.log(follow);로 follow의 데이터를 가져올 수 있다.

color를 불러올 경우 { theme: 'dark' }를 값으로 가져온다.

만약 follow의 값이 할당되어 있지않다면 default value로 설정한 false를 가져온다.

  • 배열에 적용한 경우
const fruits = ["apple", "banana"]
const [f1, f2, f3="melon"] = fruits;

f2 = fruits[1]; == f2

  • 함수에 적용한 경우
function saveSettings({follow, alerts, color = "light" }){
  console.log(`follow: ${follow}`);
}
saveSettings({
  follow: true,
  alerts: true
})

기존에는 function(인자)로 객체를 받았다면 인자.변수로 접근해야 했음.

value shorthands
객체에 key이름과 value의 이름이 동일하다면 value 하나만 적어줘도 데이터가 넣어준다.
기존에는 follow: follow

const settings = {
  follow,
  alerts
}

swapping
배열을 이용해 변수의 값을 바꿔주는 방법

let apple = "banana";
let banana = "apple";

[banana, apple] = [apple, banana];

[banana, apple] = [apple, banana]
== banana = apple; apple = banana;
== banana = "banana"; apple = "apple"

skipping
배열의 중간값만 필요할 때 사용하는 방법

const fruits = ["apple", "banana", "melon", "strawberry"];

const [, banana, , strawberry] = fruits;

필요 없는 값은 ,로 설정

🔸Arrow Function (화살표 함수)

=>(Arrow)로 축약한 함수.

일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this와 달리 arrows 함수는 코드의 상위 스코프(lexical scope)를 가리키는 lexical this를 가진다.

즉 화살표 함수에서 this를 사용하면 함수 자신을 바인드 하지 않고 함수의 스코프(함수가 속한 상위 범위)에서의 this 가 적용된다.

기존 function 사용

const nameLength = nameList.map(function(name){
    return name.length;
})
  • ES6의 arrow function 사용
const nameLength = nameList.map(name => {
    return name.length;
})
  • 인자가 1개만 존재할 경우 더 축약가능 (implicit return)
const nameLength = nameList.map(name => name.length);
  • object를 반환할 경우 
const nameList = ["minsung", "sungbin"]
const nameLength = nameList.map((name,index) => ({
    nameLength:name.length,
    index
}));

자주 사용하는 함수

  • find() : 배열.find(item => item.includes(조건));
    조건을 만족하는 첫번째 값을 반환

  • filter() : 배열.filter(item => item.includes(조건));
    조건을 만족하는 모든 요소를 배열로 반환

  • ForEach() : 배열.forEach(item => { 본문 });
    본문을 주어진 배열의 각 인덱스마다 실행한다.

Dafault Value
const intro = (name="anonymous") => "My name is " + name;
함수 생성 시 인자값에서 초기값 지정이 가능하다

호이스팅(javascript Hoisting)

변수의 정의가 범위에 따라 선언과 할당으로 분리되는 것을 의미하며 javascript(바닐라스크립트)가 가진 특징 중 하나다.

일반적으로 var로 변수를 선언할 경우 모든 변수들은 hoist된다. 

function test(){
	x=10;
	console.log(x);
	var x;
}

변수가 함수 안에서 어디에서든지 정의가 된다면 

function test(){
	var x;
	x=10;
	console.log(x);
}

내부적으로는 변수의 선언이 함수의 최상위로 인식하며 test() 시 x가 출력되는 것을 볼 수 있다.

다른 언어들 같은 경우는 변수 선언의 위치에 맞게 코드가 순차적으로 실행되지만 자바스크립트는 순차적으로 실행하지 않고 변수선언을 가장 먼저 실행한다.

Literal (리터럴)

일반적으로 literal은 데이터를 표현하는 방식을 의미한다.

객체지향에서 리터럴이란 변수를 선엄함과 동시에 그 값을 정해주는 표기법이다.

ES6에는 두개의 리터럴이 존재한다.

🔸템플릿 리터럴 (Template literals)

내장된 표현식을 허용하는 문자열 리터럴. 런타임 시점에 일반 자바스크립트 문자열로 변환된다.

표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공

기존에는 +로 문자열이나 변수들을 연결해줬다면
백틱(`)으로 문자열과 변수를 감싸준다. 

`string text`
`string text line 1
 string text line 2`

`string text ${변수} string text`

스크립트 안에서 html을 사용할 수 있다. 

const appendName = () => {
    const div = `
        <div class="name_box">
            <h1 class="name">
                minsung
            <h1>
        </div>
    `
    wrapper.innerHTML = div;
}

🔸새로운 객체 리터럴

객체를 정의할 때 축약해서 사용할 수 있도록 하는 객체 리터럴이다.

1) 속성과 값이 같으면 1개만 적는다,

var language = 'javascript';

var josh = {
  // language: language,
  language
};
  • 컴포넌트에서도 적용 가능 
const myComponent = {
  template: '<p>My Component</p>'
};

new Vue({
  components: {
    // myComponent: myComponent
    myComponent
  }
});

2) 속성에 함수를 정의할 때 function 예약어 생략

  • 기존 객체에 함수를 정의하는 경우
onst josh = {
  coding: function() {
    console.log('Hello World');
  }
};
  • ES6에서 축약된 객체에 함수를 정의하는 경우
const josh = {
  coding() {
    console.log('Hello World');
  }
};

Promise (프로미스, 비동기 처리)

기존 javascript에서 비동기성에 의하여 함수의 중첩으로 에러가 발생해도 바로 예외처리가 되지 않는 경우를 위해서 생긴 개체.

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸 개체를 promise라고 한다.

매개변수로 excutor 를 받는다.

  • excutor : resolve와 reject의 인수를 전달하는 실행함수

resolve와 reject는 함수로서 호출되면 promise를 실행하거나 거부하게 됨.

즉 비동기 작업이 모두 끝나면 resolve 를 호출해 이행하고, 중간에 오류가 생기면 reject 를 이용해 거부

Promise의 3가지 상태

  • pending : 대기 상태. 아직 resolve 할지 reject 할 지 결정되지 않은 초기의 상태
  • fullfilled : 이행 상태. 연산이 성공적으로 완료된 상태
  • rejected : 거부 상태. 연산이 실패한 상태
const promise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve("resolve");
  }, 3000);
});

console.log(promise);

setInterval(()=>{
  console.log(promise);
}, 1000);

excutor 는 arrow함수.
3초 후에 resolve 하게 되고 밖에서는 1초마다 promise 를 실행하게 했을 때의 결과

Promise { <pending> }
Promise { <pending> }
Promise { <pending> }
Promise { 'resolve' }
Promise { 'resolve' }
Promise { 'resolve' }

then

promise 가 종료가 되면 resolve 에 들어간 값을 받을 수 있음.

promise.then(value => console.log(value));

catch

reject 된 경우 then 으로 받으면 에러가 발생하기 때문에 에러는 받는 catch

promise.then(result => console.log(result)).catch(error => console.log(error));

resolve 시에는 then, reject 시에는 catch 가 실행되는 것이다.

Javascript Prototype ( 프로토타입 )

자바스크립트는 프로토타입 기반 언어로 프로토 타입을 이용해 새로운 객체를 만들어 낸다.

프로토타입 == 객체의 원형

프로토타입으로 생성된 객체는 또 다른 객체의 원형이 될 수 있다.

프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 가능하게 한다.

자바스크립트는 함수를 통해 변수를 생성하면 메모리에 각각의 변수가 할당된다.

function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();

kim과 part의 eyes와 nose가 각각 메모리에 할당된 것.

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var kim  = new Person();
var park = new Person():

프로토타입을 사용한다면 Person.prototype이라는 빈 Object를 사용해서
Person 함수로부터 생성된 객체(kim, park)은 어딘가에 존재하는 Object에 들어있는 값(eyes와 nose)을 모두 쓸 수 있다.

Webpack

여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler) 중 하나다.

ES6에서는 export를 이용해 모듈로 만들고 import로 가져오게 되는데 이런 모듈을 모든 브라우저에서 지원하진 않기 때문에 브라우저와 무관하게 사용할 수 있는 모듈이 필요한데 이때 모듈 번들러를 사용하는 것.

웹팩은 하나의 시작점Entry point으로부터 의존적인 모듈을 전부 찾아내서 하나의 파일Output로 만든다.

🔸loader

로더는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 것들을 변환할 수 있도록 도와준다.
파일을 다른 언어 (ex : TypeScript)에서 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 로드하거나 또한 자바스크립트 모듈에서 직접 CSS파일을 import할 수 있다.

🔸plugin

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성.
결과물의 형태를 바꾸는 역할

즉 Loaders는 번들이 생성되는 동안이나 생성되기 전에 개별 파일 수준에서 작업이되는 것이고 Plugin은 번들이 생성 된 후에 작동한다.

Babel

자바스크립트 컴파일러. 즉, javascript 로 결과물을 만들어주는 컴파일러

다양한 프레임워크로 개발한 스크립트 언어들을 순수 javascript로의 compile 이 필요해져서 사용한다.

다른 언어로 만들어서 크로스 브라우징 이슈가 발생하지 않도록 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주는 트랜스파일러 역할.

ES6+의 자바스크립트 코드는 하위 버전으로 변환되어 다른 브라우저에서 동작하게 만든다.

빌드 과정 3단계

  • 파싱(Parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
  • 변환(Transforming) : 추상 구문 트리를 변경
  • 출력(Printing) : 변경된 결과물을 출력

NPM / YARN

npm과 yarn은 node로 프로젝트를 진행할 때 많이 쓰이는 패키지 관리 툴이다.

NPM(Node Package Manager)

자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자

패키지를 설치할 때 순차적으로 처리

패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용해서 안정성에 위협받을 수 있음

YARN

페이스북에서 만든 자바스크립트 패키지 매니저
npm의 단점으로는 속도(performance), 안정성(stability), 보안성(security)을 보완한 가벼운 패키지 관리 툴.

패키지를 설치할 때 병렬로 처리

yarn.lock이나 package.json으로 부터 설치만 하는데 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그를 방지

SCSS

기존의 CSS의 프로젝트 규모가 커지면 가독성이 떨어지는 등 유지보수의 어려움의 단점을 보완해서 코드의 재활용성, 가독성울 높이기 위해 나온 것.

CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 스크립팅언어.

  • CSS 코드
.list {
  width: 100px;
  float: left;
  }
li {
  color: red;
  background: url("./image.jpg");
  }
li:last-child {
  margin-right: -10px;
  }
  • SCSS 코드
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SCSS 추가기능

  • 변수의 사용
  • 조건문과 반복문
  • Import
  • Nesting
  • Mixin
  • Extend/Inheritance

CSS preprocessor

css 전처리기는 기존 CSS에서 스타일을 적용해야 하는 요소들이 있다면 코드를 복사해서 붙여야하고, 수정이 필요할 때에는 일일이 찾아서 수정해야 하는 번거로움을 해소하고자 나온 것.

CSS가 동작하기 전에 미리 동작한다.

CSS preprocessor 종류

  • Sass, Less, Stylus

단일 책임 원칙(Single Responsibility Principle)

객체지향의 5대 원칙 중 하나로 클래스는 단 한 개의 책임을 가져야 한다.는 규칙.

클래스가 여러 책임을 갖게 되면 그 클래스는 각 책임마다 변경되는 이유가 여러개 발생해서 복잡해지기 때문에 클래스를 변경하는 이유는 단 한 개여야함.

클래스 안에 정의되어 있는 모든 기능은 하나의 책임을 수행하기 위해 움직여야 함.

유지보수를 용이하게 하기위해서 적용해야 할 규칙.

예제는 이 블로그에서 참고

추가 참고
ES6
vue.js+ES6
모듈번들러와 트랜스파일러
모듈
템플릿 리터럴
프로토타입
Babel
NPM과 YARN

profile
yed
6개월 국비과정 기록하기
이전 포스트

[java] 신고 결과 받기

다음 포스트

[vue.js] vue 프로젝트 생성하기

0개의 댓글