프론트엔드 역사와 node.js

가연·2023년 3월 28일

프론트엔드

목록 보기

2/2

1. ajax 이전

HTML,CSS,조금의 JS로만 이루어진 정적인 웹페이지. 데이터 변경 시 HTML 파일의 데이터를 수정했다.

2. PHP/ASP/JSP

페이지에 동적인 데이터 넣을 수 있게 됨. 하지만 브라우저가 새로 필요한 정보가 있으면 페이지를 다시 읽어야 하기 때문에 페이지 이동이나 새로고침 시 그 페이지의 모든 정보를 새로 가져오게 됨.
웹 프로그래머는 백엔드(+프론트엔드 조금), 백엔드가 앱도 관리했다.(웹앱)

3. ajax(XMLHttpRequest) 등장

이때 BE/FE로 나뉨.(아마)
자바스크립트를 본격적으로 사용하게 됐다. 페이지 이동 없이 데이터를 백엔드와 주고받을 수 있게 됐으며 웹 표준 문제로(브라우저마다 화면을 그리는 방식(돔)이 다름) jquery 라는 라이브러리 등장. CSS에서 사용하던 Selector 방식으로 DOM의 위치를 찾고, 찾은 DOM을 간편한 방식으로 변경. 이때 이런 호환성 기능으로 무겁고 느리다는 단점이 있음.

4.v8엔진과 node.js 등장

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임.(nodejs != javascript )
(런타임이란 해당 프로그램이 필요한 시스템 자원(RAM, 시스템 변수, 환경변수 등)을 할당받고 실제로 시스템 자원을 사용해서 어떤 처리를 하고 있는 것)
프레임워크로는(자바-스프링, 파이썬-장고 와 같이 일정한 형태와 필요한 기능을 갖추고 있는 뼈대) express가 있고, 웹 서버나 WAS를 만들 수 있다. 그 뿐 아니라 자바스크립트와 node.js만으로 웹의 전체 서비스 제작이 가능해졌다.
-> SSR 적용!
서버가 node.js일때

기존 서버를 API서버로 하고, ssr을 위한 프론트 서버를 둘 때

5. 자바스크립트 뷰 렌더링

자바스크립트로 동적으로 html을 만듦 -> 복잡해지고 보안 이슈 생김

6. 템플릿 엔진 등장

템플릿 파일 만들고 데이터 연결해줌. 위 문제 해결(현재는 바닐라js에서만 사용)

프론트엔드 역사와 node.js