Search

반응형

'프론트엔드'에 해당되는 글 1건

  1. 2021.08.22 [왕초보]자바스크립트 이야기와 ES6 의미. (JavaScript and ECMAScript)
반응형

안녕하세요. 신기한 연구소입니다.

공부하기 딱 좋은 계절이 왔습니다.

자바스크립트를 공부하다 보면 ES6라는 용어가 종종 나옵니다.

물론 많은 분들이 아시겠지만 처음 공부하는 친구들은 ES6가 무엇인지 궁금해 할 수도 있겠지요?

저 또한 궁금한 마음에 찾아봤습니다.

자바스크립트(javascript)에 대한 이야기를 읽다 보면 ES6가 무엇인지 알게 된답니다.

 

인터넷을 모르던 시절 군 제대 후 복학해서 그저 당구와 술로 인생을 허비하던 때~

몇몇 친구들이 PC통신을 하고 있더군요.

처음엔 돈 들여서 왜 하지?라고 생각을 했는데

다양한 정보를 접하기도 하고 심지어 실시간으로 채팅도 한다더군요.

 

그러던 어느날 학교 공용 컴퓨터를 만나게 되었는데

윈도우즈98 운영체제에 익스플로러와 내비게이터라는 브라우저가 설치되어 있더군요.

한메일, 라이코스, 알타비스타 등 다양한 검색엔진을 통해 정보를 얻을 수 있었고

하늘사랑으로 채팅도 하고

스타크래프트 게임도 배우게 되었답니다.

심지어 배틀넷으로 다른 사람들과 게임을 한다는 것에

놀라움을 금치 못했었답니다. 

 

이땐 익스플로러와 내비게이터라는 브라우저를 사용했는데

화면으로 보여지는 면에서 익스플로러가 더 깔끔해서 자주 애용했던 기억이 있네요.

 

1996년도 이야기입니다.

1995년도 넷스케이프 커뮤니케이션즈(내비게이터 브라우저) 마크 안드레센은 

웹페이지의 DOM 과 통신을 할 수 있는 경량 프로그래밍 언어가 필요했습니다.

당시 90%정도의 웹 브라우저 시장을 점유한 넷스케이프 2.0에 자바스크립트가 탑재되었는데

브랜던 아이히가 이 언어의 최초 버전을 개발했다고 합니다.

초기엔 모카로 명명했다가 다시 LiveScript라고 불렸는데

선마이크로시스템즈와 계약을 맺게 되면서 자바스크립트로 불리게 되었다고 하네요.

그래서 자바와 자바스크립트는 사실 같은 언어는 아니지만 자바라는 이름을 같이 사용하게 된 거라네요.

 

1996년에 마이크로소프트에서는 자바스크립트와 비슷한 JScript를 인터넷 익스플로러 3에 탑재하게 됩니다.

하지만 두 회사의 스크립트는 비슷하긴 했지만 다른 부분도 있었기에 

개발자들이 구현하기 힘들었던 부분이 있었습니다.

익스플로러에 맞춰 개발하면 내비게이터에서 오류가 나거나 그 반대인 경우도 있었지요.

그래서 스크립트에서 브라우저 버전을 체크해서 다른 스크립트로 구현했던 기억도 나네요.

 

인터넷 사용자들이 증가하고 이에 따라 효율적으로 통합된 스크립트가 필요하게 됩니다.

다시 말해서 브라우저와 관계없이 유연하게 작동하는 통합 스크립트가 필요하게 된 겁니다.

그래서 1996년 넷스케이프 커뮤니케이션즈에서 

컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인

ECMA(European Computer Manufacturers Association)

에 표준화 작업을 요청합니다.

1997년 ECMA-262, 자바스크립트 초판이 나오게 됩니다.

바로 ES1 (ECMAScript 1)이 초기 버전이 됩니다.

이후 E2부터 2015년 ES6버전까지 나오게 되며

ES7부터 ES11(2020년)까지 나오지만 ES6버전으로 표준이 정립되게 됩니다.

 

이제 ES6가 무엇인지 알게 되었네요. ㅎㅎ

참고로 ES6 버전부터 let, const라는 키워드도 추가되었답니다.

 

자바스크립트는 브라우저의 보조적 스크립트 프로그래밍 언어로 시작했지만

점점 발전하게 되어 이제는 Ajax로 비동기 방식 통신도 지원하고

jQuery로 DOM을 더 쉽게 컨트롤할 수 있게 되었으며

V8 자바스크립트 엔진의 등장으로 자바스크립트 런타임 환경인 Node.js 가 2009년도 나타납니다.

Node.js는 서버 사이드 애플리케이션 개발에 주요 사용된답니다.

그리고 이제는 SPA(Single Page Application), 단일 페이지 애플리케이션의 시대가 되었다고 합니다.

Angular, React, Vue.js 등 SPA 프레임워크 또한 많은 영역에서 사용을 하고 있답니다.

 

올 초에 잠시 발을 담갔던 공공 프로젝트의 UI 소스를 본 적이 있었습니다.

하나의 소스에 여러 화면에 대한 html이 작업되어 있었고

상황에 따라 동적으로 표현되도록 개발되어 있었습니다.

각 페이지마다 필요한 데이터만 동적으로 서버에 요청해서 받을 뿐

html은 처음 호출 때 이미 가지고 있었던 겁니다.

왜 이렇게 복잡하게 만들었을까?라는 생각을 했었는데

바로 SPA로 개발된 소스였답니다.

방금 말한 대로 초기에 모든 화면의 html을 불러와야 하는 부담과

개발할 때 하나의 소스 파일에 여러 화면을 동적으로 구성해야 하는 복잡성이 단점이지만

이렇게 구현이 되고 나면 사용상의 성능은 훨씬 좋아지게 된다고 합니다.

 

모르면 배워야 합니다.

내가 모르면 이건 잘못된 것이다, 이상하다고 생각하면 안 되겠지요?

이번에 또 하나를 배워갑니다.

자바스크립트 이야기는 이 정도로 하고

다음 포스팅부터는 기초적인 문법을 아주~ 쉽게 같이 공부해보도록 하겠습니다.

반응형