ES6 관련 정리

ES6(ECMA Script)

: 간단히 말해 JavaScript 언어의 표준. ECMA라는 기관이 만든 script언어로 ECMA-262표준을 따른다.

버전

ECMAScript 5 (=ES5)

ECMAScript2015(=ES6) -> 중요한 기능들 이 대거 추가됨.

ECMAScript 2020 (최신판)

 

javascript module (import, export)

스크립트 크기 증가/ 기능 복잡해지면서 파일을 여러 개로 분리하는 모듈 개념이 등장하였다.

지시자 Import, export를 사용해서 다른 모듈을 불러와 모듈안에 있는 함수를 호출이 가능해지게 되었다.

Export는 내보내기 / import는 가져오기

 

예시

//sayHi.js

export function sayHi(user){

           Alert(`Hello, ${user}!`);

}

//main.js

import {sayHi} from ‘./sayHi.js’;

alert(sayHi);

sayHi(‘John’);

 

javascript destructuring

객체나 배열을 함수에 전달해야 할 때 데이터 전체가 아닌 일부만 필요한 경우에 대표적으로 사용된다.

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

//방법1
let [fruit1, fruit2] = arr;

alert(fruit1); //banana
alert(fruit2); //apple

//방법2
let [fruit1, fruit2] = "banana apple".split(' ');


//쉼표사용해서 필요없는 요소 사용가능
let [firstName, ,title] = ["jisu", "jeong", "consul"];

alert(title);  //consul

//...로 나머지 요소 가져오기
let [no1, no2, ...no3] = ["window","door","room","cloud"];

alert(no3.length); //2
alert(no3[0]); 		//room
alert(no3[1]);		//cloud

// 기본값 : undefined
let [first, second] = [];
alert(first); //undefined
alert(second); // undefined

// 기본값 따로 설정
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);	// Julius
alert(surname); // Anonymous(설정한 기본값)

//객체 분해하기
let options = {
	title: "Menu",
    width: 100,
    height: 200
};

let {title, width, height} = options;

alert(title);	//Menu
alert(width);	//100
alert(height);	//200

//let {...}안의 순서가 바뀌어도 똑같은 속성값에 맞춰 value값이 들어감.

 

 

Arrow Function (화살표 함수)

 함수의 축약버전

let sum = function(a,b){
	return a+b;
};

//화살표함수 사용
let sum = (a,b) => a+b;

 

화살표 함수 중요특징

1. 화살표함수에는 this가 없다. 

: 화살표 함수 본문에서 this를 사용하면 화살표 함수 내부가 아닌 외부에서 값을 가져온다.

let group = {
	title : "팀",
    students: ["지수" , "혜리" , "석형"],
    showList(){
    	this.students.forEach(
        	student => alert(this.title + ":"+student)
        );
    }
};

//forEach안의 화살표함수 내부에 있는 this.title은 화살표함수 외부의 showList()가 가리키는 대상과 동일
//그렇기 때문에 this.title은 group.title과 동일
// 반면 화살표 함수 대신에 일반함수를 썼을 경우 함수 내부의 this가 undefined를 가리키게 되므로 에러발생.

 

2. 화살표함수에는 arguments가 없다.

추후 보완 필요

 

 

호이스팅(javascript Hoisting)

var로 선언한 모든 변수는 함수의 최상위로 끌어올려짐(hoisted) 때문에 함수가 시작되는 시점에 var선언이 처리됨.

그렇기 때문에 선언전에 사용이 가능하다.

 

function sayHi(){
	text = "hi";
    
    alert(text);  //hi
    
    var text;
}

sayHi();

그러나 선언은 호이스팅되지만 할당은 호이스팅 되지 않는다.

function sayHi(){
	alert(phrase);  //undefined
    
    var phrase = "Hi";
}

SayHi();

 

Literal (리터럴)

 1) ` 백틱 사용하면 여러 줄에 걸쳐 작성 가능

 2) template literal

function sum(a,b){
	return a+b;
}

alert(`1+2=${sum(1,2)}`);  // 1+2=3

 

Promise(비동기처리)

* 동기 /비동기

화면단에서 서버단에 어떤 요청을 보냈을 때(예) db에 name컬럼에 저장된 값중에 a가 있는지에 대한 요청) 이에 대한 수행이 성공했을 때와 실패했을 때 어떤 결과값을 화면단에 보여줄 건지를 모두 저장하는 객체가 promise라고 생각하면 된다. 이때, 코드가 순차적으로 실행되는 것을 동기적처리 / 코드가 실행되다가 setTime과 같이 시간이 걸리는 작업이 필요한 코드를 만난 경우 다음 코드를 진행한 후 setTime관련 작업이 끝났을 때 응답을 받아서 마무리하는 경우를 비동기적 처리라고한다.

 

//promise객체 만들기

let promise = new Promise(function(resolve, reject){
	setTimeout(()=> reject(new Error("에러생김")),1000);
});


//new Promise()에 전달되는 함수인 executor는 자동으로 실행되고, 처리가 끝나면 성공여부에 따라
//resolve나 reject를 호출한다.
// new Promise 생성자가 반환하는 promise객체는 state,result와 같은 프로퍼티를 가짐.

promise객체는 executor와 결과나 에러를 받을 소비함수(then/catch/finally)를 이어주는 역할

 

then

promise.then(
	function(result) { 프라미스가 이행되었을 때 실행되는 함수 내용}
    function(error) {프라미스 거부되었을 때 실행되는 함수 내용}
)


let promise = new Promise(function(resolve, reject){
	setTimeout(() => resolve("완료"),1000); 
});

promise.then(
	result => alert(result),  //1초 뒤 완료 출력
    error => alert(error)     //실행되지 않음.
);

 

catch

에러가 발생한 경우만 다루고 싶다면 .then(null, errorfunction) 과 같이 null을 전달하면 되는데 이는 catch를 사용하는 것과 같다.

let promise = new Promise((resolve, reject) => {
	setTimeout(()=>reject(new Error("에러")),1000);
})

promise.catch(alert);  // 1초 뒤, Error: 에러 출력

 

finally

finally는 then처럼 성공여부와 상관없이 프라미스가 처리되면 무조건 실행됨.

try{} catch{} finally{} 와 비슷한 개념.

 

new Promise((resolve, reject) => {
	throw new Error("에러 발생")
}).finally(() => alert("프라미스 준비"))
.catch(err => alert(err));

 

Webpack

서버에서 처리하는 로직을 javascript가 구현하는 부분이 많아지면서 코드 양이 늘어나졌고, 이 때문에 모듈 시스템이 필요해지게 되었다. 그러나 언어 자체가 지원하는 모듈 시스템이 없기 때문에 모듈 시스템을 구성하는 webpack도구를 활용하게 되었다.

출처: JavaScript 모듈화 도구, webpack (naver.com)

       

    - loader

 : 다양한 리소스를 javascript에서 바로 사용할 수 있는 형태로 로딩하는 기능. json-loader/ handlebars-loader 등 로더 종류에 따라 데이터 객체 / 템플릿 함수 등의 결과들을 얻을 수 있다.

 

*추가설명

출처: 웹팩의 기본 개념 김정환 블로그 (jeonghwan-kim.github.io)

    - plugin

: 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 

 

*참고 

Webpack 초간단 정리 | 큐트리 개발 블로그 (devsoyoung.github.io)

Webpack 초간단 정리

 

NPM / YARN

둘 다 패키지 매니저 프로그램으로 라이브러리를 설치하고, 버전 관리의 기능을 한다.

 

차이점

1. npm은 여러 패키지 설치시 하나가 완전히 설치될 때 까지 기다린 후 다른 패키지를 설치하는 반면에,

yarn은 병렬로 설치해서 성능과 속도가 증가한다.

 

2. npm은 다른 패키지를 즉시 포함할 수 있는 코드를 자동실행하기 때문에 보안에 여러 가지 취약성이 있지만,

yarn은 yarn.lock 또는 package.json파일에 있는 파일만 설치한다. 따라서 보안이 더 강화됨.

 

참고블로그

[#.NPM] NPM vs YARN의 차이점을 알아보자 (tistory.com)

[#.NPM] NPM vs YARN의 차이점을 알아보자

 

SCSS

sass ->

문서의 스타일을 구현하는 css의 단점을 보완하기 위해 css확장으로 나온 스크립트 언어이다.

선택자의 중첩(nesting)이나 조건문, 반복문, 다양한 단위의 연산 등 표준 css보다 훨씬 많은 기능을 사용해서 작성 가능하다.

 

scss는 css와 거의 같은 문법으로 sass기능을 지원한다.

 

단, 웹에서 직접 동작하지 않아서 웹에서 동작가능한 표준의 css로 컴파일 해야 함.

전처리기로 작성하고 css로 컴파일해서 동작시킴.

 

참고블로그

Sass(Scss) 문법 정리 – BYTHEM

Sass(Scss) 문법 정리 – BYTHEM

 

Babel

자바스크립트의 컴파일러이다.

정확히 javascript로 결과물을 만들어 주는 컴파일러를 말한다.

 

이유

1.프론트엔드가 빠르게 발전하면서 새로운 EXNext문법을 기존의 브라우저에서 사용하기 위해 하위호환성 문제때문.

2. typescript등 새로운 언어가 나오면서 javascript로의 compile이 필수가 되었기 때문에 

 

*polyfill은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미.

babel은 javascript로 변환하는 transpiler역할만 할 뿐, 최신 함수를 사용할 수 있도록 기능들을 추가하는 역할까지는 하지 않는다.

이러한 역할을 polyfill이 해줌. babel이 컴파일시 실행된다면 polyfill은 런타임에 실행.

 

참고 블로그

babel 이란 무엇인가? (bravenamme.github.io)

babel 이란 무엇인가?

 

CSS preprocessor

css 전처리기는 css문서의 작성에 도움을 주는 도구라고 할 수 있으며 종류에는 Sass, Less, Stylus가 있다. 이들은 문법만 다를 뿐 개념자체는 동일하다.

 

css문서 작성 시 반복적인 작업, tag닫는 일 등의 작업을 변수/함수/상속 등 일반 프로그래밍 개념을 사용해서 해결해 나갈 수 있도록 하기 위해 등장했다.

 

이러한 css전처리기 자체만으로는 웹 서버가 인식하지 못해서 compiler를 사용해야 한다.

 

참고 블로그

CSS 전처리기(Pre-Processor) 배우기! - Dev. DY (kdydesign.github.io)

CSS 전처리기(Pre-Processor) 배우기!

 

 

단일 책임 원칙(Single Responsibility Principle)

객체지향 5대 원칙(SOLID원칙) 중 하나이며, 시간이 지나도 유지보수와 확장성 있는 소프트웨어를 만들기 위한 원칙이다.

 

클래스는 단 한 개의 책임을 가져야 한다는 의미를 가진 규칙이다.