프론트엔드 웹 개발

 

 

프론트엔드 웹 개발 : Rendering = 웹 페이지의 화면 변경

웹 페이지 화면 변경: Javascript를 통한 HTML(DOM) 직접 조작 → Hard to Manage, 반복적인 Rendering Process

---

jQuery 등장: Javascript 통한 DOM 조작을 쉽게 돕는 라이브러리

과거에는 웹 브라우저 간 자바스크립트 엔진이 서로 달랐기 때문에, 동일한 자바스크립트를 사용해도 브라우저마다 동작이 다를 수 있었다. 이러한 호환성 문제를 해결하기 위해 jQuery가 등장했다.

• 크로스브라우저 지원: jQuery는 다양한 웹 브라우저에서 동일하게 작동하는 코드를 제공하는 라이브러리다. 이를 통해 브라우저 간 호환성을 쉽게 유지할 수 있다.
• 주요 기능:
  • DOM 요소 선택: getElementById와 같은 표준 자바스크립트 메서드를 쉽게 사용할 수 있도록 간단한 문법을 제공한다.
  • DOM 요소 조회 및 수정: 선택한 DOM 요소를 쉽게 조작할 수 있다.
  • AJAX 지원 및 JSON/XML 파싱: 비동기 호출을 지원하여, 페이지를 새로 고치지 않고도 데이터를 주고받을 수 있다.
    • XML을 가져와도 리렌더링 할 필요가 없음.

 

---

 

React 등장: Javascript 통한 DOM 조작을 단순화하는 프레임워크

웹 애플리케이션이 점점 복잡해지면서, 다수의 HTML 요소를 효율적으로 관리하기 위한 방법이 필요해졌다. React는 이러한 문제를 해결하기 위해 Facebook에서 개발한 프레임워크다.

• FaceBook에서 등장 →다수 HTML요소가 바뀌는 경우 React가 필요
  • 과거엔 페이지를 계속 전환해야함. → DOM Repaint 발생
  • 하나의 화면에서 모든걸 해결하는 형태 → 웹에서 앱 경험을 가질수 있게하자

• • VDOM 을 한데 모아 DOM을 한번에 조작

Javascript ‘Frontend’ Framework

자바스크립트는 웹 개발(백엔드, 프론트엔드)의 공식 프레임워크같은것이 아니라 단순히 프로그래밍 언어이기에 자바스크립트는 용도에 맞춰서 정말 미친듯이 다양한 라이브러리와 프레임워크들이 등장하게됐다.

• 프론트엔드 자바스크립트 프레임워크
  • React.js (다른것들과 달리 리액트는 라이브러리이지만 프론트엔드 프레임워크로 분류된다)
  • Angular
  • Vue.js
• 백엔드 자바스크립트 프레임워크
  • Express.js
  • Nest.js
• 그래픽 자바스크립트 프레임워크
  • Three.js 등

---

 

ℹ️참고

[ASAC 6기 강의자료]

 

• .