[WIL] 항해99 - week 2

1. JavaScript의 ES란?

 

자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었다.

표준을 위해 자바스크립트를 ECMA( European Computer Manufacturers Association ) 라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다.

ECMA가 다루는 표준 (출처 : 위키)

종종 보게 되는 ES란 ECMA Script의 약자이다. ES5는 ECMA Script 5의 규격을 따른다고 생각하면 된다.

2. ES5/ES6 문법 차이

1. arrow 지원

• 익숙하면 편하고 간결해진 코드를 작성할 수 있다.

---------- ES5 ----------
1. function getNum() {
  return 10;
}
2. function getArr() {
  return [1, 2, 3];
}
3. function getObj() {
  return { a: 1, b: 2, c: 3 };
}
4. function calcCircleArea(radius) {
  if (!radius) {
    return null;
  } else {
    return Math.PI * radius * radius;
  }
}

---------- ES6 ----------
1. const getNum = () => 10;
2. const getArr = () => [1, 2, 3];
3. const getObj = () => ({ a: 1, b: 2, c: 3 }); 
4. const calcCircleArea = (radius) => {
  if (!radius) {
    return null;
  } else {
    return Math.PI * radius * radius;
  }
};

• this를 바인딩 하지 않고 선언된 scope의 this를 가리킨다는 장점

ES5- 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.

var thisTest = {
     name : "최 윤진",   
     age : 27,
     info : function() {
          console.log(this)
          console.log(this.name , this.age)

          function innerInfo(){
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

// 실행결과 
// {name: "최 윤진", age: 27, info: ƒ}
// 최 윤진 27
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.

ES6- this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

let thisTest = {
     name : "최 윤진",   
     age : 27,
     info() {
          console.log(this)
          console.log(this.name , this.age)
 
          innerInfo = () =>{
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

2. 템플릿 리터럴 (Template literals)
-백틱을 사용하면 문자열 데이터를 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다. 이중 따옴표("")나 작은따옴표('')로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능하다.

----------ES5----------
const shoesPrice = 25000
console.log("이 신발의 가격은" + shoesPrice + "원입니다.")
----------ES6----------
const shoesPrice = 25000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다.`)

3. 변수 선언방식

----------ES5----------
var만 존재 ; 변수 선언시 사용됨, 재할당과 재선언에 자유로움

var a = 17;
a = 25;
console.log(a); //25
var a = 50;
console.log(a); //50

----------ES6----------
대부분의 프로그래밍 언어는 블록 레벨 스코프지만, JS는 함수 레벨 스코프
(Function-level scope)를 따른다.
블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다

let a = 10;
a = 15;
console.log(a); //15
let a = 12; // Identifier 'a' has already been declared

<let vs const>
한번 선언된 변수에 동일한 이름으로 선언 불가,재할당 가능 vs 재할당/재선언 불가

const a = 30;
console.log(a); // 30;
a = 35; // TypeError: Assignment to constant variable.

• 블록 레벨 스코프
  코드 블록 또는 function 스코프 내에서 선언된 변수는 해당 스코프 내에서만 유효하고 해당 스코프 밖에서 안에있는 변수를 참조할 수 없다.쉽게 말하자면, 중괄호({})로 묶인 부분 내부에 선언된 let,const를 중괄호 외부에서 참조할수 없음.
  (* var : function 스코프에서는 내부에 선언된 var를 외부에서 참조할수 없지만 블록스코프 내부에 선언되어 있다면 외부에서 참조가능)

5. 모듈 (import / export 추가)

ES5 - 각 기능별로 js 파일을 나누고 개발,관리하는것 불가능
ES6-import/export로 모듈관리

< Export module >
var testModule = { a: 1, b: 2 };
---------- ES5 ----------
module.exports = testModule;
---------- ES6 ----------
export default testModule;
---------- ES6 (child modules) ----------
export const a = 1;
export const b = 2;

< Import module >
---------- ES5 ----------
var testModule = require(./testModule);
---------- ES6 ----------
import testModule from './testModule';
---------- ES6 (child modules) ----------
import { a, b } from './testModule';

6. 클래스
ES5- 프로토타입을 통해 실현가능
ES6- new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다.
(프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우에 클래스 문법을 사용할 수 있다)

7.callback hell을 해결하기 위해 Promise가 도입

비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값이라는 속성을 갖고 있다. resolve, reject를 호출하여 진행 상태를 결정할 수 있다 promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다. then(), catch()는 일의 진행 상태를 나타내는 객체다. promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected일 때는 아무것도 하지 않는다

⑴ 동기
요청과 응답이 동시에일어난다.설계가 간단하고 직관적이지만 응답이 있을때까지 대기
ex) 은행 계좌이체

⑵ 비동기
요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능

---------- ES5 (callback) ----------
function isEvenNumber(num, callback) {
  if (num % 2 === 0) {
    callback(true);
  } else {
    callback(false);
  }
}
isEvenNumber(10, function(result) {
  if (result) {
    console.log('even number');
  } else {
    console.log('odd number');
  }
});
---------- ES6 (promise) ----------
const isEvenNumber = (num) => {
  return new Promise((resolve, reject) => {
    if (num % 2 === 0) {
      resolve(true);
    } else {
      reject(false);
    }
  });
};
isEvenNumber(10).then((result) => {
  console.log('even number');
}).catch((error) => {
  console.log('odd number');
});

#한 주를 마무리하며...

알고리즘 기간은 첫 주보다 더 여유로웠습니다.

알고리즘 내용도 어렵지 않았고 문제를 푸는 과정 또한 재미있었기 때문에 시간에 쫓기는 느낌이 덜 했습니다. 

아쉬운 점은 한 주동안 많이 풀려서 다시 정신을 바짝 잡아야 한다고 생각이 들었습니다. 

알고리즘은 꾸준히 하고 싶지만 다른 과제가 있기 때문에 추후에 다시 생각해보기로 했습니다.

 

리액트를 맛보기로 이틀동안 공부를 했지만 쉬워보이면서 어려웠습니다. CRUD를 바탕으로 공부를 하면서

개념을 익히고 과제 풀이를 준비하고 있습니다.

 

다시 정신을 잡는 한 주가 시작되겠다는 생각이 들었습니다.