리액트 등장 배경 알아보기
TIL 23. 10. 31
오늘 한 일
- 간략히 보는 웹 개발 역사
들어가며
내배캠 React 5주차에 들어서면서 React 입문 강의를 지급 받았다. 본격적인 강의 수강이 앞서 잠시 시간이 있을 때 웹 개발의 역사를 살펴보며 리액트가 등장하게 된 배경을 알아보았다.
간략히 보는 웹 개발 역사
문서를 공유하기 위한 WEB 1.0
HTML(Hypertext Markup Language)의 Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미한다.
실존하는 책이 아니라 가상 공간에서 문서를 만들고 공유할 수 있게 만드는 것이 바로 웹(Web)이다.
CGI 통신
웹이 처음 등장했을 때는 HTML과 이미지를 전달해 주는 웹 서버밖에 없었다. 웹의 수요가 증가함에 따라 정적인 HTML만을 가지고 정보를 제공하는 것의 한계가 있었다. 그렇게 등장한 기술이 CGI.
CGI(Common Gateway Interface)란? 웹 서버와 외부 프로그램 사이에서 정보를 주고받는 방법이나 규약들을 말한다.
웹 서버가 웹 브라우저로부터 요청을 받으면 외부 프로그램 또는 스크립트를 호출하고, 이를 통해 동적인 콘텐츠를 생성하고 웹 브라우저에 반환한다.
이로써 사용자가 정보를 입력해서 전달하면 그 정보를 바탕으로 서버에서 동적으로 페이지를 생성할 수 있게 되었다. PHP와 같은 서버 사이드 언어가 만들어지면서 본격적인 홈페이지 서비스들이 만들어졌다.
웹 사이트는 사용자와 상호 작용할 수 있는 기능과 사용자 지향적인 경험을 제공하게 되었다.
JavaScript (1995)
서버가 아닌 브라우저에서 실행 가능한 클라이언트 스크립트 언어인 JavaScript가 등장했다. 서버와 통신하기 전에 화면을 조작하거나 서버에 전달할 데이터를 검증할 수 있게 되었다.
💬 CGI는 서버 측, JavaScript는 클라이언트 측
Ajax
이전의 웹 페이지 렌더링 방식은 아래와 같다.
- 브라우저 - 새로운 페이지를 서버로 요청
- 서버 - 새로운 페이지를 생성한 다음 전체 페이지를 클라이언트로 전송
- 브라우저 - 페이지를 렌더링
이러한 렌더링 방식은 변경할 필요가 없는 부분까지 포함된 HTML 코드를 다시 전송 받기 때문에 불필요한 데이터 통신이 발생한다. Ajax는 이러한 전통적인 웹 페이지 렌더링 방식의 문제를 해결한다.
Ajax(Asynchronous JavaScript and XML)란? 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
비동기적으로 서버와 통신하여 페이지를 다시 로드하지 않고 필요한 데이터만 전송 받아 일부분만 업데이트한다.
Google의 Gmail과 Google Maps은 웹 애플리케이션에서 비동기적 통신을 사용한 예시다. 웹 브라우저에서 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능하다는 것을 보여줬다.
웹 애플리케이션 프로그래밍 언어로서 자바스크립트의 가능성을 확인하는 계기. 페이지를 부분적으로 갱신하고 서버는 API 역할에 집중.
jQuery (2006)
당시 개발자들은 각각 다른 브라우저에서 동작하는 코드를 따로 작성해야 했다. 그 이유는 브라우저 회사마다 자사 브라우저에서만 호환되는 비표준 웹 기술을 사용헀기 때문이다.
jQuery는 모든 브라우저에서 동일한 방식으로 DOM 요소를 선택하고 조작할 수 있는 일관된 API를 제공하여 크로스 브라우징 이슈를 어느 정도 해결한다.
jQuery 란? jQuery는 빠르고 작으며 기능이 풍부한 JavaScript 라이브러리.
“Write Less, Do More”. 간결한 문법과 jQuery에서 제공하는 다양한 기능들로 웹 개발을 빠르고 효율적으로 수행할 수 있도록 돕는다.
jQuery의 인기로 인해 자바스크립트 커뮤니티가 성장하였고 브라우저들도 표준 준수와 호환성을 개선하는 데 노력하게 된다.
크롬 브라우저와 V8 엔진 (2008)
JavaScript로 웹 애플리케이션을 구축하면서 JavaScript 성능 개선 필요해졌다. 구글은 JIT(Just-In-Time) 컴파일러가 포함된 V8이라는 자바스크립트 엔진과 당시 apple의 safari 오픈소스 웹 브라우저 엔진인 webkit을 결합시킨 크롬 브라우저를 출시한다.
크롬 브라우저는 매우 빠른 속도와 함께 특히 풍부한 디버깅 환경을 제공함으로써 웹 개발자들의 희망이 되어 주었다.
V8은 다양한 개발자와 사용자가 엔진의 개선과 유지 보수에 참여하는 오픈 소스 프로젝트로 만들어졌다.
Node와 npm (2009)
브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경인 Node.js가 출시되었다.
새로운 언어를 배우지 않아도 JavaScript만으로 서버 사이드 개발이 가능하게 된 것.
node에서 채택한 module은 코드를 단위화, 구조화하여 재사용하고 대규모 애플리케이션을 개발할 수 있게 했다. npm이라는 module을 패키징해서 등록하고 관리할 수 있는 도구가 생겨나면서 JavaScript 생태계는 폭발적으로 성장하게 된다.
JavaScript로 할 수 있는 일이 많아지면서 다 개발해서 사용할 수는 없으니 필요한 라이브러리만 가져다 쓰며 개발하는 방식.
댓글남기기