웹개발을 위한 언어 자바스크립트 / 웹생태계의 미래

UI 디자이너가 알아야할 정보정리 : Java Script and web

네이버 데뷰 2018 영상 중 발췌 
Java Script에 대한 간략한 역사 설명 + 변화하는 JS 환경에 대한 이야기


https://tv.naver.com/v/4578347/list/279844

JavaScript 배틀그라운드로부터 살아남기

웹브라우저 초창기 시절 넷스케이프 사와 Sun 사가 같이 개발한 자바스크립트.

JS의 또다른 이름 +  JS의 친구들
자바스크립트를 이해하기 위한 중요 키워드들이기도하다.





JS 역사의 중요한 변환점들

SPA (싱글 페이지앱)의 기반이 되는 AJAX 기술의 1999년에 IE5에 추가됨
제스 제임스 가레트라는 개발자에 의해서 2005년대에 유명해지기 시작함.

Json 기술이 '발견' 되어 기존의 XML 기술을 대체하는 형태로 진행됨 (2006년 12월)

서버사이드 JS인 Node.js가 2009년 11월, 라이언 달이라는 개발자에 의해 만들어짐

ECMA 스크립트 내에서도, ESM 스크립트를 사용할 수 있는 표준 모듈에 대한 논의가 진행되어
개별적으로 파편화되어있던 JS 변형형태들이 공용으로 묶이게되는 계기가 됨 (2009년)

Node Package Manager (NPM) 




자바스크립트용 패키지 매니저 등장 (2010)
https://www.npmjs.com

npm

Bower 웹 패키지 매니저 등장 (2012)
하지만 현재는 사실상 멸종하게되었습니다.

1세대 프레임워크의 등장

-  jquery (2006)
-  프로토타입 (2005)
-  moot tools (2007) 등

2세대 프레임워크의 등장 ~ 독주

-  Angular JS (2009년도 등장, 2013년도에 뜨기시작)
-  React (2013년 5월)
-  Vue.js (2014년)



프레임워크에 대한 자세한 설명은 아래 게시글을 참조
https://clay1987.blog.me/221394305511?Redirect=Log&from=postView

181108. 정보정리 : 자바스크립트 프레임워크 - Vue.js / UI 프레임워크 - Vuetify

과거의 브라우저와 달라진 브라우저 버전에 대한 논의가 굳이 중요해지지않은 현재.
과거에는 버전하나에 울고웃는 경우가 자주 있다가, 현재에는 알아서 업데이트되는 형식으로 변경됨.




에버그린 브라우저에 대한 정리

에버그린 브라우저(Evergreen Browser)란, 자동적으로 브라우저가 사용자에 대한 별도의 재설치를 요구하지 않고도 업데이트 가 가능한 브라우저를 말한다. 초기 웹브라우저들은 Evergreen 방식을 사용하지 않으나, Web 기술의 발전에 따라 사용자의 편의성과 업데이트를 위해 설계된 방식이다. Chrome은 대표적인 에버그린 브라우저이며, Firefox나 근래의 IE와 같은 많은 주요 브라우저들이 Evergreen 방식의 업데이트로 브라우저를 제공하고 있다.


물론 여전히 서비스를 유지하는 웹개발자 입장에서는 - 사용자들의 주요 사용 IE 버전이 이슈가되긴함

바닐라. 즉, 순수 JS만 갖고 개발하는 경우는 별로 없다. 항상 프레임워크나, 다른 툴을 연계해서 - 최종 결과물을 json형식으로 주고받던가. js 형식으로 변환만 하는 방식이 많음. 그래서 NPM을 통해 필요한 내용을 가져와 조립하는 방식이 대부분.

개별기능을 사용하기 위한 개별적인 외부 라이브러리 -> 이제 왠만한 기능들은 프레임워크 안에 다 있다!

개발자의 성지인 깃헙에서도 더이상 1세대 프레임워크인 Jquery를 사용하지않게되었다.  
https://githubengineering.com/removing-jquery-from-github-frontend/

Removing jQuery from GitHub.com frontend

Babel이 왜 중요한가에 대한 이야기 (구 : 6to 5)

ES6 자바스크립트 최신 문법을 - 이전 브라우저 호환코드로 변형해주는 바벨. 즉, 과거 문법에 얽메이지않고, ES6 문법에 맞는 최신형태로 개발해도 전혀 문제가 없다는 이야기다. 반대로말하면, 브라우저에서 구현이 안되어서 ES6를 사용할 수 없었던 가장 큰 이유가 브라우저들과 자바스크립트간의 기술지원 격차에 있다는거.

https://babeljs.io

Java Script는 여전히 개선 / 성장중인 언어다.

2017년에는 ES8이 나왔고, 2018년도에는 ES9, 2019년에는 ES10으로 계속해서 업데이트중이다. 언어를 사용하는 입장에서 축약하고, 간단하게 언어를 사용할 수 있게 변경점이 추가되고있지만, 정작 브라우저가 이 속도를 못 따라가고있다. 그래서 사실상 ES6 정도를 겨우 지원하고있는것.

웹 어셈블리는 최근 등장한 언어규격이다. 

물리적인 기계 (예 : PC)와 소통할 수 있는 C나 C++ 언어를 변환해, 여러 브라우저에서 빠르게 실행할 수 있도록 변환하는 기술이다. 간단히 말해서 C와 C++ 배우던 개발자들의 영역도 웹개발자들이 침범할 수 있는 시대가 되었다는거. 

주로 게임용으로 자주 쓰이겠지만, 이게 결국 주요 PC 프로그램을 경량화 -> 웹에다 올리는 형식의 기반이된다고 보면 될듯.
 
https://developer.mozilla.org/ko/docs/WebAssembly

웹어셈블리

Vue. js에서는 Nuxt.js와 뷰티파이에대해서 꼭 알아둬야할 상황이 되었고.
vue로도 네이티브 앱 개발이 가능해짐. 

https://ko.nuxtjs.org

Nuxt.js - Universal Vue.js Applications

Node.js는 백엔드 개발자가 아니면 직접 건드릴 이유는 없곘으나. NPM을 사용하기위해 꼭 설치해야할 프로그램들중 하나. 앞으로도 무조건 쓰이게될 프로그램으로서 자리잡은 상태.

Bower는 사실상 이제 망했고. 더이상 개발을 지원하지 않을 가능성이 높음. 
NPM 다음에 논해지는게 Yarn인데, 더이상 속도에 대한 장점조차 별로 의미가 없어져서. 굳이 신경쓸필요 없어보임.

그러니 NPM 쓰세요 개발자 여러분.

자바스크립트로 왠만큼 프론트, 백, 둘다 개발할 수 있게 되어서. 자바스크립트가 킹왕짱 세졌다는 이야기.





웹디자인 관련해 미래를 좌우할 자바스크립트 언어에 대한 내용은 다음 글을 참조하시라.
https://clay1987.blog.me/221384948332?Redirect=Log&from=postView

181025. 정보정리 : 웹 생태계의 미래를 이끄는 언어 - Java Script / Json

---

이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!

단톡방 이용안내

https://brunch.co.kr/@clay1987/113

UI 디자인 연구소 - 오픈 카톡방 이용안내