Pace Check

<aside> ⚠️ 실제 수업을 진행한 내용에서, 설명하며 이해를 돕기 위한 추가적인 내용들이 들어가있음

복습할때 심화 부분은 회색으로 표기하였으니 기본적으로 보지말고, 제대로 이해된자들만 볼 것

0. 웹 개요

우리가 사용하는, 우리를 둘러싼 웹 환경을 살펴보면 크롬이나 사파리같은 웹 브라우저가 있고, 웹 서버도 있다. 웹을 개발한다는것은 웹 브라우저와 웹 서버와 관련된 모든것들을 개발하는걸 통칭한다고 이해할 수 있다.

0.1. 웹 개발을 배우는 이유?

우리는 앱과 웹의 세상에 살고있다. 프론트엔드라고 하면 웹만 생각하는데, 앱 화면도 물론 프론트엔드에 해당한다

0.2. 웹 개발은 무엇인가?

웹 페이지에 무엇인가를 표기하는것 Displaying things on a web page 웹 페이지에 표기 방식인 Rendering 을 다루는건 프론트엔드, 웹 페이지가 표기할 데이터와 조작은 백엔드

Untitled

image.png

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

어떻게 유저의 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까?

1.1. 웹 페이지의 화면 변경 : Javascript 통한 HTML(DOM) 직접 조작

결제하기 버튼을 누르면 결제하기 페이지로 이동하거나, 누르면 안되는 버튼을 누르면 경고창을 띄우거나

  1. Javascript 를 통해 HTML (DOM) 을 변경하며, 우리가 보는 화면을 마치 뮤지컬처럼 다채롭게 바꿔준다.
  2. Javascript 는 HTML (DOM) 을 변경하고, HTML (DOM) 에서 발생하는 이벤트들을 인지할 수 있다.

![Javascript 를 통한 HTML(DOM) 조작을 다루는 이유는 이후에 Javascript 프레임워크가 얼마나 편한지를 배우기 위한 밑밥

Javascript 를 통한 HTML(DOM) 조작을 다루는 이유는 이후에 Javascript 프레임워크가 얼마나 편한지를 배우기 위한 밑밥

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

브라우저 호환성을 위한 (크로스 브라우저) 자바스크립트 라이브러리

2000년대는 닷컴버블을 맞이하며 많은 웹 브라우저가 나왔고, 웹 브라우저 간 자바스크립트 엔진이 다르기때문에 웹 브라우저 자신들만의 추가 자바스크립트 문법들을 추가해서, 자바스크립트 파일은 어떤 웹 브라우저에서는 동작하고 어떤 웹 브라우저에서는 동작하지 않는 최악의 호환성 시대가 도래

이렇게 웹 브라우저간 호환성이 낮아 개발자들이 골치썩던 시절 동일 자바스크립트 개발을 위한 라이브러리 등장

jQuery 는 다음과 같은 기능들을 제공

Untitled