Home SD 커뮤니티 Easy Tech

Easy Tech

Easy Tech

웹 프론트엔드(Web Front-End) 개발과 자바스크립트(Javascript)

2019-06-04


프론트엔드백엔드

웹 프론트엔드(Web Front-End) 개발은 웹페이지 상에서 사용자들에게 보여지는 화면을 만드는 것이다. 쉽게 말하자면, 웹페이지를 그리는 기술이라고 할 수 0있는데, 눈에 보이는 화면을 만들고자 한다면 프론트엔드 기술이 필요하다. 반대로 백엔드(Back-end) 개발은 사용자에게 보여지지 않는 서버단을 개발하는 것이다. 프론트엔드는 UI(User Interface)를 가지고 동작하며, 백엔드는 UI 없이 프로세스 형태로만 존재한다. 여기서 사용자(User)란 사람 또는 프로그램이 될 수 있다. 프론트엔드 응용프로그램은 사용자들과 직접 상호작용을 하는 프로그램이다. 프론트엔드 응용프로그램은 사용자와 직접 인터페이스할 수 있으며, 요구된 데이터를 얻거나 요구된 서비스를 수행하기 위하여 원격지의 다른 컴퓨터에 위치한 백엔드 프로그램으로 요구를 전달한다. 클라이언트/서버 컴퓨팅 모델과 비교한다면, 프론트엔드는 클라이언트로, 백엔드는 서버로 이해하면 된다.

 

동적 인터페이스로 변화해주는,
자바스크립트(Javascript)

웹 프론트엔드 개발은 사용자가 HTML, CSS, Javascript를 사용하여 디지털 상호작용을 통해 데이터를 보고 상호작용할 수 있도록 그래픽 인터페이스로 데이터를 변환하는 관행이다. 전 게시물에 웹 퍼블리싱에서 HTML과 CSS 언어에 대해서 다뤘으니, 이 글에서는 Javascript 기술을 중점적으로 소개하고자 한다. 자바스크립트(Javascript)는 정적 HTML 페이지를 동적 인터페이스로 변환하는 데 사용되는 이벤트 기반 명형형 프로그래밍 언어이다. 자바스크립트 코드는 HTML 표준에 따라 제공되는 DOM(Document Object Model)을 사용하여 사용자 입력과 같은 이벤트에 대한 응답으로 웹 페이지를 조작할 수 있다.

 
Javascript의 장점은

웹 페이지상에서 HTML이 웹 페이지의 큰 뼈대를 제공한다고 하면, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. Javascript는 웹 페이지의 동작을 담당하는데 예를 들어, 버튼을 클릭하면 밑에 날짜가 보이게끔 하는 식의 동적인 구현이 가능하다. 자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드르르 작성할 수 있게 도와준다. 기존 C나 자바(Java) 언어와 달리굉장히 단순한 구조와 원칙을 가지고 있기 떄문에 초보 개발자들이 쉽게 배우고 이해할 수 있다. 또한 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고, 확장성도 높다.

 
 

자바스크립트 기반

프레임워크라이브러리

  다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트의 생태계도 크게 확장되었는데, 자바스크립트 기반의 프레임워크와 라이브러리들을 살펴보면 다음과 같다.

   ▶  앵귤러 JS (Angular.JS)
       : 자바스크립트 기반의 웹 애플리케이션 프레임워크로, 개발과 테스트 환경을 단순화 시킨 기술이다. 구글이 직접 만들었으며, 제이쿼리(jQuery)나 자바스크립트 UI 컴포넌트를 쉽게 재사용할 수 있다. 양방향 데이터 바인딩을 통해 불필요한 코드를 제거해 향후 유지보수를 쉽게 할 수 있다.

   노드 JS (Node.JS)
      : 자바스크립트 엔진인 V8 위에서 동작하는 이벤트 처리 I/O 프레임워크이다. 서버 환경에서 자바스크립트로 애플리케이션을 작성할 수 있게 돕는다. 노드 JS의 장점은 비동기 프로그래밍이라는 점인데, 비동기는 이벤트를 요청하고 바로 결과를 받지 않아도 되기 때문에 결과값을 기다리지 않고 보다 다양한 요청을 처리할 수 있다. 노드 JS는 백엔드 개발에서 주로 많이 쓰이는 프레임워크이다.

   리액트 JS (React.JS)
      : 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 페이스북이 만든 기술로 커스텀 태그, 가상 DOM, 단방향 데이터 바인딩 기능을 제공해 주목을 받았다. 단일 페이지 응용프로그램 및 모바일 응용 프로그램 개발에 사용될 수 있고, 주로 속도, 단순성 및 확장성을 제공하는 것을 목표로 한다.

   ▶ 제이쿼리 (jQuery)
      : HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리이다. 제이쿼리의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

 
앵귤러와 리액트의 장점을 담은
자바스크립트 프레임워크, Vue.js

위에서 소개한 프레임워크와 라이브러리 말고도 급부상하고 있는 자바스크립트 프레임워크가 한 가지 있다. 그것은 바로 Vue.js(뷰)이다. Vue.js는 사용자 인터페이스 빌드를 위한 오픈소스 프로그레시브 프레임워크로, 뷰를 사용하면 다른 자바스크립트 라이브러리를 사용한 프로젝트에 통합하기가 쉽다. 점진적으로 채택할 수 있게 설계되어 있기 때문에 통합하기가 쉬운 것이다. 또한 뷰는 고급 싱글 페이지 애플리케이션을 지원하는 웹 애플리케이션 프레임워크의 역할을 하기도 한다. 웹 개발을 단순화하고 정리하기 위해 개발되어서 대중적인 프론트엔드 프레임워크로 인기가 급상승 하고 있다. 웹 UI 개발(컴포넌트, 선언형, UI, 핫 리로딩, 타임 트래블 디버깅 등)의 아이디어를 더 접근 가능하도록 만드는 데 초점을 둔다. 또한 독선적이지 않기 때문에 개발자들이 익히기에 쉽다. 앵귤러의 단순함과 리액트의 강력함을 모아놓은 뷰가 급격히 사용자 층을 넓히고 있는 추세다.