JS는 HTML(DOM)을 변경하고, HTML(DOM)에서 발생하는 이벤트를 인지 가능하다.
예를 들어, 결제하기 버튼을 누르면 결제하기 페이지로 이동하거나 경고창을 띄우는 등의 이벤트를 발생시킨다.
JS를 통해 HTML(DOM)을 변경하고 우리는 웹브라우저를 통해 HTML(DOM)에서 발생하는 다양한 이벤트들을 인지할 수 있다.
하지만 JS를 통해 직접 DOM을 변경하면 다음과 같은 문제가 발생한다.
◼︎ Hard to manage
HTML(DOM) 요소 하나하나씩 조작을 가해야 하기 때문에 이때 일일이 매번 DOM을 선택하여 조작해야 하며 이는 개발을 힘들게 한다.
◼︎ 반복적인 Rendering Process
DOM 요소가 하나 바뀔때마다 매번 반복적인 Rendering Process(Render Tree -> Layout -> Paint)가 실행된다.
02. jQuery 등장 : JS 통한 DOM 조작 쉽게 돕는 라이브러리
#1. 배경 및 필요성
웹브라우저마다 자바스크립트 엔진이 달라서 동일한 자바스크립트 코드가 모든 브라우저에서 동일하게 동작하지 않는 문제가 발생하였다.
이로 인해 브라우저 간 차이를 직접 처리해야 하는 번거로운 작업을 해야했고, 다양한 브라우저에서 동일한 방식으로 자바스크립트를 실행할 수 있게 하는 라이브러리가 필요했다.
jQuery는 주요 브라우저에서 일관된 자바스크립트 동작을 보장하기 위해 등장하였으며, jQuery를 사용하면 DOM 조작이 쉽고 간편하였다.
#2. jQuery 주요 기능
◼︎ DOM 요소 선택
jQuery는 CSS 선택자를 사용해 DOM 요소를 쉽게 선택할 수 있으며, 이를 통해 특정 요소를 선택하여 그 요소에 대해 조작을 수행할 수 있다. 예를 들어, $('div.exClass')와 같이 작성하여 div 요소 중 exClass이름을 가진 특정 클래스를 가진 요소를 선택할 수 있다. 자바스크립트를 이용한 document.getElementByClassName 방식과 비교하여 훨씬 직관적이고 간결하게 사용 가능하다.
◼︎ DOM 요소 조회 및 수정
jQuery는 선택된 DOM 요소를 쉽게 조회하고 수정할 수 있도록 다양한 메서드를 제공한다.
text(), html() 등을 사용하여 요소의 텍스트나 HTML내용을 가져오거나, append(), remove() 등을 사용해 DOM 구조를 동적으로 변경 가능하다.
◼︎ AJAX 지원 및 JSOM/XML 파싱
jQuery는 AJAX 요청을 간단하게 처리할 수 있는 메서드를 제공한다. $.get(), $.post()와 같은 메서드를 통해 서버와 비동기적으로 데이터를 주고받을 수 있게 하며, JSON/XML 데이터를 쉽게 파싱할 수 있다.
03. React 등장 : JS 통한 DOM 조작 단순화하는 프레임워크
jQuery를 통해 DOM 조작이 쉬어졌지만, DOM 요소가 하나 바뀔 때마다 매번 Rendering Process가 발생하는 문제가 있었다.
이는 특히 다수의 HTML 요소가 바뀌는 경우, 다중 DOM 변경이 발생한 경우 다수 렌더링 문제가 심각하였다.
React는 이런 다수 DOM 변경에 의한 다수 렌더링 문제를 해결하기 위해 등장하였다.
예를 들어, Facebook과 같은 피드 기반의 웹페이지에서는 한 번의 이벤트로 여러 DOM 요소가 변경된다. 이때 매번 렌더링을 발생시키면 성능 문제가 생기며 React와 같은 프레임워크가 필요했다.
React는 다수의 DOM 변경이 필요한 경우 VDOM을 사용해 실제 DOM을 한 번에 업데이트하여 성능 문제를 해결할 수 있었다.
#1. JavaScript Frontend Framework
💡 Frontend JavaScript Framework
React JS : SPA를 구현할 수 있도록 하는 라이브러리. DOM을 효율적으로 관리 가능
Angular
Vue.js
위 프론트엔드 자바스크립트 프레임워크의 역할을 다음과 같다.
VDOM을 사용해 DOM을 한 번에 조작하게 하여 성능 개선
페이지 이동 네트워크를 사용하지 않고 JS를 통해 렌더링하여 SPA 가능하게 함
세션 관리, localStorage 등을 통해 상태 관리 기능 제공 : 로그인하고 난 뒤 쿠키나 로컬 스토리지를 활용해 웹페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모든 것들을 제공
프론트엔드 웹 개발 개념
01. 웹페이지의 화면 변경 : JS 통한 HTML(DOM) 조작
JS는 HTML(DOM)을 변경하고, HTML(DOM)에서 발생하는 이벤트를 인지 가능하다.
예를 들어, 결제하기 버튼을 누르면 결제하기 페이지로 이동하거나 경고창을 띄우는 등의 이벤트를 발생시킨다.
JS를 통해 HTML(DOM)을 변경하고 우리는 웹브라우저를 통해 HTML(DOM)에서 발생하는 다양한 이벤트들을 인지할 수 있다.
하지만 JS를 통해 직접 DOM을 변경하면 다음과 같은 문제가 발생한다.
◼︎ Hard to manage
HTML(DOM) 요소 하나하나씩 조작을 가해야 하기 때문에 이때 일일이 매번 DOM을 선택하여 조작해야 하며 이는 개발을 힘들게 한다.
◼︎ 반복적인 Rendering Process
DOM 요소가 하나 바뀔때마다 매번 반복적인 Rendering Process(Render Tree -> Layout -> Paint)가 실행된다.
02. jQuery 등장 : JS 통한 DOM 조작 쉽게 돕는 라이브러리
#1. 배경 및 필요성
웹브라우저마다 자바스크립트 엔진이 달라서 동일한 자바스크립트 코드가 모든 브라우저에서 동일하게 동작하지 않는 문제가 발생하였다.
이로 인해 브라우저 간 차이를 직접 처리해야 하는 번거로운 작업을 해야했고, 다양한 브라우저에서 동일한 방식으로 자바스크립트를 실행할 수 있게 하는 라이브러리가 필요했다.
jQuery는 주요 브라우저에서 일관된 자바스크립트 동작을 보장하기 위해 등장하였으며, jQuery를 사용하면 DOM 조작이 쉽고 간편하였다.
#2. jQuery 주요 기능
◼︎ DOM 요소 선택
jQuery는 CSS 선택자를 사용해 DOM 요소를 쉽게 선택할 수 있으며, 이를 통해 특정 요소를 선택하여 그 요소에 대해 조작을 수행할 수 있다. 예를 들어, $('div.exClass')와 같이 작성하여 div 요소 중 exClass이름을 가진 특정 클래스를 가진 요소를 선택할 수 있다. 자바스크립트를 이용한 document.getElementByClassName 방식과 비교하여 훨씬 직관적이고 간결하게 사용 가능하다.
◼︎ DOM 요소 조회 및 수정
jQuery는 선택된 DOM 요소를 쉽게 조회하고 수정할 수 있도록 다양한 메서드를 제공한다.
text(), html() 등을 사용하여 요소의 텍스트나 HTML내용을 가져오거나, append(), remove() 등을 사용해 DOM 구조를 동적으로 변경 가능하다.
◼︎ AJAX 지원 및 JSOM/XML 파싱
jQuery는 AJAX 요청을 간단하게 처리할 수 있는 메서드를 제공한다. $.get(), $.post()와 같은 메서드를 통해 서버와 비동기적으로 데이터를 주고받을 수 있게 하며, JSON/XML 데이터를 쉽게 파싱할 수 있다.
03. React 등장 : JS 통한 DOM 조작 단순화하는 프레임워크
jQuery를 통해 DOM 조작이 쉬어졌지만, DOM 요소가 하나 바뀔 때마다 매번 Rendering Process가 발생하는 문제가 있었다.
이는 특히 다수의 HTML 요소가 바뀌는 경우, 다중 DOM 변경이 발생한 경우 다수 렌더링 문제가 심각하였다.
React는 이런 다수 DOM 변경에 의한 다수 렌더링 문제를 해결하기 위해 등장하였다.
예를 들어, Facebook과 같은 피드 기반의 웹페이지에서는 한 번의 이벤트로 여러 DOM 요소가 변경된다. 이때 매번 렌더링을 발생시키면 성능 문제가 생기며 React와 같은 프레임워크가 필요했다.
React는 다수의 DOM 변경이 필요한 경우 VDOM을 사용해 실제 DOM을 한 번에 업데이트하여 성능 문제를 해결할 수 있었다.
#1. JavaScript Frontend Framework
💡 Frontend JavaScript Framework
위 프론트엔드 자바스크립트 프레임워크의 역할을 다음과 같다.
💡 Backend JavaScript Framework
💡 Graphic JavaScript Framework
04. CSS 개발 쉽게 도와주는 PreProcessor, Framework
#1. CSS PreProcessor / CSS Framework / UI Framework
💡 CSS ProProcessor = Bundler + Transplier
CSS ProProcessor는 CSS 개발 편의성을 위해 다양하고 편리한 CSS 확장 문법을 제공하며, 번들링을 통해 파일 개수를 줄여준다.
트랜스파일링과 번들링을 통해 최종 CSS를 반환하며, SASS, SCSS 등이 있다.
https://itguswjd.tistory.com/category/Front-End/SCSS
'Front-End/SCSS' 카테고리의 글 목록
itguswjd.tistory.com
SCSS 사용법 및 기본 문법은 위 포스팅들을 참고하여 이용 가능하다.
💡 CSS Framework
CSS Framework는 CSS 활용을 위한 방법론 및 디자인 시스템을 제공하며, Tailwind CSS가 대표적이다.
💡 UI Framework
UI Framework는 디자인 시스템 및 UI 시스템을 제공하며, Tailwind, Material UI가 대표적이다.
#2. 웹프론트엔드 개발시 CSS 활용법
◼︎ 원시적 방법
CSS 파일을 import하여 HTML Selector 등을 사용하여 적용하는 방식
◼︎ CSS-in-JS
JS안에 CSS 작성하는 방식
◼︎ inline 방식
HTML, JSX 내 css 스타일을 바로 명시하는 방식
'ASAC > 웹 기초 프로그래밍' 카테고리의 다른 글