프론트엔드 자바스크립트 기초

1. 자바스크립트 개념이해

이번 강좌에서는 자바스크립트의 기본 개념과 적용분야 그리고 최신 자바스크립트 기술 현황에 대해 알아보게 됩니다.

이 강의를 통해 자바스크립트 언어가 무엇인지, 어떤 특징을 가지고있는지 배울 수 있으며 HTML, CSS와의 관계를 이해 할 수 있습니다.

Youtube 에서 동영상 강좌 보기

01: 자바스크립트란 ?

자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하게 됩니다.

HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있습니다. 따라서 단순히 콘텐츠 제작만을 생각하는 프론트엔드 초보 개발자에게는 가장 어려운 부분이라 할 수 있습니다.

자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있습니다.

현재 컴퓨터나 스마트폰 등에 포함된 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.

자바스크립트 특징

자바스크립트 버전

자바스크립트는 1995년 처음 발표되었으며 웹의 발전과 함께 성장 하였으며 한때 브라우저마다 지원되는 자바스크립트의 차이로 인해 문제가 발생하기도 했습니다.

2000년대말 스마트폰이 세상에 등장하면서 모바일 개발이 빠른 속도로 성장 했으며 웹 기반의 응용프로그램들이 대거 개발되면서 웹에 동적인 기능을 구현할 수 았는 자바스크립트 역시 발전에 속도를 더하게 됩니다.

현재는 자바스크립트 전성시대로 Vue, Angular, React 와 같은 프론트엔드 프레임워크에서 부터 Node.js 를 기반으로 하는 서버 프로그래밍 영역까지 자바스크립트가 널리 사용되고 있습니다.

ECMAScript 는 자바스크립트의 표준규격으로 볼 수 있으며 ES5 부터 기존과 다른 새로운 구조가 많이 추가 되었습니다.

ES5(2009) 주요특징

ES6(2015) 주요특징

ES8(2017) 주요특징

자바스크립트 적용 분야

현재 자바스크립트는 네이버, 구글과 같은 WWW 서비스에서 부터 데스크탑 응용 프로그램 까지 사용되지 않는 곳이 없습니다.

네이버를 예로 살펴보면

그외에도 다음과 같은 기능들은 대부분 자바스크립트를 사용하는 것입니다.

02. Vue, Angular, React

자바스크립트가 현재 가장 널리 사용되는 분야는 프론트엔드 프레임워크 영역 입니다. 자바스크립트 본래의 영역 이기도 하고 하이브리드 앱, 모바일 웹, 최근에는 데스크톱 영역까지 확대되었습니다. Vue, Angular, React 는 가장 대표적인 프론트엔드 프레임워크로 향후 기본적인 자바스크립트 학습이후 도전해야 할 것들입니다.

1) AngularJS

구글에서 만들었으며 MIT 라이센스로 누구나 무료로 사용 할 수 있습니다. 본격적인 자바스크립트 프론트엔드 프레임워크의 시초라 할 수 있으며 2010년 처음 발표 되었습니다.

주요특징

참고자료

AngularJS2(이후 Angular) 가 2016년에 발표되면서 타입스크립트(Type Script)가 기본으로 사용되고, 구성방식, 아키텍처, 도구등의 변경으로 기존 개발자들이 적응하기 어렵게 되었으며 점점 거대화 되는 구조와 높은 학습곡선(Learning Curve) 그리고 React 와 Vue 같은 새로운 프레임워크의 등장으로 현재는 처음보다 사용자는 줄어든 상태라 볼 수 있습니다.

2) React

페이스북에서 만들었으며 UI 라이브러리에 특화되어 있으며 재사용 가능한 UI 컴포넌트 생성을 지원 합니다. 또한 가상돔(Virtual DOM)이라는 개념을 사용해 보다 빠르게 웹 콘텐츠의 동적 처리를 가능하게 합니다.

주요특징

참고자료

React 자체는 자바스크립트에 대한 기본적인 경험이 있다면 배우기 쉽다고 알려져 있습니다. React 가 인기를 더해가는 이유중 하나에는 React Native 가 있습니다. React Native 는 React 로 만든 웹 어플리케이션을 안드로이드나 iOS 의 네이티브 앱으로 만들 수 있도록 도와주는 라이브러리로 이해할 수 있습니다.

기존 하이브리드 방식 보다 훨씬 다양한 기능과 속도향상이 있어 최근 많은 개발에 활용되는 추세 입니다.

3) Vue.js

Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크로 다른 단일형 프레임워크와 달리 점진적으로 채택할 수 있도록 설계 되어 있습니다. 2014년 구글을 위해 Angular를 작업하던 Evan You에 의해 처음 발표 되었으며 React, Angular 의 장점을 통합해 빠른 속도로 성장하고 있는 가장 최신의 프레임워크 입니다.

주요특징

참고자료

Vue.js는 전세계적으로 최근 가장 주목받는 프론트엔드 프레임워크 입니다. 기존의 프레임워크에 이미 익숙해 있다면 굳이 변경할 필요는 없겠지만 새롭게 시작하는 개발자들에게는 가장 먼저 도전해볼만한 프레임워크라 생각 합니다.

03. Node.js

Node.js(노드)는 자바스크립트를 백엔드 프로그램 개발에 사용할 수 있도록 만들어진 서버사이드 자바스크립트 런타임 입니다. 정확하게는 Chrome V8 JavaScript Engine에 기반하고 있습니다.

기본적으로 스레드를 사용하지 않도록 설계 되었지만 필요하다면 다수의 cpu 코어에 로드밸런싱이 가능한 구조로 경량의 빠른 웹서버 개발에 적합 합니다.

별도의 웹서버 소프트웨어 없이 자체적으로 웹서버 구동이 가능하고 자바스크립트 문법을 통해 서버 프로그램 구현이 가능한 구조 입니다.

기존의 대형 시스템들을 여러개의 독립된 소형 서비스로 분리하는 마이크로 서비스 아키텍처(MSA: Micro Service Architecture)의 확산으로 node.js 의 활용이 급증하게 되었습니다.

주요 특징

Node.js 주요 적용 분야

Express.js

Node.js 기반의 웹 개발 프레임워크로 컨트롤러(Controller)와 뷰(View)를 처리하기 위한 미들웨어 구조를 제공한다고 볼 수 있습니다. URI에 따른 요청을 실제 구현과 연결해주고 필요한 경우 뷰 템플릿으로 전달하는 등의 프로그램 구조를 생성하고 관리할 수 있도록 합니다.

Node.js 에서 웹 개발을 한다고 할때 꼭 필요한 패키지 입니다.

Node.js 는 분명 훌륭한 백엔드 솔루션이지만 모든 백엔드 개발에 적용할 수 있다고 생각하면 안됩니다.

일반인들을 대상으로 하는 서비스나 어플리케이션이 아닌 기업내부 혹은 정부기관 내부의 복잡한 시스템들을 개발하는데 있어서는 우리가 알고 있는것 보다 훨씬 복잡한 시스템들간의 연동이나 처리해야할 업무들이 분산되어 있고 이들을 통합 운영하기 하기 위해서는 기존의 기술들이 필요합니다.

참고자료

참고 자료