Don't Panic
in JS ☕ 20분 읽기

[JS] jQuery 기초

#JS
목차

jQuery란

  • jQuery는 크로스 플랫폼을 지원하는 경량 자바스크립트 라이브러리다.
  • 자바스크립트로 길게 짜던 코드를 jQuery로는 몇 줄이면 끝낼 수 있다. 예를 들어 document.get...으로 짜던 것을 $()로 짤 수 있다.
  • 현업에서 지금은 잘 쓰지 않지만, 그렇다고 만나지 않을 가능성도 없다.
  • 웹 페이지의 구조(HTML), 행위(JS), 표현(CSS)을 분리하면 UI 코드가 방대해지고 관리가 어려워지는데, jQuery는 이를 어느 정도 해결해 준다.
  • HTML 문서의 탐색·조작, 이벤트 핸들링, 애니메이션, AJAX 등을 멀티 브라우저를 지원하는 API로 간편하게 사용할 수 있다.
    • AJAX(Asynchronous JavaScript And XML)는 자바스크립트와 서버 사이의 통신으로, 비동기 방식의 서버 통신을 지원한다.
  • 2019년 기준 상위 100만 개 웹 페이지 중 84%가 jQuery를 사용했다.

jQuery의 특징

  • 크로스 플랫폼을 지원하여 어떤 브라우저에서도 동일하게 동작한다.
  • 브라우저 호환성을 고려한 대체 코드를 작성할 필요가 없다.
  • 네이티브 DOM API(DOM 쿼리, traversing, manipulation 등)보다 직관적이고 편리한 API를 제공하여 개발 속도를 향상시킨다.
  • 이벤트 처리, AJAX, 애니메이션 효과를 쉽게 사용할 수 있다.
  • 다양한 effect 함수를 제공하여 동적인 페이지를 쉽게 구현할 수 있다.

jQuery 개요 슬라이드

jQuery 기본 구문

  • 기본 구문은 selector로 DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행한다.
  • selector 표현식과 action 메서드를 조합한 형태로 작성한다. 예: $(selector).action();
  • jQuery로 DOM을 탐색하기 전에 웹 브라우저에 문서가 모두 로드되어 있어야 한다.
  • jQuery는 document ready 이후 처리할 수 있는 두 가지 방법을 제공한다.

정리

  • jQuery는 가벼운 자바스크립트 라이브러리로, DOM 조작·AJAX 등을 지원하여 빠르고 쉬운 개발을 돕는다.
  • jQuery 선택자는 DOM을 탐색하고 다양한 메서드를 제공하는 래퍼세트(WrapperSet) 객체를 반환한다.
  • 래퍼세트 객체는 메서드 체인을 제공하여, 메서드 호출에서의 반복적인 코딩을 줄여 준다.
  • jQuery는 공식 사이트에서 다운로드해 쓰거나 CDN에서 직접 쓸 수 있다(CDN 권장).

DOM 탐색

  • DOM은 HTML과 XML 문서의 구조를 정의한 후 API를 제공한다.
  • 문서 요소 집합을 트리 계층 구조로 HTML로 표현한다.

DOM 트리 계층 구조

jQuery에서의 DOM 탐색

  • jQuery는 DOM 탐색에서 CSS에서 사용하는 selector 표현 방식을 사용한다.
  • 브라우저가 표준 CSS 선택자를 올바르게 구현하지 않았더라도, jQuery는 W3C 표준에 맞게 요소를 탐색한다.
  • jQuery 셀렉터는 CSS Selector와 jQuery에서 정의한 다양한 방법으로 DOM 요소를 탐색한다.
  • jQuery는 DOM 탐색 결과로 래퍼세트라는, DOM을 래핑한 객체를 반환한다.

jQuery는 selector만 알아도 어느 정도 쓸 수 있다.

선택자

  • selector를 이용해 DOM element를 검색한다.
  • CSS 문법을 확장해 태그를 찾는 선택자를 제공한다.
  • 특정 브라우저에 의존적인 스크립팅에서 벗어날 수 있다.

jQuery 선택자 개요

요소 탐색

  • jQuery 선택자는 DOM 객체를 탐색해서 래퍼세트 객체로 반환한다.
  • jQuery 선택자에는 요소, id, class, 다중, 복합, 그리고 모두(전체) 선택자 등이 있다.

jQuery 선택자 종류

요소 선택자(Element Selector)

All Selector

  • CSS의 가장 기본 선택자로, HTML 페이지에 있는 모든 문서 객체를 선택한다.
  • 주로 HTML 레이아웃을 확인하는 용도로 사용한다.
  • selector: *

All Selector 예시

Element Selector

  • 특정 element를 선택한다.
  • 요소 선택자는 DOM 요소명(태그 이름)이 일치하는 것들을 모두 찾는다.
  • DOM API 중 document.getElementsByTagName()과 같다.
  • selector: element name

Element Selector 예시

ID Selector

  • 특정 id 속성을 가진 요소를 선택한다.
  • 웹 표준에서 id는 HTML 페이지에서 단 하나의 태그에만 적용한다(선택자 중 사용 빈도가 높음).
  • 만약 id가 중복된 경우 첫 번째 요소를 반환한다.
  • id 선택자는 여러 선택자 중 DOM 객체를 가장 빨리 탐색한다.
  • DOM API 중 document.getElementById()와 같다.
  • selector: #idname

ID Selector 예시

Class Selector / Complex(복합) Selector

  • 특정 class 속성을 가진 요소를 선택한다.
  • DOM API 중 document.getElementsByClassName()과 같다.
  • selector: .classname

Class Selector 예시

  • class 속성이 2개인 경우 AND 조건으로 표현한다.
  • 복합 선택자는 주로 Selector + Class Selector 조합으로 사용한다.

복합 선택자 예시

Multiple(다중) Selector

  • 여러 element를 선택한다(선택할 element가 여러 개일 때, 콤마로 구분).
  • 나열된 선택자를 하나라도 만족하는 DOM 객체를 반환한다.
  • selector: element_name, element_name, ...

다중 선택자 예시

DOM 계층 구조 탐색 (DOM Hierarchy Selector)

  • jQuery는 HTML DOM 계층 구조에 접근하고 제어하는 쉬운 방법을 제공한다.
  • DOM 탐색 시 트리 구조의 DOM 계층 구조를 파악하는 것은 중요하다.
  • DOM 계층 구조가 나타내는 다양한 관계를 이해하면 DOM 탐색에 도움이 된다.
  • DOM 요소들은 수평적으로는 형제 요소, 수직적으로는 부모·자식·자손·조상 요소로 관계를 구분한다.

DOM 계층 관계

dynamic web에서 filesystem으로 임포트하는 예시:

filesystem 임포트 예시

  • $("Parent > Child")는 자식 선택자로, 바로 하위 자식을 탐색한다.
  • $("Ancestor Descendant")는 자손 선택자로, 모든 하위 자식을 탐색한다.
  • $("previous + next")는 인접 선택자(next adjacent)로, 바로 다음 형제를 탐색한다.
  • $("previous ~ next")는 형제 선택자(next siblings)로, next에 대한 모든 형제를 탐색한다.

계층 선택자 예시

속성 선택자(Attribute Selector)

  • 속성 선택자를 사용해 DOM 요소가 가진 속성값으로 DOM 객체를 탐색한다.
  • 속성 선택자 표현식은 기본 선택자 바로 뒤에 나오는 대괄호에 표현한다.
  • 기본 선택자는 선택 사항이다. 생략 시 모든 요소에 대해 주어진 속성 선택자를 비교한다.

속성 선택자 예시 1

속성 선택자 예시 2

필터 선택자(Filter Selector)

  • 필터 선택자는 DOM 요소를 탐색한 결과에서 원하는 요소를 걸러내기 위해 사용한다.
  • 기본 선택자는 선택 사항이며, 필터 선택자는 기본 선택자 뒤에 콜론(:) 기호와 함께 표기한다.
  • 필터 선택자에는 입력 폼 유형을 선택하는 것과 요소 특성으로 선택하는 것이 있다.
  • 이 외에도 위치 기반 필터 선택자와 함수 기반 필터 선택자가 있다.

필터 선택자 예시

  • 위치 기반 필터 선택자는 선택한 요소들의 위치를 기반으로 필터링을 수행한다.

위치 기반 필터 선택자

  • jQuery는 함수 형태의 필터 선택자도 제공한다.

함수 기반 필터 선택자

래퍼세트와 메서드

  • jQuery는 선택자로 탐색한 DOM 객체들을 래퍼세트라는 특별한 배열 객체에 담아 반환한다.
  • 선택된 DOM 객체가 없는 경우에도 비어 있는 래퍼세트 객체를 반환한다.
  • 래퍼세트 객체에는 내포된 DOM 객체들을 처리하는 다양한 메서드가 있다.
  • 이러한 jQuery 메서드는 플러그인 확장을 통해 추가할 수 있다.

래퍼세트 개요

요소 반복 - each()

  • jQuery.each() 함수는 배열이나 객체를 반복적으로 처리할 때 사용한다.
  • 첫 번째 인자에는 자바스크립트 배열이나 래퍼세트 객체가 올 수 있다.
  • 두 번째 인자에는 각 요소를 반복하며 처리할 콜백(callback) 함수를 정의한다.
  • 콜백 함수는 두 개의 매개변수(index: 배열 인덱스, item: 반복하는 요소 객체)를 갖는다.

each() 예시 1

each() 예시 2

필터 함수 - filter()

  • filter()는 래퍼세트에 포함된 DOM 요소를 주어진 조건으로 걸러내는 메서드다.
  • 기존 래퍼세트에서 DOM 요소를 축소한 래퍼세트를 반환한다.
  • filter() 인자에는 필터링 조건을 나타내는 선택자나 함수가 올 수 있다.

filter() 예시 1

filter() 예시 2

  • 필터 선택자로 조건을 나타내기 어려운 경우 함수를 사용한다.
  • 함수를 사용한 경우, filter()는 함수 반환값이 true인 요소만 새로운 래퍼세트에 포함한다.
  • filter()로 필터링한 래퍼세트에서 end()를 호출하면 이전 래퍼세트로 돌아간다.

filter() 함수 조건 예시

위치 기반 함수 - eq() / first() / last()

  • 위치 기반 함수는 HTML DOM 객체의 특정 위치를 선택하는 함수다.
  • eq()는 래퍼세트에서 주어진 인덱스 번호에 해당하는 DOM 요소를 감싼 새로운 래퍼세트를 반환한다.
  • first()는 래퍼세트의 첫 번째 DOM 요소를 감싼 새로운 래퍼세트를 반환한다.
  • last()는 래퍼세트의 마지막 DOM 요소를 감싼 새로운 래퍼세트를 반환한다.

위치 기반 함수 예시

래퍼세트에 요소 추가/삭제 - add() / not()

  • 필터 함수와 위치 기반 함수는 래퍼세트에 포함된 요소를 축소하기 위해 사용한다.
  • jQuery는 래퍼세트에 요소를 추가하거나 특정 요소를 삭제하는 메서드도 제공한다.
  • add()는 주어진 조건을 만족하는 요소를 추가한 새로운 래퍼세트를 반환한다.
  • not()은 주어진 조건을 만족하는 요소를 삭제한 새로운 래퍼세트를 반환한다.

add() / not() 예시

DOM 요소 판별 - is()

  • is()는 기존 래퍼세트가 주어진 선택자와 일치하는지 여부를 반환한다.
  • 다른 메서드들이 새로운 래퍼세트 객체를 반환하는 반면, is()는 boolean 값을 반환한다.
  • 비교 조건을 선택자로 표현하기 어려우면 함수를 사용할 수 있다.
  • 비교 조건 함수 호출 결과가 true면 is()는 true를 반환한다.

is() 예시

자손 요소 탐색 - find()

  • find()는 래퍼세트의 모든 요소에 대해 주어진 선택자를 만족하는 모든 자손 요소를 선택한다.
  • 선택자로 탐색한 DOM 요소들을 새로운 래퍼세트로 반환한다.
  • filter()가 래퍼세트 요소를 거르기 위한 것이라면, find()는 래퍼세트 요소들의 하위 자손을 탐색하기 위한 것이다.

find() 예시

정리

  • jQuery는 DOM 탐색을 위해 CSS의 Selector 표현 방식을 사용한다.
  • 선택자를 통해 HTML DOM 계층 구조에 접근하고 제어하는 쉬운 방법을 제공한다.
  • 필터 선택자는 DOM 요소를 탐색한 결과에서 원하는 요소를 거르기 위해 사용한다.
  • 래퍼세트 객체에는 내포된 DOM 객체를 처리하는 다양한 메서드가 있다.

DOM 객체 제어

  • 순수 자바스크립트만으로 DOM 객체 구조를 처리하는 것은 복잡하다.
  • jQuery 메서드로 DOM 객체를 더 쉽게 다룰 수 있다.
  • jQuery는 DOM 요소의 속성·class·style을 제어하는 DOM 특성 제어 메서드를 제공한다.
  • 이 밖에도 DOM 내부 제어 메서드, DOM 추가/삭제 메서드, DOM 객체 삽입 메서드가 있다.

DOM 객체 제어 개요

DOM 특성 제어 - 속성 제어

  • attr(name)은 래퍼세트의 첫 번째 요소에 대한 속성값을 반환한다.
  • attr(name)은 해당 속성이 없으면 undefined를 반환한다.
  • attr(name, value), attr(object), attr(name, function)은 확장 집합의 모든 요소에 속성값을 설정한다.
  • removeAttr(name)은 DOM 요소에서 해당 속성을 제거한다.

속성 제어 예시

DOM 특성 제어 - class 속성 제어

class 속성 제어 예시

DOM 특성 제어 - style 속성 제어

  • css(name)은 래퍼세트의 첫 번째 요소에 대한 style 속성값을 반환한다.
  • css(name, value)는 래퍼세트 내 모든 DOM 요소에 style을 설정한다.
  • css(name, function)은 style 속성값을 바로 지정하는 대신 함수를 통해 설정한다.
  • 여러 style 속성값을 한 번에 설정하려면 css(object)와 같이 객체를 인자로 사용한다.

style 속성 제어 예시

DOM 내부 제어 - HTML과 텍스트 조회

  • html()과 text()는 DOM 객체 내부를 조회하는 메서드다.
  • 자바스크립트의 innerHTML, textContent 속성과 관련이 있다.
  • html()은 HTML 태그를 인식하지만, text()는 HTML 태그를 인식하지 않는다.
  • 래퍼세트에서 text()를 호출하면 태그를 인식하지 못하므로 태그를 제외한 텍스트만 반환한다.

html() / text() 조회 예시

DOM 내부 제어 - HTML과 텍스트 설정

  • html(value)와 text(value)는 DOM 객체 내부를 설정하는 메서드다.
  • html()은 HTML 태그를 인식하므로 DOM 객체 형태로 지정한 내용을 설정한다.
  • text()는 태그를 인식하지 못하므로 텍스트 형태로 지정한 내용을 설정한다.
  • text()로 태그가 포함된 내용을 설정하면 단순 텍스트로 인식되어 태그가 그대로 보인다.

html() / text() 설정 예시

DOM 추가 및 삭제 - DOM 객체 추가

  • html()은 문자열로 된 HTML을 DOM 객체로 추가한다.
  • 그러나 문자열을 이어붙여 HTML을 구성하는 작업은 복잡하고 지저분한 코드를 유발한다.
  • $() 함수는 선택자를 수행하는 기능뿐 아니라 DOM 객체를 바로 생성하는 기능도 제공한다.
  • 메서드 체인을 사용하면 $()로 DOM 객체를 생성해 객체 특성을 설정하는 작업을 간편하게 할 수 있다.

DOM 객체 추가 예시

DOM 추가 및 삭제 - DOM 객체 삭제

  • jQuery는 DOM 객체를 삭제하거나 DOM 객체 내부를 비우는 메서드를 제공한다.
  • remove()는 래퍼세트의 모든 요소를 HTML 문서에서 삭제하고 삭제한 내용을 반환한다.
  • empty()는 래퍼세트의 모든 요소에 대해 하위 자식 요소를 삭제하고 삭제한 결과를 반환한다.

DOM 객체 삭제 예시

DOM 객체 삽입

  • DOM 객체 삽입은 이미 존재하는 DOM 객체에 다른 DOM 객체를 삽입하는 것이다.
  • target 객체를 기준으로 어느 위치에 삽입하는지에 따라 다양한 메서드가 존재한다.
  • append(), prepend()는 target 객체의 자식 요소로 DOM 객체를 삽입한다.
  • before(), after()는 target 객체의 인접한 형제 요소로 DOM 객체를 삽입한다.

DOM 객체 삽입 위치

객체 삽입 메서드는 파라미터에 어떤 객체를 사용하는지에 따라 두 가지 유형으로 구분된다.

  • appendTo, prependTo, insertAfter, insertBefore는 삽입 대상 객체를 인자로 받는다.
  • append, prepend, after, before는 삽입하려는 내용 또는 객체를 인자로 받는다.
  • 삽입하려는 내용이 DOM 객체인 경우, 해당 객체는 이전 위치에서 새로운 위치로 이동한다.

jQuery Effect

effect 메서드

  • jQuery 이펙트는 화면에서 보여주는 시각 효과를 구현하는 방법이다.
  • 사용자가 직접 애니메이션 효과를 만들 수 있다.
  • jQuery 플러그인으로 시각 효과를 내는 메서드를 구현할 수 있다.
  • jQuery에서 기본으로 제공하는 Effect 메서드는 아래와 같다.

Effect 메서드 목록

effect 매개변수

  • jQuery Effect의 모든 메서드는 공통으로 세 개의 매개변수를 제공한다.
  • speed: 효과를 진행하는 속도를 지정한다.
  • callback: 효과 완료 후 실행할 함수를 지정한다.
  • easing: 애니메이션 easing 형태를 지정한다. 플러그인을 사용하지 않으면 linear와 swing만 입력할 수 있다.

effect 매개변수

사용자 정의 효과 - animate()

  • 기본으로 제공하는 간단한 효과만으로도 시각 효과를 얻을 수 있다.
  • 조금 더 수준 높은 효과를 얻으려면 개별적으로 정의해야 한다.
  • animate() 함수는 사용자 정의 효과를 만들 수 있는 방법을 제공한다.
  • 첫 번째 인자인 객체에 속성값을 설정해 세밀하게 효과를 조정할 수 있다.

animate() 예시

정리

  • 순수 자바스크립트로 DOM 객체 구조를 처리하는 것은 복잡하다.
  • jQuery 메서드를 사용하면 DOM 객체를 다루는 작업을 더 간단히 처리할 수 있다.
  • jQuery 안티패턴은 성능에 좋지 않은 코딩 패턴이다. 이런 코딩을 지양해 성능을 개선해야 한다.
  • jQuery Effect를 사용해 화면에서 발생하는 시각 효과를 구현할 수 있다.

jQuery 실습

jQuery 실습 화면

w3schools - jQuery Get Started에서 아래 부분을 복사해서 사용한다.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

선택자와 action

앞에서 선택한 요소에게 action을 취한다.

선택자도 뭘 선택해야 하는지 물어볼 수 있다(시험 때).

선택자 부분

이런 선택자 부분(핑크 부분)이 시험에 나올 것이다.

선택자 예시

val / value

jQuery에서 쓸 때는 val, DOM을 직접 쓸 때는 value.

jQuery DOM 이벤트 처리

  • 기존 자바스크립트의 DOM 이벤트를 간편하게 처리·연결할 수 있다.
  • 이벤트 핸들러를 할당·해제할 수 있는 통합 메서드를 제공한다.
  • DOM element의 이벤트 타입마다 여러 핸들러를 할당할 수 있다.
  • click, mouseover 등과 같은 표준 이벤트 타입 명을 사용한다.
  • 핸들러의 매개변수로 이벤트 인스턴스를 사용할 수 있다.
  • 자주 사용하는 이벤트 인스턴스의 프로퍼티 등에 일관된 이름을 제공한다.
  • 하나의 API로 표준 호환 브라우저와 IE를 동시에 지원한다.

jQuery Event 기능

  • click 함수로 클릭 이벤트 처리
  • bind, on 함수를 이용한 모든 이벤트 처리
  • unbind, off 함수를 이용한 이벤트 제거

Event Binding - bind()

  • 선택된 DOM 객체의 이벤트에 지정한 핸들러를 연결하는 함수다.
  • 동적으로 생성한 DOM 객체에는 적용되지 않는다.
  • bind(eventType, data, listener)
    • eventType: 핸들러를 할당할 이벤트 타입의 이름
    • data: 핸들러 함수에서 사용할 데이터. 이벤트 인스턴스에 data 프로퍼티로 제공된다. 생략 시 두 번째 인자는 listener가 된다.
    • listener: 이벤트 발생 시 수행되는 핸들러 함수

Event Binding - on()

  • on()은 bind()와 마찬가지로 DOM 객체에 이벤트 핸들러를 연결한다.
  • delegate 방식으로 사용하면 현재 존재하는 DOM 객체뿐 아니라 동적으로 생성한 DOM 객체에도 적용할 수 있다.
  • 이벤트 연결에 가장 기본이 되는 함수로 권장된다.

on() 예시

이벤트 바인딩에서의 문제는 동적으로 생성된 DOM 객체다.

  • 기존 이벤트 연결 방식은 동적으로 생성된 DOM 객체에는 적용되지 않는 문제점이 있다.
  • Event Delegate 방식은 부모 DOM 객체에 이벤트를 연결한 후 이를 하위 DOM 객체에 전달하는 방식으로 적용할 수 있다.

Event Delegate

Event Binding - off()

  • off()는 on()과 반대로 DOM 객체의 이벤트를 제거한다.
  • 선택된 DOM 객체의 특정 이벤트 또는 모든 이벤트를 제거할 수 있다.

off() 예시

Simple Event Bind

  • jQuery는 DOM 객체에 이벤트를 연결하는 다양한 함수를 제공한다.
  • 예를 들어 클릭 이벤트 연결 시 on 대신 click 함수를 사용할 수 있다.

Simple Event 종류:

Simple Event 종류

one() 함수

  • 이벤트를 연결하고 한 번 실행한 후 삭제한다.
  • 이벤트 실행 후 off와 동일한 의미가 된다.

one() 예시

Mouse Event

  • jQuery에서 마우스 클릭 및 움직임과 관련된 이벤트를 처리할 수 있다.
  • mouseenter 이벤트는 경계 외부에서 내부로 접근 시 발생한다.
  • mouseover 이벤트는 마우스가 요소 안에 들어올 때 발생하며, 이벤트 버블링이 적용된다.

Mouse Event

Keyboard Event

  • 키보드에서 입력 시 키보드 이벤트를 처리할 수 있다.

Keyboard Event

Window Event

  • 윈도우에서 발생한 변화를 이벤트로 처리할 수 있다.

Window Event

Input Event

  • 일반적으로 HTML에서 입력 양식으로 데이터를 전송하는 작업을 많이 한다.
  • 이러한 입력 양식에서 발생하는 이벤트가 존재하며, jQuery에서 이를 지원한다.
  • 주로 form, input 등에서 발생하는 입력 이벤트를 처리한다.

Input Event

워크샵의 경우, 푸터 부분을 JS에서 jQuery로 바꿔 보는 식으로 진행한다.

정리

  • 자바스크립트는 DOM에서 발생하는 다양한 이벤트에 반응하여 원하는 작업을 수행할 수 있다.
  • jQuery는 기존 자바스크립트 DOM 이벤트를 간편하게 처리하고 연결할 수 있는 메서드를 제공한다.
  • bind, delegate, live, on과 같은 함수는 이벤트 핸들러를 DOM 요소에 적용하는 jQuery 함수다.
  • 계층 구조를 가진 DOM 객체에서 정확한 이벤트를 처리하려면 기본 이벤트와 이벤트 전파 방식의 이해가 필요하다.

보충: 웹 동작 개념 정리

클라이언트와 서버

  • client는 웹 브라우저를 가리킨다. 서버는 물리적 서버가 아니라 소프트웨어적인 서버(웹 서버)를 말한다.
  • WAS(Web Application Server)도 나중에 사용하게 되며, 이 중 우리는 톰캣을 사용 중이다.
  • 웹은 이 중 request를 날려 클라이언트-서버에서 요청 처리를 한다.

정적 리소스와 동적 리소스

  • 요청을 처리할 때는 동적인 리소스와 정적인 리소스가 있다.
  • 정적: 이미 만들어진 것. HTML, CSS, 자바스크립트 등 미리 만들어진 것이 서비스되는 것.
  • 동적: 이런 것들을 그때그때 생성한다. 네이버 사이트는 매번 바뀌는데, 그렇게 변경되는 것이 동적이다.
  • 현재 수업에서는 정적인 리소스만 사용 중이다.

톰캣과 배포

  • 서버에서는 톰캣에서 직접 작업하지 않고, 이클립스에서 작업한다.
  • 이클립스에서 프로젝트를 작성하고 톰캣에 배포하는 과정을 거친다.

요청 처리 흐름

페이지를 요청하면 톰캣이 동작하고 요청이 처리된다. 우리가 만들 요청은 다음과 같이 생겼다.

  • 각 protocol, domain(웹 서버), 8080은 포트 번호다.
  • 로컬호스트의 8080에 뭔가 떠 있는 것이고, 이 위치에서 WAS가 서비스를 한다.
  • 프로젝트를 실행시키면 그 프로젝트가 바로 context-path가 된다.
  • 그 뒤에 나오는 것이 우리가 가진 resource가 된다.
  • 리소스에는 정적인 요청과 동적인 요청이 있다.

정적인 요청

이러한 요청은 정적인 요청이다(.jsp라든가 확장자가 없는 요청들).

동적인 서비스

이런 것들은 동적인 서비스가 된다. 이제 그런 부분들을 만들어서 사용하게 된다.

웹 프론트엔드 3요소

HTML, CSS, JS가 응답을 통해 클라이언트로 내려간다. 여기서 응답은 스트림(데이터의 흐름)이라 부른다.

요소역할
HTML내용과 구조
CSS스타일 시트. 어떻게 보여질지 담당
JS동작. 어떻게 동작할지 담당

웹 표준에서는 이 세 요소를 가급적 분리해서 사용하라고 한다(유지보수를 위해서).

웹 프론트엔드 3요소

브라우저의 해석 (SAX vs DOM)

  • 서버가 스트림으로 태그 형태를 쭉 내려보내면 브라우저가 이를 해석한다.
  • 해석 시 인터프리터로 처음부터 한 줄씩 읽어간다(소스의 처음부터 다 읽음).

SAX와 DOM의 차이

  • SAX: 라인 바이 라인으로 읽으며 거기서 태그 발견 시 이벤트 발생.
  • DOM: 한 번에 다 읽고 메모리에 올려 실행.
  • 브라우저는 DOM 방식으로 읽어 들이며, 전달된 텍스트로 DOM을 만든다.

소스와 element의 차이

  • 소스는 서버에서 전달받은 날것 그대로의 것이다.
  • element는 그 소스를 해석해서 객체화해 놓은 것이다.
  • elements는 메모리에 있는 걸 보는 것이다.

소스와 element

브라우저는 성능을 위해 캐싱을 한다. 매번 요청할 때마다 서버에서 받아오면 용량이 늘어나기 때문.

박스 모델 (border / padding / margin)

  • padding: 콘텐츠를 감싸는 것.
  • border: 그 요소를 감싸는 것(패딩보다 더 바깥에 있음).
  • margin: 다른 요소와의 간격.

set vs add

  • set은 그냥 한 번에 덮어쓰고 끝낸다.
  • add는 주렁주렁 다는 것이다. addEventListener라는 말을 들으면 여러 가지 이벤트를 담을 수 있구나라고 알 수 있다.

이벤트 모델 정리

  • 이벤트 소스: 이벤트가 발생한 대상.
  • 이벤트: 특정 행동이 일어남.
  • 이벤트 리스너(= 이벤트 핸들러): 이벤트 발생 시 동작할 callback.

1. 이벤트 소스(Event Source)

이벤트가 발생되는 컴포넌트를 말한다. 즉, 버튼, 체크박스, 리스트, 프레임, 마우스 등과 같은 컴포넌트(DOM 객체)들이 이벤트 소스다.

2. 이벤트 리스너(Event Listener)

이벤트 소스에서 이벤트가 발생하는지 검사하고 있다가, 이벤트가 발생하면 실제로 이벤트를 처리할 수 있도록 만든 인터페이스다.

3. 이벤트 핸들러(Event Handler)

이벤트 리스너에 전달된 이벤트를 실제로 처리할 수 있도록 이벤트 리스너에 포함되어 있는 메서드다. 발생된 이벤트 객체를 받아와서 실제로 처리하는 기능을 가지고 있다.

우리가 콜백을 실행하는 게 아니라, 실제 호출은 브라우저가 하게 된다.

관련 글