프론트엔드의 역사

4.1 웹 개발의 역사: HTML에서 HTML5와 CSS3까지

1990년대 초, 팀 버너스 리 덕분에 웹 개발이 탄생했어. 그는 최초의 프론트엔드 개발자였어. HTML도 그가 직접 만들고, 직접 사용했지. 브라우저도 그가 최초로 만들었어. 진정한 프론트엔드 개발자는 브라우저가 없어도 멈추지 않아.

그 때는 CSS와 JavaScript도 없어서 사이트 만드는 게 더 쉬웠어. 팀 버너스 리는 자바스크립트와 CSS 없이 프론트엔드를 했던 첫 번째 올드스쿨 개발자라고 할 수 있어.

1995년에 Internet Engineering Task Force (IETF)에서 HTML 2.0을 HTML의 최초 공식 표준으로 승인했어. 이 버전은 기본적인 태그와 속성을 포함하고 있어서 기본적인 웹 페이지를 만들 수 있었지. HTML 2.0은 웹 개발의 향후 발전을 위한 기초를 마련했어.

HTML 3.2와 HTML 4.0: 기능 확장

1997년은 HTML의 역사에서 중요한 단계였어. 그 해 W3C 컨소시엄이 HTML 3.2를 발매했어. 이 버전은 표, Java 애플릿, 수학 공식 지원을 포함하고 있어서 웹 개발자들의 가능성을 크게 확장했지.

같은 해에 HTML 4.0이 나왔고, 큰 개선을 가져왔어. CSS 스타일 지원, 개선된 시맨틱, 새로운 요소가 포함되어서 HTML 4.0은 더 복잡하고 구조적인 웹 페이지를 만드는 강력한 도구가 되었어. CSS 스타일의 등장은 콘텐츠와 외형을 분리할 수 있게 해주어서 스타일 관리가 쉬워지고 디자인 구현이 간단해졌어.

CSS: 웹 페이지 스타일링의 혁명

CSS (Cascading Style Sheets)의 첫 번째 표준은 1996년에 W3C에 의해 발표되었어. CSS는 개발자들이 페이지 구조와 시각적 요소를 분리하여 HTML 문서를 스타일링할 수 있게 해주었어. CSS1은 텍스트와 배경 이미지 스타일링의 기본 기능을 제공했어.

1998년에 CSS2가 도입되었고, 미디어 쿼리 지원, 절대 및 상대 위치 지정, 인쇄용 더 복잡한 스타일과 같은 새로운 기능을 추가했어.

CSS3는 2011년에 등장하기 시작했어, 모듈 식 아키텍처를 소개했지. 이는 애니메이션, 그라데이션, 변환 및 개선된 레이아웃과 같은 새로운 기능을 단계적으로 통합할 수 있게 해줬어.

HTML5: 웹 개발의 새로운 시대

HTML5는 WHATWG와 W3C의 공동 노력으로 개발되었고, 2014년에 공식적으로 발표되었어. HTML5는 멀티미디어(비디오 및 오디오) 지원, 개선된 시맨틱을 위한 새 요소(<article>, <section>, <header>, <footer> 등의 새로운 요소) 지원을 추가하고, 웹 폼의 개선된 포맷과 그래픽 및 멀티 스레드 작업을 위한 새로운 API를 추가했어.

HTML5는 웹 개발자들에게 더 많은 가능성을 제공했고, 보다 인터랙티브하고 동적인 웹 애플리케이션을 만들 수 있게 해줬어. 멀티미디어 요소와 새로운 API의 지원은 웹 애플리케이션을 더욱 강력하고 기능적으로 만들어줬어.

4.2 jQuery에서 Angular와 React까지

인터넷 속도가 빨라질수록 웹 페이지는 더 무거워졌어. 더 많은 CSS와 JavaScript가 필요했지. 이를 간단하게 하기 위해 다양한 라이브러리가 등장했어. 그 중 가장 인기 있었던 것이 바로 jQuery였어.

jQuery: JavaScript 작업의 편리함

jQuery는 존 레식에 의해 만들어졌고, 2006년 1월 뉴욕의 BarCamp 컨퍼런스에서 발표되었어. jQuery의 목표는 HTML 문서와의 상호작용, 이벤트 처리, 애니메이션 및 Ajax와의 상호작용을 쉽게 하고, 빠른 웹 개발을 가능하게 하는 것이었어.

jQuery는 JavaScript 및 브라우저 간 호환성 문제의 복잡성을 숨기고, 간단하고 직관적인 메서드 덕분에 빠르게 인기를 얻었어. 주요 기능은 다음과 같아:

• DOM 요소를 쉽게 찾고 조작할 수 있는 셀렉터
• 간단한 이벤트 처리
• 애니메이션 및 효과
• 인터랙티브한 웹 페이지를 생성하기 위한 Ajax 통합

jQuery는 웹 개발 접근 방식을 변화시켜, 개발자들에게 더 접근 가능하고 편리하게 만들어줬어.

Angular: 동적인 웹 애플리케이션 소개

웹 페이지의 복잡성이 증가하면서 Angular 프레임워크가 등장했어. AngularJS는 2010년 10월에 Google에서 처음 소개되었어. 동적 싱글 페이지 애플리케이션(SPA) 개발을 단순화하기 위해 미스코 헤베리와 애덤 에이브람스에 의해 만들어졌어.

AngularJS는 클라이언트 측 개발을 위한 강력한 도구를 제공했어, 예를 들어:

• 디렉티브를 통한 선언적 데이터 바인딩
• HTTP 요청 처리를 위한 내장 서비스
• 데이터 변경 시 자동으로 뷰를 업데이트해주는 양방향 데이터 바인딩
• 모듈성과 코드의 테스트 가능성

2016년에 Google은 완전히 새로 설계된 Angular(Angular 2 이상) 버전을 발표했어. 이는 TypeScript를 사용하여 확장 가능하고 고성능의 웹 애플리케이션 개발을 위한 플랫폼이 되었어.

React: UI 렌더링의 혁명

React는 Facebook의 조던 발크에 의해 만들어졌고, 2013년 3월에 처음 발표되었어. React는 Facebook의 성능 향상 및 복잡한 사용자 인터페이스 지원 요구에 대한 답변이었어.

React는 컴포넌트와 가상 DOM을 기반으로 한 새로운 사용자 인터페이스 개발 방법을 제시했어:

• 재사용 가능하고 독립적인 컴포넌트를 만드는 컴포넌트 아키텍처
• 업데이트 최적화를 통해 더 빠르고 효율적으로 인터페이스를 갱신하는 가상 DOM
• 디버깅과 애플리케이션 상태 관리를 더욱 쉽게 만드는 단방향 데이터 바인딩

React는 성능과 유연성 덕분에 빠르게 인기를 얻었고 현대 웹 애플리케이션 개발의 기초가 되었어. React Native와 같은 다른 라이브러리와 프레임워크의 기초가 되어 모바일 애플리케이션 개발에도 활발히 사용되고 있어.

이 세 가지 기술 — jQuery, Angular, React —는 웹 개발의 진화에서 중요한 역할을 했고, 각각의 고유한 접근 방식과 도구를 제공하여 현대 웹 애플리케이션 개발을 크게 단순화했어.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016은 너무 강력한 기술이 되어서 Web은 브라우저의 경계를 넘어서 프론트엔드 풀스택 기술이 되었어. 처음으로 backend가 그걸 느꼈지.

Node.js: 백엔드의 점령

Node.js는 라이언 달에 의해 만들어졌고 2009년 5월에 처음 발표되었어. Node.js의 주요 목표는 브라우저 외부에서 JavaScript를 실행할 수 있는 환경을 제공하는 것이야, 이는 서버 측 개발에 JavaScript를 사용할 수 있게 해줘. Node.js는 Google의 V8 엔진 위에 구축되어 있어서 높은 성능과 실행 속도를 보장해.

Node.js는 비차단 I/O (input/output, 입력/출력)를 사용해서, 동시에 많은 연결을 처리하면서도 메인 스레드를 차단하지 않아. 또한 다양한 라이브러리와 도구를 통합하기에 쉬운 모듈 생태계를 npm (Node Package Manager)을 통해 제공해. V8 엔진 덕분에 Node.js는 빠르고 효율적인 요청 처리를 보장해.

Electron: 데스크탑의 점령

데스크탑에서 멋진 UI를 작성하는 것은 어려운 일이지만, HTML5 + CSS3가 바로 옆에 있어. 그걸 사용하고 싶어... 그래서 프로그래머들은 이렇게 해결했어: 앱의 메인 윈도가 열리고, 그 창에 브라우저 (VebView 컴포넌트)가 내장돼서 HTML5, CSS3 + JavaScript로 작성된 코드가 로드돼.

Electron 라이브러리는 원래 Atom Shell로 알려져 있었고, GitHub에 의해 코드 편집기 Atom을 위해 만들어졌어. Electron의 첫 번째 버전은 2013년 7월에 출시됐어. Electron의 목표는 HTML, CSS 및 JavaScript와 같은 웹 기술을 사용해서 데스크탑 애플리케이션을 개발할 수 있게 하는 것이었어.

Electron은 Windows, macOS 및 Linux에서 동일한 코드 베이스로 애플리케이션을 만들 수 있게 해줘. Electron은 웹 기술의 가능성과 Node.js의 강력함을 결합해서 파일 시스템 및 다른 시스템 자원에 접근할 수 있게 해줘. 개발자들은 기존의 웹 프레임워크와 라이브러리를 사용해서 인터페이스와 기능을 만들 수 있어.

React Native: 모바일 애플리케이션

React Native는 Facebook에 의해 개발되었고 2015년 3월에 처음 소개되었어. React Native의 목표는 JavaScript와 React를 사용해서 iOS와 Android용 네이티브 모바일 애플리케이션을 만들 수 있게 하는 것이었어.

React Native는 네이티브 컴포넌트를 사용해서 네이티브 애플리케이션과 비슷한 성능을 제공해. 동시에 iOS와 Android에서 작동하는 코드를 작성할 수 있어서 개발이 훨씬 쉬워지고 유지하는 시간이 단축돼.

Electron과 마찬가지로, 모바일 애플리케이션의 모든 창에 VebView가 열리고, HTML5, CSS3 및 JS로 작성된 '사이트'가 여기에 로드돼. 모바일 애플리케이션이 휴대폰의 웹사이트를 대체할 것으로 예상했지만, 실제로는 그 반대가 발생했어: 웹사이트가 네이티브 애플리케이션을 대체하기 시작했어.

오늘날 프론트엔드 풀스택 소프트웨어 엔지니어는 세계에서 가장 수요가 많은 IT 직업이야. 그래서 프론트엔드 개발자가 되기로 한 결정은 옳고 멀리 내다본 것이야!