웹 기술의 변천사를 알아보자
콘솔 프로젝트로는 아쉬움이 남았다
Java와 DB 연동 기술을 배워서 콘솔 기반 관리 프로그램을 개발해보았다.
물론 함수형인터페이스, 스트림, 역할분리 등 다양한 자바기술과 db연동을 하면서 재밌고 배운것도 많았다.
하지만 한 가지 아쉬움이 남았다.
'이걸 다른 사람에게 보여주고 싶은데, 콘솔 화면만으로는 부족한데?'
라는 생각이 계속 들었다.
그래서 해당 프로그램을 웹으로 옮겨보기로 결심했다.
단순히 기술을 하나하나 배우는 것보다, 웹이 어떤 흐름으로 발전해왔는지를 먼저 이해하면
지금의 기술들이 왜 존재하는지도 자연스럽게 이해할 수 있을 것 같았다.
그래서 웹 기술의 역사부터 먼저 정리해보기로 했다.
웹 초창기와 자바스크립트의 등장
웹은 원래 문서 공유를 위한 정적인 환경이었다.
하지만 사용자와의 상호작용이 중요해지면서, 클라이언트 측 스크립트 언어가 필요해졌다.
- 1995년, ‘모카(Mocha)’라는 이름으로 자바스크립트의 전신이 탄생했다.
- 곧 ‘라이브스크립트(LiveScript)’로 이름이 바뀌었고,
- 1996년, 최종적으로 ‘자바스크립트(JavaScript)’라는 이름으로 자리잡았다.
처음에는 기능이 제한적이었지만,
2015년 ECMAScript 6(ES6)이 발표되면서 자바스크립트는 큰 변화를 맞이했다.
클래스 문법, 화살 함수, 모듈 시스템 등 다양한 기능이 추가되며,
프론트엔드는 물론 서버, 모바일 등 다양한 환경에서 사용되는 언어로 성장했다.
웹 페이지를 구성하는 세 가지 핵심 기술
웹 페이지는 기본적으로 아래 세 가지 기술로 구성된다.
- HTML5: 페이지의 구조를 담당한다.
- CSS: 스타일을 지정하며, 시각적 표현을 담당한다.
- JavaScript: 동적인 기능과 사용자와의 상호작용을 구현한다.
이 세 가지를 브라우저가 읽고 해석해서 최종적으로 화면에 출력하는데,
이 과정을 렌더링(Rendering)이라고 부른다.
렌더링이란?
HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저 화면에 출력하는 과정이다.
- SSR (Server Side Rendering): 서버에서 HTML을 생성한 후 브라우저에 전달하는 방식이다.
- CSR (Client Side Rendering): 클라이언트에서 자바스크립트로 DOM을 그리는 방식이다.
웹 브라우저의 역할
웹 브라우저는 단순히 웹사이트를 띄우는 도구가 아니다.
다음과 같은 작업들을 수행한다.
- HTML, CSS, JS 파일을 로드하고 파싱한다.
- DOM(Document Object Model)을 생성한다.
- 스타일 계산과 렌더링 트리를 구성한다.
- 렌더링 엔진을 통해 실제 화면에 출력한다.
AJAX의 등장과 jQuery의 전성기
- 1999년,
XMLHttpRequest객체가 등장하면서 비동기 통신이 가능해졌다. - 이를 활용한 방식이 AJAX (Asynchronous JavaScript and XML)이다.
- 페이지 전체를 새로 고치지 않고도 데이터를 주고받을 수 있게 되면서,
웹은 더 빠르고 유연하게 동작할 수 있게 되었다.
이후 2006년, jQuery가 등장했다.
jQuery는 DOM 조작, 이벤트 처리, AJAX 요청 등을 간단하게 만들어 주었고,
웹 개발자들에게 큰 사랑을 받았다.
V8 엔진과 Node.js의 등장
- 2008년, 구글은 자바스크립트 처리 속도를 높이기 위해 V8 엔진을 개발했다.
- 2009년, 이 V8 엔진을 기반으로 Node.js가 출시되었다.
Node.js는 자바스크립트를 브라우저 외부, 즉 서버에서도 실행할 수 있게 했다.
그 결과, 자바스크립트는 프론트엔드뿐만 아니라 백엔드 개발에서도 사용되는 언어가 되었다.
SPA 시대의 시작과 프레임워크의 발전
웹이 점점 더 복잡해지면서, 데스크톱 애플리케이션에 뒤지지 않는 성능과 경험이 요구되었다.
이를 해결하기 위해 등장한 개념이 SPA (Single Page Application)이다.
SPA는 페이지 전체를 새로 로드하지 않고, 필요한 부분만 갱신한다.
이런 구조는 CBD (Component Based Development) 방식과 잘 어울렸다.
화면을 작은 컴포넌트 단위로 나누고, 이를 조합해 전체 앱을 구성한다.
대표적인 SPA 프레임워크/라이브러리
- React: 선언형 UI 구성, 페이스북에서 개발
- Vue.js: 배우기 쉽고 가볍다
- Angular: 구글에서 개발, 대형 프로젝트에 적합하다
- Svelte: 빌드 타임에 컴파일되어 성능이 뛰어나다
마무리하며
콘솔 프로젝트를 하면서 백엔드 개발의 기본기를 익혔다.
이제는 그 프로젝트를 웹 플랫폼 위에서 작동하게 만들어보고자 한다.
웹 기술의 변천사를 먼저 살펴본 이유는,
단순히 기술을 외우기보다 그 기술이 왜 생겨났는지를 알고 싶었기 때문이다.
이 과정을 통해 웹 기술에 대한 전체적인 그림이 머릿속에 그려졌다.
앞으로는 이 흐름을 바탕으로 기존 프로젝트를 웹으로 옮기는 과정을 직접 실행해볼 계획이다.
그 과정도 블로그에 정리하며, 쌓아가고자 한다.
