[WIL] ES란? | 이노베이션 캠프 동북권 - 2주차 회고

🚢 이번 항해는?

금요일부터 시작한 6일간의 알고리즘 주차가 딱 6월에 끝이 났다.

2주차 팀원분들과 프로그래머스 1단계 50문제를 풀었는데, 달리기반으로 주어진 문제보다 12문제를 더 푼 셈이다.

우리 팀은 노션을 적극 활용했다. 각자의 풀이도 공유하고 참고하면 좋은 글들이나 필요했던 개념들을 계속 노션에 추가해 나갔다. 6일만에 제법 쌓여서 복습할 때 활용하면 좋을 것 같단 생각이 든다.

뒤로 갈수록 1단계 내에서도 문제가 길고 조금 생각을 해야 하는 (주로 카카오) 문제들을 접할 수 있었다.

알고리즘을 알면 쉽게 풀렸던 비밀지도 문제나, 정규표현식으로 깔끔하게 푼 풀이를 보고 놀랐던 다트게임 문제 등이 기억에 남는다. 빠른 시일 내에 집중해서 1단계 문제들을 대부분 살펴볼 수 있어서 의미있는 시간이었다.

이제 1단계는 접수(?)했으니 이제 알고리즘 강의를 꾸준히 듣고 2단계 문제 풀이에 집중할 수 있을 것 같다.

 

중간중간 알고리즘 모의고사와 테스트도 진행되었다.

게더타운에서 시험장으로 이동해 책상 앞에 놓여진 오브젝트로 주어진 문제를 확인하고 리플릿(Repl.it)의 Node.js 환경에서 푼 다음, 간단한 문제 요약 및 풀이 해설 영상을 찍어 유튜브에 업로드해서 제출하는 방식으로 진행되었다.

1주차 때 프로젝트 시연 영상 때문에 유튜브에 처음 업로드 했었는데, 몇 번 반복했다고 이제 좀 능숙해졌다.

그리고 구독자 한 분이 생겼다. 왜지?

 

🐋 리액트 입문 주차 시작

7월은 3주 동안 주특기 주차가 진행된다. 이노베이션 캠프에서는 리액트와 스프링 중 주특기를 고를 수 있는데, 나는 프론트엔드 지망이기 때문에 리액트를 선택했다. 이번 주는 입문 주차이고, 숙련 주차와 심화 주차가 남아있다.

리액트 기초 강의를 받아서 3주차 초반까지 들었는데, 튜터님 강의력도 좋으시고 리덕스와 파이어베이스도 다루고 있어서 빠르게 완강 후 리액트를 다루는 기술 책 24장부터 실습해보자는 계획을 세웠다.

 

알고리즘 주차가 끝나고 본격적으로 리액트를 공부하기 시작해서 그런지 더 재밌게 느껴진다 🥳

개인 공부 시간이 많이 주어지니까 필요한 공부를 할 수도 있고, 중간중간 팀원들과 토의할 수 있는 질의응답 과제나 개인 구현 과제도 주어져서 이번 주차도 알차게 보낼 수 있을 것 같은 느낌이다.

 

📚 JavaScript 더 파고들기

계속 Deep Dive 책과 모던 JavaScript 튜토리얼의 글들을 읽으면서 아직 이해가 확실하지 않은 개념들을 채워나가고 있다. 입문 주차 진입과 함께 Starting Assignment 로 받은 주제들을 글로 정리하면서 특히 실행 컨텍스트와 호이스팅 개념에 대해 더 자세히 살펴볼 수 있었다.

 

2022.07.01 - [JavaScript] - [S.A.] JavaScript 이해 | 이노베이션 캠프 - 리액트 입문주차

[S.A.] JavaScript 이해 | 이노베이션 캠프 - 리액트 입문주차

 

오늘은 JavaScript의 ES가 무엇인지, ES5와 ES6의 문법 특징을 정리해보고자 한다.

> ECMAScript와 JavaScript

ECMA(European Computer Manufacturers Association) International 에서 관리하는 표준에는

[ECMA-262] ECMAScript (JavaScript)
[ECMA-402] ECMAScript 2020 Internalization API
[ECMA-404] JSON
[ECMA-408] Dart Programming Language

등이 있다.

 

이 중 ECMAScript(ES)는 JavaScript의 표준 사양인 ECMA-262를 말한다. ECMA 인터내셔널의 산하 기술 위원회(Technial Committee)들 중 TC39에서 JavaScript의 명세를 정의, 관리 및 논의하고 있다. TC39에는 Mozilla, Google, Apple, Microsoft 등의 메이저 브라우저 벤더를 비롯해 Facebook, Twitter 등 다양한 단체들이 구성원으로 참가 중이다. TC39에서 내리는 결정은 단순 다수결이 아닌 컨센서스 체제로 이루어지고, 회의록은 모두 웹상에 공개되어 있다.

 

프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정하면 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현하게 된다.

 

JavaScript는 언어의 기본 뼈대를 이루는 ECMAScript에, 브라우저가 별도로 지원하는 클라이언트 사이드 Web API를 전부 아우르는 개념이다. Web API에는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web storage, Web Component, Web Worker 등이 있다. ECMAScript와는 달리 W3C(World Wide Web Consortium)에서 별도의 사양으로 관리하고 있다.

> ES5, ES6(2015)

1995년 넷스케이프 커뮤니케이션즈에서 웹 페이지의 보조적인 기능을 수행하기 위해 Brendan Eich가 개발한 JavaScript를 도입하기로 결정했고, 얼마 지나지 않아 마이크로소프트에서 JavaScript의 파생 버전인 JScript를 출시하고 IE 3.0에 탑재하게 된다. 각 회사는 자사 브라우저의 점유율을 높이기 위해 기능들을 경쟁적으로 추가했고, 이에 따라 크로스 브라우징 이슈가 발생하기 시작했다.

 

1996년 11월, 넷스케이프 커뮤니케이션즈에서 ECMA 인터내셔널에 자바스크립트의 표준화를 요청했고, 1997년 7월에 초판인 ES1 사양이 완성되었다. 이후 1999년에 정규 표현식과 try...catch 문을 도입한 ES3을 공개하고, 10년 뒤 2009년에는 HTML5와 함께 ES5가 표준 사양으로 출시되었다.

 

ES5에서는 JSON(XML에서 변화), strict mode, 접근자 프로퍼티 및 프로퍼티 어트리뷰트 제어(getter, setter)와 더 향상된 배열 조작 기능들(forEach, map, filter, reduce, some, every)이 추가되었다.

이때까지 자바스크립트의 함수는 사용 목적에 따라 명확히 구분되지 않았다. 일반 함수로써 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로써 호출할 수도 있으며, 객체에 바인딩되어 메서드로써 호출할 수도 있었다. 즉 모든 함수가 callable이면서 constructor라는 뜻인데, 어떻게 보면 편리할 것 같지만 안정성이 떨어지고 성능 면에서도 손해였다.

 

2015년에 공개된 ES6(ECMAScript 2015)에서는 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다. 그래서 보통 ES6 이전과 이후로 기준이 나뉘게 된다.

주요 변경점으로는  let/const 키워드, 화살표 함수, 클래스, 모듈 import/export, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, Symbol, Promise, Map/Set, 이터러블, for ... of, 제너레이터, Proxy 등이 있다.

ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분한다.

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	⭕	⭕	❌	⭕
메서드(Method)	❌	❌	⭕	⭕
화살표 함수(Arrow)	❌	❌	❌	❌

 

화살표 함수에 대해서는 이전에 정리한 글이 있어 아래에 첨부해 본다.

2022.06.05 - [JavaScript] - [JavaScript] 화살표 함수와 this

[JavaScript] 화살표 함수와 this

 

Reference >

• https://ahnheejong.name/articles/ecmascript-tc39/
• 모던 JavaScript Deep Dive p.6-8, 13-14, 469-471
• https://developer.mozilla.org/ko/docs/Web/API