향해99 WIL 14일차

향해 시작한지 벌써 2주가 되었다 그동안 많이 배우기도 하고 많은 생각이 들었었다.

2주차에는 프로그래머스 자바스크립트 알고리즘 테스트와 주특기 React 입문 주차가 시작되었다. 우선 알고리즘 때에는 정말 어려웠다. 이 문제를 어떻게 풀어야 하는 지 어떤 문법을 써야 풀어야 하는지 이런 것들을 하나도 모르니까 너무나도 막막했다. 그래도 너무나도 좋은 팀원들을 만나서 실력이 처음 했을때 보다 정말 많이 늘었다 정말 팀원들에게 너무나도 감사했다 내가 어색해서 먼저 말을 걸지 못할때도 먼저 찾아와주셔서 궁금한거 물어보라고 이런 것들이 나는 너무나도 감사했다. 팀원들이 그렇게 잘 가르쳐주셨기 때문에 알고리즘 테스트에서 통과할 수 있었지 않았나 싶다

그리고 React 입문 주차가 시작됐다. 진짜 너무나도 어렵다 너무너무너무 어렵다 영상을 보고 다시 돌려보고, 이해 안가서 다시 보고 해도 이해가 너무나도 안갔다. 그래도 어쩔수가 없다. 계속해서 공부를 할 수 밖에 ..

React 에서 중요한 JavaScript의 ES란?와  ES5/ES6 문법 차이 를 알아 보겠다

 

JavaScript의 ES란?

Javascript는 원래 넷스케이프에서 시작된 언어인데, 프로그래밍 언어들의 근간이라고 볼 수 있는 C언어보다 훨씬 나중에 개발된 언어이다. 자세한 역사는 해당 링크를 통해 가보면 될 것이다. -> 'Javacript란?'

결과부터 말하면 ES라는 것은 'Javascript의 표준 규격'을 의미하는데, 이것이 탄생한 배경에는 '브라우저 전쟁'이라고 하는 웹 브라우저 시장에서의 점유율 싸움이 있었다. 넷스케이프 사에서 개발한 Javascript가 선풍적인 인기를 끌기 시작하자 마이크로소프트 사에서도 IE 3(우리가 알고있는 인터넷 익스플로러)에 JScript라는 이름으로 자바스크립트를 탑재했지만, 실제적으로는 둘의 내용이 매우 달라서 같은 기능을 구현하더라도 개발자들이 해야할 일과 시간이 훨씬 늘어나게 되었다.

실제로 서로 사용자를 끌어들이기 위해 이것저것 기능을 추가하다 보니 Javascript와 JScript는 점점 다 달라지는 경향을 보였고, 이에 보다못한 European Computer Manufacturers Association (ECMA, 현 ECMA International)에서 Javascript에 대한 표준을 정하게 되었다.

또, ECMA에서는 Javascript의 표준만 정하는게 아닌 다른 표준안도 정하기 때문에 그것들과 구분하기 위해 숫자를 붙였고 이것이 262가 되었다. 즉, ECMA 262는 자바스크립트의 표준 규격이라고 생각하면 된다. 현재 우리가 ES라고 부르는 것은 ECMA Script의 약자이며, ES5는 ECMA Script 5의 규격을 따른다고 생각하면 된다.

 

ES5/ES6 문법 차이

---------- 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');
});

 

 

출처

https://velog.io/@picapipicca/Js-ES5-vs-ES6-%EB%AC%B8%EB%B2%95-%EC%A3%BC%EC%9A%94-%EC%B0%A8%EC%9D%B4