프런트엔드 개발의 과거와 현재

'기초부터 완성까지, 프런트엔드' 라는 책을 읽으면서 정리한 글입니다.

웹의 역사

	WEB 1.0	WEB 2.0	WEB 3.0
개념	카테고리를 통한 자료 검색의 형태	사용자가 직접 정보를 생산하고 유통, 소비하는 쌍방향 소통의 형태	시맨틱 웹 기술을 이용하여 지능화된 서비스를 제공
특징	단방향 정보 제공의 형태로 정적인 서비스 제공	외부에 개방하는 형태의 서비스 등장, 동적 서비스를 만드는 기술(Ajax, RSS 등)과 웹 표준 등장	빅 데이터와 AI의 결합으로 개인 맞춤형 서비스 제공
서비스	카테고리 검색 서비스 등	블로그, UCC 등	데이터 기반 추천 서비스 등

• 1989년 웹의 아버지로 불리는 팀 버너스리가 WWW의 하이퍼 텍스트 시스템을 고안하였고, 90년대부터 이 기술을 기반으로 WEB 1.0이 시작되었다.
• 웹 개발은 발전 과정에서 많은 시행착오를 겪었으며 MVC, MV*, TDD 등 소프트웨어 공학적 개념들을 적용하며 진화하였다.
• 웹은 역사가 30년 정도밖에 되지 않아 매우 짧다.
• WEB 2.0부터 Ajax와 웹 표준이 등장하면서 클라이언트 개발 영역에 굉장히 큰 변화를 가져왔다.
• Ajax의 등장으로 서버에 필요한 데이터만 요청해 응답받아 처리할 수 있게 되었다.
• 기존처럼 일부 데이터 갱신시 전체 페이지를 새로 그리지 않아 데이터의 처리량이 대폭 감소했고, 응답 데이터에 대한 가독성이 향상됐다.
• 클라이언트 영역에서 응답받은 데이터를 처리하는 자바스크립트의 중요성이 대두되었다.

웹 표준은 운영체제나 브라우저와 관계없이 동일 정보를 제공하는 것을 목적으로 만들어졌다. HTML과 CSS, 자바스크립트에 대한 표준이 생기며 플랫폼과 관계없이 하나의 소스로 통합하여 관리할 수 있게 되었고, 이로 인해 자연스럽게 개발 생산성이 향상되었다. 웹 표준이 등장한 이후에도 Internet Explorer는 표준을 완벽히 준수하지 않아 별도로 처리하곤 했다. (R.I.P IE)

WEB 2.0이 시작된 2000년대부터 클라이언트 영역 개발 복잡도가 증가하여 이 시기부터 프런트엔드와 백엔드를 구분하려는 움직임이 시작되었다고 한다. 짧은 웹 역사에서도 프론트엔드의 중요성이 부각된 것은 15년이 채 되지 않았다. 이 기간 프론트엔드 개발 영역은 굉장히 빠르게 발전했다.

2006년 존 레식의 jQeury가 등장하며 개발자들은 자바스크립트에 대해 깊게 이해하고 활용하기 시작했다. 그리고 2010년 Angular를 시작으로 React와 같은 프레임워크들의 등장, ECMAScript2015(ES6)가 소개되며 프론트엔드 개발 영역과 자바스크립트 언어에 대한 인기가 폭발적으로 상승했다.

현대의 프론트엔드 개발 영역은 춘추전국시대와 같다. 정적 분석기, 트랜스파일러, 번들러 등 다양한 개발 도구가 저마다의 철학을 바탕으로 성장하고 있고, 프레임워크 분야는 경쟁이 매우 치열하다. Angular, React, Vue.js, Svelte 등이 프론트엔드 프레임워크의 최고 자리를 두고 싸우고 있다.

이러한 프론트엔드 춘추전국시대에서 프론트엔드 개발자가 되기 위해 전념해야 할 것은 바로 기본기를 튼튼히 다지는 것이다. 기본기라 함은 HTML, CSS, 자바스크립트라고 할 수 있다. 코어 기술이라고 할 수 있는 이 세가지에 대한 이해도가 높을 수록 개발 도구나 프레임워크를 더 쉽게 파악하여 사용할 수 있을 것이다.

프론트엔드 개발 영역의 확장

자바스크립트는 프론트엔드 개발의 기본이자 핵심이다. jQuery와 Node.js의 등장 이후 자바스크립트의 발전은 프론트엔드 개발에 대한 관심을 증폭시켰고, 나아가 웹 프론트엔드 개발 기술들의 범용성이 확장되며 다른 플랫폼에서도 사용하게 되었다.

• 모바일 앱 개발
  아이폰과 안드로이드의 등장 이후 모바일 분야는 하나의 플랫폼으로 진화하여 독자적인 환경에서 발전해왔다. 모바일 앱 개발자는 아이폰 환경의 앱을 개발하기 위해 Swift(또는 Objective-C), 안드로이드 환경의 앱을 개발하기 위해 Kotlin(또는 Java)를 익혀야 했는데, 이러한 고충을 해결하기 위해 하이브리드 앱의 개념이 등장했다. 이는 콘텐츠 영역을 HTML, CSS, Javascript를 사용해 웹 앱 형태로 개발한 후 네이티브 앱으로 변환하여 배포하는 애플리케이션을 말한다. 그리고 Angular, React, Vue.js 등의 프레임워크를 활용해 모바일 앱을 개발하는 네이티브 스크립트(Native Script)와 React Native 같은 기술도 등장했다.

• 데스크톱 앱 개발
  대표적인 프레임워크인 Electron이 있는데, 이를 이용하여 데스크톱 앱도 HTML, CSS, Javascript를 사용해 만들 수 있다. Electron으로 개발된 앱은 윈도우, Mac, 리눅스 환경에서 모두 동작하는 크로스 플랫폼 형태의 앱으로 사용된다. 대표적인 프론트엔드 개발자들의 Text-editor인 Visual Studio Code와 Atom 또한 Electron을 사용하여 개발되었다.

---

왜 프론트엔드를 배우고 있는가? 라고 물어보면 개발 영역이 폭발적으로 넓어지고 있어서.
개발 자체는 재미있지만, 평생 개발 공부만 하면서 키보드만 두들기고 있는건 싫으니까...
기초를 탄탄히 하고, 쏟아져 나오는 개발 도구들 중 핵심적인 것들을 익혀 나가면서 무엇인가 표현해야 할 순간을 위해 배우고 있다.