자바스크립트란?
자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하게 됩니다.
HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있습니다. 따라서 단순히 콘텐츠 제작만을 생각하는 프론트엔드 초보 개발자에게는 가장 어려운 부분이라 할 수 있습니다.
자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
자바스크립트 특징
- 동적이며 타입을 명시할 필요가 없는 인터프리터 언어 이다.
- 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
- HTML의 내용, 속성, 스타일을 변경 할 수 있다.
- 이벤트를 처리하고 사용자와의 상호작용을 가능하게 함.
- AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공.
자바스크립트 버전
자바스크립트는 1995년 처음 발표되었으며 웹의 발전과 함께 성장 하였으며 한때 브라우저마다 지원되는 자바스크립트의 차이로 인해 문제가 발생하기도 했습니다.
2000년대말 스마트폰이 세상에 등장하면서 모바일 개발이 빠른 속도로 성장 했으며 웹 기반의 응용프로그램들이 대거 개발되면서 웹에 동적인 기능을 구현할 수 았는 자바스크립트 역시 발전에 속도를 더하게 됩니다.
현재는 자바스크립트 전성시대로 Vue, Angular, React 와 같은 프론트엔드 프레임워크에서 부터 Node.js 를 기반으로 하는 서버 프로그래밍 영역까지 자바스크립트가 널리 사용되고 있습니다.
ECMAScript 는 자바스크립트의 표준규격으로 볼 수 있으며 ES5 부터 기존과 다른 새로운 구조가 많이 추가 되었습니다.
ES5(2009) 주요특징
- 10년만에 릴리즈된 새로운 자바스크립트 버전.
- 일반적으로 자바스크립트의 가장 기본이 되는 버전.
- 배열에 forEach, map, filter, reduce, some, every 등의 메서드 지원.
- Object 에 대한 getter/setter 지원.
- JSON 지원.
ES6(2015) 주요특징
- 2019년 현재 가장 보편적으로 적용되는 JS 버전임.
- 대부분의 브라우저에서 지원되는 사실상의 표준 규격.
- let, const 키워드 추가.
- arrow 문법지원.
- iterator / generator 추가.
- module import / export 추가.
- Promise : 자바스크립트 비동기 콜백 문제 해결.
ES8(2017) 주요특징
- 향후 점진적으로 고려해야 할 JS 버전.
- async / await 비동기 관련 처리 추가.
- Object, String 등에 기능 추가.
자바스크립트 적용 분야
현재 자바스크립트는 네이버, 구글과 같은 WWW 서비스에서 부터 데스크탑 응용 프로그램 까지 사용되지 않는 곳이 없습니다.
네이버를 예로 살펴보면
- 메인화면에서 마우스를 올리면 광고위 동영상 재생(201902)
- 최신 뉴스 제목 자동으로 스크롤
- 실시간 인기 검색어 자동 스크롤
- 쇼핑, 뉴스스탠드 등 < >를 클릭하면 현재화면은 유지하면서 해당 콘텐츠의 페이지 섹션의 페이지만 변경
그외에도 다음과 같은 기능들은 대부분 자바스크립트를 사용하는 것입니다.
- 웹페이지에 날씨정보 출력(날씨 정보 사이트에 실시간 데이터 요청후 출력)
- 홈쇼핑등에서 웹 브라우저를 통한 고객상담 채팅
- 클릭하면 숨겨진 메뉴가 나오거나 탭형태의 화면 구성
- 선택에 따라 일부 화면이 바뀌거나 움직이는 형태
Vue, Angular, React
자바스크립트가 현재 가장 널리 사용되는 분야는 프론트엔드 프레임워크 영역 입니다. 자바스크립트 본래의 영역 이기도 하고 하이브리드 앱, 모바일 웹, 최근에는 데스크톱 영역까지 확대되었습니다. Vue, Angular, React 는 가장 대표적인 프론트엔드 프레임워크로 향후 기본적인 자바스크립트 학습이후 도전해야 할 것들입니다.
1) AngularJS
구글에서 만들었으며 MIT 라이센스로 누구나 무료로 사용 할 수 있습니다. 본격적인 자바스크립트 프론트엔드 프레임워크의 시초라 할 수 있으며 2010년 처음 발표 되었습니다.
주요특징
- 기존보다 훨씬 적은 코드로 원하는 기능을 구현할 수 있음.
- 양방향 데이터 바인딩.
- MVC, MVVM 을 지원해 구성요소의 명확한 분리가 가능.
참고자료
AngularJS2(이후 Angular) 가 2016년에 발표되면서 타입스크립트(Type Script)가 기본으로 사용되고, 구성방식, 아키텍처, 도구등의 변경으로 기존 개발자들이 적응하기 어렵게 되었으며 점점 거대화 되는 구조와 높은 학습곡선(Learning Curve) 그리고 React 와 Vue 같은 새로운 프레임워크의 등장으로 현재는 처음보다 사용자는 줄어든 상태라 볼 수 있습니다.
2) React
페이스북에서 만들었으며 UI 라이브러리에 특화되어 있으며 재사용 가능한 UI 컴포넌트 생성을 지원 합니다. 또한 가상돔(Virtual DOM)이라는 개념을 사용해 보다 빠르게 웹 콘텐츠의 동적 처리를 가능하게 합니다.
주요특징
- Virtual DOM을 사용 합니다.
- JSX(JavaScript XML)를 사용합니다.(Vue.js등 여러곳에서 사용)
- Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등에서 사용.
- 프레임워크 보다는 View 라이브러리에 가까움.
참고자료
React 자체는 자바스크립트에 대한 기본적인 경험이 있다면 배우기 쉽다고 알려져 있습니다. React 가 인기를 더해가는 이유중 하나에는 React Native 가 있습니다. React Native 는 React 로 만든 웹 어플리케이션을 안드로이드나 iOS 의 네이티브 앱으로 만들 수 있도록 도와주는 라이브러리로 이해할 수 있습니다.
기존 하이브리드 방식 보다 훨씬 다양한 기능과 속도향상이 있어 최근 많은 개발에 활용되는 추세 입니다.
3) Vue.js
Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크로 다른 단일형 프레임워크와 달리 점진적으로 채택할 수 있도록 설계 되어 있습니다. 2014년 구글을 위해 Angular를 작업하던 Evan You에 의해 처음 발표 되었으며 React, Angular 의 장점을 통합해 빠른 속도로 성장하고 있는 가장 최신의 프레임워크 입니다.
주요특징
- Virtual DOM을 사용 합니다.
- 전반적인 문서화가 잘되어 있고 특히 한글문서가 잘 정리되어 있음.
- 서버사이드 렌더링이 React 보다 훌륭함.
- 부분적 도입에서 부터 전체로의 적용까지 유연하게 적용할 수 있음.
- 2.0 버전에서 부터 개발 편이성의 대폭 향상.
참고자료
Vue.js는 전세계적으로 최근 가장 주목받는 프론트엔드 프레임워크 입니다. 기존의 프레임워크에 이미 익숙해 있다면 굳이 변경할 필요는 없겠지만 새롭게 시작하는 개발자들에게는 가장 먼저 도전해볼만한 프레임워크라 생각 합니다.
Node.js
Node.js(노드)는 자바스크립트를 백엔드 프로그램 개발에 사용할 수 있도록 만들어진 서버사이드 자바스크립트 런타임 입니다. 정확하게는 Chrome V8 JavaScript Engine에 기반하고 있습니다.
기본적으로 스레드를 사용하지 않도록 설계 되었지만 필요하다면 다수의 cpu 코어에 로드밸런싱이 가능한 구조로 경량의 빠른 웹서버 개발에 적합 합니다.
별도의 웹서버 소프트웨어 없이 자체적으로 웹서버 구동이 가능하고 자바스크립트 문법을 통해 서버 프로그램 구현이 가능한 구조 입니다.
기존의 대형 시스템들을 여러개의 독립된 소형 서비스로 분리하는 마이크로 서비스 아키텍처(MSA: Micro Service Architecture)의 확산으로 node.js 의 활용이 급증하게 되었습니다.
주요 특징
- 이벤트 기반, 논 블로킹 I/O모델 사용.
- npm 이라고 하는 패키지 매니저 사용.(65만개 이상의 오픈소스패키지)
- 빠른 처리속도와 뛰어난 확장성
Node.js 주요 적용 분야
- 입출력이 잦은 어플리케이션
- 데이터 스트리밍 어플리케이션
- 데이터를 실시간으로 다루는 어플리케이션
- 경량의 Restful API 기반 어플리케이션
- 싱글페이지 어플리케이션
Express.js
Node.js 기반의 웹 개발 프레임워크로 컨트롤러(Controller)와 뷰(View)를 처리하기 위한 미들웨어 구조를 제공한다고 볼 수 있습니다. URI에 따른 요청을 실제 구현과 연결해주고 필요한 경우 뷰 템플릿으로 전달하는 등의 프로그램 구조를 생성하고 관리할 수 있도록 합니다.
Node.js 에서 웹 개발을 한다고 할때 꼭 필요한 패키지 입니다.
Node.js 는 분명 훌륭한 백엔드 솔루션이지만 모든 백엔드 개발에 적용할 수 있다고 생각하면 안됩니다.
일반인들을 대상으로 하는 서비스나 어플리케이션이 아닌 기업내부 혹은 정부기관 내부의 복잡한 시스템들을 개발하는데 있어서는 우리가 알고 있는것 보다 훨씬 복잡한 시스템들간의 연동이나 처리해야할 업무들이 분산되어 있고 이들을 통합 운영하기 하기 위해서는 기존의 기술들이 필요합니다.
참고자료
'CS' 카테고리의 다른 글
| 22.12.02 / CS특강 / TCP/IP (1) | 2022.12.11 |
|---|---|
| 22.12.02 / CS특강 / OSI 7계층 (0) | 2022.12.11 |
| 22.12.01 / CS특강 / RestAPI (0) | 2022.12.11 |
| 22.11.25 / CS특강 / TCP/IP (0) | 2022.12.01 |
| 22.11.25 / CS특강 / HTTPS (0) | 2022.11.29 |