개발일지 1주차 WIL

자바스크립트 ES

- 자바스크립트 ES란  ECMA Script의 약자이다 ECMA는 European Computer Manufactures Association의 약자로,

정보와 통신시스템의 비영리 표준 기구이다. 즉 ES는 ECMA라는 조직에서 정한 자바스크립트 표준 규격이란 뜻이다.

ECMA에서 다루는 표준을 기준으로 자바스크립트는 ECMA-262로 지정되어있다.

ECMA의 홈페이지에 들어가보면 자바스크립트 외에도 다양한 정보, 통신 ,언어에 대한 규격이 나와 있다. 

 

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

ECMA-262 - Ecma International

자바스크립트 ES5와 ES6 문법차이

자바스크립트 ES5

- 자바스크립트 ES5는 자바스크립트 ECMA script 언어의 버전이다. ES5는 자바스크립트 ECMA script 버전 5라고 해석하면 편할것 같다. 자바스크립트 ES5버전은 2009년에 발행되었다.

ES5 문법

• ES5에서는 알고리즘을 풀거나 배열을 편하게 조작할 수 있는 forEach, map, filter ,reduce, some, every 같은 메소드들이 추가 되었다
• Object에 대한 getter와 setter가 지원되었다.
• strict모드가 지원되었다 (엄격모드)
• JSON(JavaScript Object Notation) 형식의 자료들을 지원하게 되었다

*JSON이란 아래 코드와 같이 "key":"value"로 이루어진 자바스크립트 데이터를 표현하는 텍스트 기반 방식이다.

db에 자료를 저장하거나 가져올때 사용할 수 있다.

 

{
  "number_1" : 210,
  "number_2" : 215,
  "number_3" : 21.05,
  "number_4" : 10.05
}

 

자바스크립트 ES5 pdf 공식문서이다 252페이지로 이루어져 있으며, ES5버전에 업데이트된 모든 기능의 설명이있다.

https://www.ecma-international.org/wp-content/uploads/ECMA-262_5th_edition_december_2009.pdf

ES6 문법

- 자바스크립트 ES6에서는 현재 사용하는 문법들중 유용한 기능이 다수 추가 되었다.

• let, const  : let과  const라는 키워드가 추가되어 변수를 할당할때 상수인지, 변수인지를 예측할 수 있게되었다.
• 템플릿 리터릴  : 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 띄워쓰기나 줄바꿈도 백틱안에서 사용이 가능하다.

const a = "안녕"
const b = "하세요"

console.log(`안녕하세요\n${a}${b}`)
//안녕하세요
//안녕하세요

• 화살표 함수 : 함수 표현식을 간결하게 작성할 수 있어 가독성 및 함수의 유지보수가 좋아졌다. 함수의 코드가 한줄인 경우에는 return을 생략할 수 있다. 화살표 함수가 익숙하지 않은 경우 함수표현식을 먼저 자주 사용하여 익숙해 진 후 화살표 함수를 조금씩 사용하여 화살표 함수에 익숙해지는 것도 좋은 방법이다. map이나 reduce같은 반복하는 메서드에서 자주 사용되기 때문에 필수로 알아두면 좋은 함수 표현식이다.

//함수 표현식
function add(a,b){
 return a + b
}

const add = (a, b) => {
  return a + b;
}
//return 생략
const add = (a, b) => a + b;

• 구조 분해 할당 : 객체나 배열을 해체 한후 각각의 값을 새로운 변수에 할당 하는 것이다. 리액트 useState Hook에서 사용된다.

const obj = {
    firstName: '유리',
    lastName: '짱구'
};
const { firstName, lastName } = obj;


console.log(obj) //{ firstName: '유리', lastName: '짱구' }
console.log(firstName) //유리
console.log(lastName)  //짱구

• Promise : 프로미스는 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용한다.

let promise = new Promise(function(resolve, reject) {
  // executor 
});

1. executor(실행함수) - 결과를 최종적으로 만들어내는 제작코드를 포함한다.
2. resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
3. reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
4. 요약 -  executor는 자동으로 실행되는데 여기서 원하는 일이 처리됨 처리가 끝나면 executor는 처리 성공 여부에 따라 resolve(valure)나 reject(error)를 호출.

• module : 재사용하기 위한 코드 조각이다 세부사항은 캡슐화 시키고 api부분만 외부에 노출시킨 코드들이다.

<script type="module" src="bbs.mjs"></script>
<script type="module" src="file.mjs"></script>

- 모듈은 파일 하나이다. 스크립트 하나는 모듈 하나이다 모듈은 스코프를 가지며 export와 import키워드를 통해 다른 모듈을 불러와 모듈에 있는 함수를 호출할 수 있다.

- React에서 각 모듈별로 js를 만들고 app.js에 가져올때 사용하거나 node.js에서도 같은 방식으로 사용이 가능하다.

1. export

// 짱구.js
export function jjangu(user) {
  alert(`Hello, ${user}!`);
}

console.log(jjangu(jjangu)) //"Hello jjangu"

2. import

//  app.js
import {jjangu} from './짱구.js';

alert(jjangu); // 함수
jjangu('jjangu'); // Hello, jjangu!

요약

• ES5는 2009년에 발행되었다. forEach, map, filter ,reduce, some, every 같은 메서드들이 추가 되었다.
• ES6는 2015년에 발행되었다. 구조분해, 화살표 함수, 모듈, let const, 템플릿 리터릴 , promise 등의 기능이 추가 되었다.

다음주 목표: ES5와 ES6에서 추가된 기능들에 대해 구체적으로 이해하고, 나만의 방식대로 사용해보기.