[용어정리] Part4 JavaScript | ES6문법 및 모듈

MI개발자 2022. 1. 13. 20:57

Front-end 로드맵 따라하기

(요약) 키워드로 알아보기

ES6문법 :
현재 가장 대중적으로 사용되고 있는 es6문법이다.

Module의 정의 :
프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태
개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다.
이때 분리된 파일을 각각 '모듈(module)'이라고 부르는데 부품이라고도 칭하며,
모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성 된다.

더 알아보기

' ES6문법 '

왜 알아야 할까?

⭐이유1.

자바스크립트의 표준인 EcmaScript는 줄여서 ES6이라고 부르고 2021년 기준 ES12까지 나왔다.

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

JavaScript의 ES버전은 꾸준히 올라가지만, 그렇다고 우리가 최신 버전의 문법을 꼭 알아야 할 필요는 없다.

왜냐면, JS를 이용한 개발 (해석하는)환경(각 브라우저들, React, Node.js등 - 해석하는 방법이 조금씩 다 다르다.)에 따라 채택한 ES버전이 조금씩 다르기 때문이다. 그래서 ES11을 배우더라도 브라우저나 Node.js같은 곳에서 바로 사용을 할 수 없는 경우가 많다.

이는 즉, 최신 문법을 알더라도 이를 사용할 수 있는 곳이 없을 수도 있다는 말이다.

현재 ECMAScript 2021 (ES12) 나왔다.

⭐이유2.

es6문법 더 알아보기

현재 가장 대중적으로 사용되고 있는 es6문법이다.

변수선언 : let, const
비동기 처리 : promise

⭐이유3.

es6는 대부분의 메이져 브라우저 예를들어 크롬, 사파리, 파이어폭스 등 다양한 브라우저 그리고 Node.js 서버에서 es6 등 다양한 분야에서 es6문법을 채택하고있다.

어디서든 대부분 사용이 가능하기 때문에 매우 유용하다.

❗ 하지만 그렇다고 es6를 100% 다 지원하는건 아니다.

브라우저마다 지원하는 정도가 다르고 옛날 브라우저는 es6 지원도가 낮아서 es6로 짰다가 동작이 안될 수도있다.

※ 그래서 es6최신 문법으로 코드를 짜더라도 브라우저를위해 옛날 버전의 javaScirpt로 변환시켜주는 작업이 필요하다.

이를 Transpiling해주는 Bable이라는 도구를 사용한다.

따라서 최신 프론트엔드를 개발하는 사람들이랑 거의 모두 Babel을 사용하여 웹을 개발한다.

ex. 리액트를 사용하면서 자연스럽게 사용하고있다는걸 알 수 있다.

1. Template Literal 방식

일반적으로 string자료형 조합할때 아래와 같이 +연산자를 사용했었다.

하지만 더하는 과정이 많이지고, 띄어쓰기 같은 작업을 하기가 번거롭게되면서 이러한 문제점을 해결하려고 나온 것이 바로 Template Literal방식이다. 따라서 이를 사용하면 더 쉽게 만들고, 가독성이 높아진다.

``(벡틱) 안에 변수를 넣을 때 ${ }를 사용합니다.

const hello ="안녕";
const introduce = "나는 그랩이야!"
const age = 5;


//기존 방식
const text = hello + "! " + introduce + " 그리고 "+ age +"살이야."

//Template Literal방식
const newText = `${hello}! ${introudce} 그리고 ${age}살이야`

그리고 크롬브라우저에서는 es6문법을 사용한 이유는 기본적으로 크롬브라우저에서는 es6문법을 지원하기 때문이다.

2. Desturcturing(구조 분해 할당)

객체와 배열에 들어있는 값을 가져올 때 Desturcturing 기능을 사용하면 손쉽게 값을 뽑아낼 수 있다.
비구조화할당이라는 문법의 또다른 이름은 객체 구조분해 라고도 불리기도한다.
+문법정리해뒀던 곳 참고하기 : Ctrl + F -> 구조분해할당 이라고 찾기

const grab = {
	name : '그랩',
	age : 27
};
const people = ['민수','철수']

//기존
var name = grab.name; // . 을 이용해서 값을 접근했다.
var age = grab.age;
var minsoo = people[0]; //인덱스 넣어서 값을 접근했다. 
var chulsoo = people[1];

//Destructuring 방식
var {name, age} = grab; //grab이 객체니까,  즉, 객체를 만들때 { }중괄호가 필요한데
                      //, 중괄호를 바로 넣어서 키를 뽑아낼수있다.
console.log(name); //그랩이 출력됩니다.

const [minsoo, chulsoo] = people; //배열도 마찬가지로, 변수 선언부분에 [ ] 대괄호를 넣어서
                                //바로 값을 뽑아 낼 수 있게 할 수 있다.

3. map, forEach

map과 forEach메소드는 사실 es6이 아닌, es5에서 나온 문법이지만 앞으로 자주 사용하게 되므로 꼭 알도록하자!
배열에서 기본으로 제공해주는 메소드로 배열을 가공할 때 많이 사용된다.(기본적으로 배열을 다룰때 for를 사용했었는데, 이제 map 이나 forEach로 넘어갈 차례다.)
+배열내장함수 더 알아보기

[기존]

var products = [{
	name : '농구공',
	price : 50000
},{
	name : '축구공',
	price : 50000
}]

for(var i=0; i < products.length;i++){
	var name = products[i].name;
	console.log('제품 이름 : ' + name);
}

[Array Method 방식]

forEach . 첫번째 인자에 콜백함수를 넣어준다.
그리고 이 (콜백)함수에는 인자가 2개있다.
1번째는 순회하는 값, 2번째는 순서(index)가 들어간다.

//첫번째 파라미터에는 값, 두번째 파라미터에는 순서(index)가 들어간다.
products.forEach(function (product, index) { 
         console.log((index + 1) + '번째 호출');
         console.log(product);
})

//map은 forEach와 동일하게 조회한다.
//차이점은 map함수는 return할수 할 수 있어서 뭔가 가공해서, 새로운형태의 배열을 
//즉, 가공된 배열을 만들수있다는소리이다.
products.map(function(product, index){ 
         console.log((index + 1) + '번째 호출');
         console.log(product);
});

//productNames는 각 product의 name이 들어간 배열이다
var productNames = products.map((product, index) => { 
     return product.name;
});

//React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시한다.
var productElements = products.map((product,index) =>{ 
	return (
		<div>
			<span>{product.name}</span>
		...
		</div>
	)
})

따라서 React라는 것을 사용하게되면, 네트워크 통신을 통해서 상품정보들을 받아왔다면 그 데이터들을 반복적으로 순회하면서 20~28번째 줄과같은 HTML형태로 데이터를 가공을해서 return을 (productElements에 담는다)하게하고 productElements를 활용해서 쉽게 HTML요소에 화면을 보여주는 작업들을 할 수 있는것이다.

※forEach는 return을 하더라도 애초에 값이 반환이 되지않는다.

❗ 이 외에도 배열 메소드는 filter, reduce 등의 배열 전용 메소드가 있다.

4. Lambda Function(람다 함수)

function을 표현하는 새로운 방식이다. 쉽고, 편하게 사용 할 수 있다.
arrow function이라고도 많이 부른다.
Lamda식은 ( ) => { } 형식을 사용한다.

[기존]

//함수 선언식
function getName(name){
	return `${name} 입니다`
}

//함수 표현식
const getName  = function(){
	...
}

[람다 함수 방식]

const getName = () => {
	
}

//람다식의 return 문을 생략할 수도 있습니다.
const getName = (name) => `${name} 입니다`

※ function이라는 단어가 붙지 않는다. 대신 ( )소괄호에 =>화살표를 붙인다.

※ 5번째줄 주석처럼, 람다식의 return문을 생략 할 수도 있다.

❗ Lambda식과 기존 함수랑은 엄밀히 말하면 차이가 있다. 함수를 선언하면서의 차이점만 말했지만,

자바스크립트에서는 this라는 개념또한 중요한데, this개념을 사용할때는 다르게 동작한다.

※여기에서 따로 공부하지 않은이유는, this를 사용하지않고도 충분히 자바스크립트 개발을 할 수 있기 때문에 웹과 서버를 개발할 수 있다. 그래서 arrow function을 사용할때 일반 함수와의 큰 차이점은 없다는 의미이다.

근데, 우선 알아두면 좋으니까 아래 링크들을 참고하자.

생활코딩 this

this에 대해 더 알아보기

5. conditional ternary operator(3항 연산자)

3항 연산자는 if 조건문을 단축 형태로 사용할 수 있다.

[기존]

const language = 'javascript';

if(language === 'javascript'){
	console.log('재밌다')
}else{
	console.log('재미없다')
}

[3항 연산자 방식]

condition ? exprIfTrue : exprIfFalse 구문으로
condition이 true라면 exprIfTrue가 실행되고, 아니라면 exprIfFalse가실행된다.

const language = 'javascript';
language === 'javascript' ? console.log('재밌다') : console.log('재미없다')

//아래와 같이 많이 활용됩니다.
//변수에 어떤 값이 들어갈꺼냐?
const isJavascript = (language === 'javascript' ? true : false ) // ( )가시적으로 보이게 소괄호 사용!
//result에 true가 들어옵니다.

isJavascript //true

※ 5번째 줄과같이 삼항연사를 쓸때 보통 많이 사용하는 패턴이 값으로 넣는것이다.

6. export, import - 모듈을 불러오는 방식

브라우저 환경에서는 테스트를 못함
기존에 html에서는 <script> 태그를 활용해서 자바스크립트 파일(라이브러리)를 불러왔었다.
그러나 es6에서는 모듈이 등장함으로써 불러오는 방식을 import를 사용하게되었다.

[기존]

//외부 라이브러리를 불러옵니다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

//hello.js를 불러옵니다.
<script src="./hello.js"></script>

[import 방식]

또한 모듈을 내보내서 다른 곳에서 사용할 수 있게 만들수도 있다. 이때는 export를 사용한다.
기본적으로 import를 하기 위해선 export가 되어있어야한다.

//App.js 파일
function App(){
	return <h1>hello</h1>
}

export default App; //App 함수를 외부에서 사용할 수 있도록 export 하는 것

[여러 객체 export & import 하기]

위 코드에서 export 옆에 붙은 default는 한가지 객체만 import하겠다는 것을 의미한다.
하나의 파일에 여러개의 객체를 export할 수도 있다.

function funcA(){
	//...
}
function funcB(){
	//...
}
const varC = 'hello';
export { //이때는 default가 아닌 객체형태로 export로 되어있다.
	a : funcA,
	b : funcB,
	c : varC
}

import 할 때는 { }를 이용한다.

import {a, b, c} from './App.js'

❗ 짜인 모듈을 export, import하는 것은 모든 프로그래밍 언어의 기본이므로 꼭 숙지를 하고 있어야한다.
+ 모듈에대해 더 알아보기

'모듈 (2015년, 표준으로 등재되다)'

그림[1] 과 같이 모듈화 되어있는 프로젝트를

File B처럼 다른 파일로부터 코드를 참조하거나

File A처럼 다른 파일이 자신의 코드를 참조할 수 있도록 열어놓은 파일들이 있다.

모두 모듈이라고 부를 수 있다.

이처럼 어떤 기준을 통해 코드가 파일 단위로 분리되어있는 형태에서 서로를 참조하는 모듈을 확인 할 수 있다.

이때 ModuleB가 ModuleA에 있는 함수를 이용하려고 할 때 ModuleA에 있는 함수를 어떻게 가져올 수 있을까?

Module을 사용하기 위해서는

Module을 인식하는 Module System과

Module을 다루는 키워드가 제공되어야 한다.

모듈을 사용하는 방법은 모듈이 어떤 표준을 따르냐에따라 달라진다.

✨Module의 표준

Module시스템은 여러가지가 있는데, 2가지 표준에서 먼저 살펴보자

1. CommonJS - 자바스크립트 실행환경인 Node.js에서 채택

2. ESM - ECMAScript 2015~ 채택

표준마다 각각 모듈을 어떻게 다루는지 살펴 보기 전에 , 모듈을 다루기위해 제공되는 키워드를 살펴보자

✨Module을 다루는 키워드 (2가지 형태로 분류된다)

1. 내보내기

2. 가져오기

1. 내보내기

내보낼 값들을 객체 안에 넣고, (1) 그 객체를 통해서 한 번에 모두 내보내는 형태가 있고,

(2)내보낼 값들의 개별적으로 키워드를 지정해서 키워드가 정의되어있는 값들만 내보내는 형태로 나뉜다.

2. 가져오기

Module도 하나의 객체로 취급되므로 Module을 가져올때는 우리가 코딩할 때

객체를 사용하고 참조하는 방식처럼 똑같이 사용하게된다.

그래서 객체 형태 그대로 사용하거나 Destructuring을 이용해서 필요한 기능들만 가져와 사용하기도한다.

Module Keyword :가져오기
그럼 CommonJS 표준에서 Module을 어떻게 다루는지 살펴보자.

CommonJS에서 모듈을 가져올 때 require키워드 사용한다.

require(참조하고자 하는 모듈의 경로)

CommonJS에서 모듈을 내보낼 때 module이라는 객체를 사용한다.
CommonJS를 따르는 환경에서는 전역으로 접근할 수 있는 monule이라는 객체가 제공된다.

따라서 내보낼 값들은

module.exports 키 안에 담으면 된다.

require키워드가 module.exports 를 참조하기 때문이다.

Module Keyword :내보내기

module.exports = {...} <- 내보낼 값들은 한 객체안에 모두 할당하는 방식

module.exports = 값 <- 객체가 아닌 즉, 하나의 상수값이나 하나의 함수를 바로 할당 가능

module.exports.키_이름 = 값 <- module.exports에 직접 키를 할당하고 키마다 각각의 값을 할당가능

exports.키_이름 = 값 <- exports키 만 사용해서 보낼 수도있는데, moduleexports의 출력형이다.

Module Keyword :가져오기
그럼 ESM 표준에서 Module을 어떻게 다루는지 살펴보자.

ESM에서 모듈을 가져올 때 import, from키워드로 모듈에 있는 기능들을 참조한다.

import (참조된 모듈을 접근 할 때 사용하는 이름) from (모듈이 위치되어있는 모듈의경로) 사용한다.

Module Keyword :내보내기

내보낼때는 export 또는 export 와 함께 사용되는 dafault와 함께 사용된다.

(1) export

(2) export 와 함께 사용되는 dafault

✨Node.js 환경에서는 ESM으로 모듈을 사용하기 위해서 외부모듈이 필요하다.

Node.js는 CommonJS를 표준을 기본적으로 따르므로, 모듈을 다른 방식으로 접근할 수 있도록해주는 도구가 필요하다

따라서 외부에 있는 모듈을 설치해보자!

npm install esm

다음으로, 명령문에 조금 변화를 줘야한다.

node index.js // CommonJS
node -r esm index.js // ESM

-r esm이 추가되었다.

-r esm은 node명령어를 실행할 때 실행하는 파일의 모듈 표준중에 CommonJS표준말고,

다른 모듈의 표준도 해석 할 수 있게설정해주는 역할을 한다.

그래서 이렇게 작성하면, CommonJS표준도 해석 할 수 있고, ESM표준도 해석 가능해진다.

dexport default를 사용할 경우는 객체 이름으로 내보내야한다.

자바스크립트가 만들어 지진지 얼마 안됐을 때는 자바스크립트로 만든 스트립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈관련 표준 없이 성장할 수 있었고, 새로운 문법이 필요 없었었다.

그런데 스크립트가 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해주는 방법을 만드는 등 다양한 시도를 하게 된다.

⭐⭐⭐⭐⭐
사례 :

AMD- 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 발견됨
CommonJS - Node.js 서버 위해 만들어진 모듈 시스템
- React를 개발할 때는 ES6를 기반으로 하기에 import와 export를 사용해서 모듈을 불러왔다.
그러나 Node에서는 기본으로 채택된 문법이 ES6 문법이 아닌 CommonJS 방식을 사용합니다.
UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐