항해 99 - 2022.01.23.SUN /이번주의 나는 (ES5/ES6)

이번 챕터 일정

• 01/21 (금) 21:00까지 : S.A 제출
• 01/25 (화) 20:00~ : React 학습 로드맵 세션
• 01/27 (목) 21:00까지 : 주특기 입문 주차 개인/팀 과제 제출 완료

오늘 내가 할 일

• 3주 차 6강까지 인강 듣기✅
• 개인과제 틀 제작❎
• 백준 알고리즘 문제 풀고 정리  (1시간)❎

이번 주의 나는?

- 01.14~ 01.20 알고리즘 주차

 

알고리즘은 예상처럼 처음에는 전혀 감을 잡지 못했는데 알고리즘 조장분이 알고리즘 문제를 풀어본 적 있으셔서 첫 단추부터 차근차근 잘 풀렸던 거 같다.

조장님을 선두로 문제를 하나하나 풀고 정말 어쩌다 한번 혼자 힘으로 탁 풀었을 때의 쾌감이란,,,ㅋㅋㅋㅋㅋ

 

알고리즘을 자바스크립트로 풀어가면서 자바스크립트 문법에 대한 이해도가 높아진 주차여서 너무 좋았다. 

그리고 사실은 뭐,,, 솔직하게 말하면

사람끼리 만나는 스터디가 망하는 걸 많이 봐왔던 사람으로서

공부 방식에 대해 살짝 의문을 가졌지만

 

조를 잘 만나서 그런가, 알고리즘이 나랑 맞아서 그런가,

정말 조원 덕을 톡톡히 보고

생각이 긍정적으로 바뀌었다 ㅋㅋㅋ 

 

이번 주 WIL의 키워드

1. JavaScript의 ES란?

 

넷 스케이프 사의 자바스크립트가 부러웠는지 사용자 층을 더 끌어내기 위해 MS의 IE 3에도 JScript라는 이름으로 자바스크립트를 탑재하였다. 둘의 내용이 너무너무 달라서 개발자가 하는 일이 늘어났고, 사용자를 더 끌어들이기 위해서 두 개는 점점 더 달라졌다

이에  European Computer Manufacturers Association(ECMA, 현 ECMA International)에서는 이러한 자바스크립트에 대한 표준을 내리게 된다.

 

쉽게 말해 자바스크립트의 표준규격이다!

 

2. ES5/ES6 문법 차이

ES3 (1999)

우리가 흔히 말하는 자바스크립트

함수 단위의 스코프, 호이 스팅, 모듈화 미지원, 프로토타입, 클로저 등등 자바스크립트의 기본적 특징

대부분의 브라우저에서 지원

IE8까지 크로스 브라우징 하는 환경이면 ES3를 쓰고 있다

ES5 (2009)

4는 너무 급변해서 거절당하고 5가 나왔다.
기본적으로 IE9부터 본격적인 지원을 하지만 es5-shim을 사용하면 하위 버전에서도 특정 기능들을 지원

• 배열
  배열과 관련해서 새로운 메서드들이 많이 생겼는데 대표적으로
  forEach, map, filter, reduce, some, every와 같은 순환 메소드들이 생겼다.
  이 메서드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과가 있다.
• 객체
  일단 눈에 띄는 점은 객체의 프로퍼티에 대한 설정을 할 수 있다는 것이다.
  객체를 생성/수정/복사하는 표준 메서드들(Object.create(), Object.defineProperty(), Object.freeze(), Object.assign() 등등)과 getter/setter 등등
  또한 Object.keys 메서드를 쓰면 for in 메서드도 대체할 수 있게 된다.
• strict 모드
  문법을 좀 더 깐깐하게 체크하는 모드이다.
  물론 이유 없이 그러는 게 아니라 좀 더 코드를 안전하게(에러가 안 나게, 미연에 방지하고자) 등장했다.
  특징은 아래 링크를 통해 확인해보자.
  Strict mode - JavaScript | MDN
• bind() 메서드
  this를 강제로 bind 시켜주는 메서드이다.
• 실행 콘텍스트 내에 존재하는 Lexical Environment
• JSON(JavaScript Object Notation)
  과거 통신을 할 때 데이터를 XML 형태로 많이 주고받았다.
  하지만 JSON이 좀 더 경량화돼있는지 요새는 JSON이 대세다.
  JSON은 자바스크립트의 객체 리터럴과 생긴 건 유사한데 다음과 같은 차이점이 존재한다.

1. 키는 무조건 큰따옴표(“”)로 감싼 문자열 이어야 한다.
2. 주석은 사용할 수 없다.
3. 프로퍼티로 메서드는 불가능하다.
4. 프로퍼티에서도 메서드의 사용이 불가능하다.
   통신을 위해 Object를 JSON으로 바꾸는 방법은 JSON.stringify(obj)이고, 자바스크립트 코드에서 사용하기 위해 JSON은 Object로 바꾸는 방법은 JSON.parse(json)이다.

ES2015(ES6)

원래는 ES6였는데  ES2015로 바뀜(사람들이 헷갈려해서)
ES6 Harmony라고도 불리는 것 같다.

ES2015 들어서면서 다음과 같은 문제점들이 해결되었다

• 호이 스팅이 사라진 것 같은 효과
• 함수 단위 스코프에서 블록 단위 스코프로 변경
• this를 동적으로 바인딩하지 않는 애로우 펑션
• 모듈화 지원
• 콜백 지옥의 구원자, Promise
  • (ES6) ajax 위주의 promise 실습
  • (ES6) Promise에 파라미터를 넘겨서 사용해보자
• Default, Rest 파라미터
• 해체 할당, Spread 연산자
• 템플릿 리터럴
• 클래스
  이 외에도 특징은 엄청나게 많아서 사람들이 이 부분에서 많은 장벽을 느끼는 것 같다.
  일단 브라우저(특히 MS 계역)에서 지원해주지 않는 경우가 많아
  바벨이라는 트랜스 파일러를 써야 하는데 바벨 웹 사이트 REPL에서도 즉시 변환이 가능하다.
  하지만 매번 번거롭게 하기 귀찮으니 바벨을 설치해야 하는데…
• 바벨은 웹 브라우저가 아닌 노드 JS 위에서 돌아가고…
• 노드 JS에서 바벨을 설치하려면 NPM을 알아야 하고…
• 또 모듈화를 사용하려면 웹팩과 같은 모듈 번들러를 사용해야 하고…

 

 

 

 

📍출처

https://perfectacle.github.io/2017/04/26/js-001-es/

(자알쓰) ECMASCript? ES?