배움의 과정 : 실천

▶ Overview ◀

● 기초

- 확장프로그램은 HTML, CSS, JS, image 등을 압축하고 있다.

- 외부 API 사용이 가능하다.

- 확장프로그램은 웹 페이지나 컨텐츠 스크립트 또는 cross-origin XMLHttpRequests을 사용하는 서버와 소통할 수 있다.

- 또한 북마크나 탭 등 브라우저 특징을 프로그래밍 계획에 따라 소통할 수 있다.

● 확장프로그램 UIs

- 브라우저 액션 또는 페이지 액션의 형태로 구글 크롬에 추가된다. 

- 브라우저 액션은 툴바에 아이콘으로 추가되고, 페이지 액션은 URL Bar에 추가된다.(컨텐츠 스크립트는 웹 페이지에 코드를 삽입할 수 있다.)

- 컨텍스트 메뉴, options page 등으로도 제공한다.

● 파일

- manifest file(필수), HTML file(필수), JS file, image file 등등을 포함한다.

- 하나의 폴더에 모든 이러한 파일을 넣고, 배포하고자 할 때는 .crx 로 끝나는 특수한 압축파일로 패키징되어 개발자 Dashboard에 업로드한다.

● Architecture

- 많은 확장프로그램은 메인 로직을 처리하는 보이지 않는 background page를 가지고 있다.

- 현재 확장프로그램의 UI를 포함하는 다른 페이지 또한 가지고 있다.

● background page

- background.html로 정의되며, 컨트롤할 수 있다.

- persistens background pages와 event pages의 두 가지 타입이 있다.

- persistens background pages는 항상 오픈되어 진다. 

- event pages는 필요에 따라 오픈되어 진다. 

● UI pages

- 확장프로그램의 UI를 보여주는 HTML pages를 포함할 수 있다. 

- 브라우저 액션은 팝업으로 열리며, HTML file로 실행된다.

- 어떤 확장프로그램은 option page를 가질 수 있는데, 확장프로그램이 어떤 일을 할 지 사용자가 커스터마이징할 수 있다.

- override page도 있고, chrome.tabs.create()나 window.open()으로 보여줄 수도 있다.

● content scripts

- 확장프로그램이 웹 페이지와 상호작용하는 것이 필요하다면, content script가 필요하다.

- 

● 오버라이드 페이지

- 북마크 매니저 : chrome://bookmarks 북마크 관리자

- 히스토리 : chrome://history 방문 기록

- 새 탭 : chrome://newtab 새 탭창..

※ 하나의 확장프로그램에서는 오직 한 페이지만 오버라이드 할 수 있다. 북마크 관리자랑 방문 기록  페이지를 같이 불가능!

합성이벤트

jQuery의 사용자 정의 핸들러로 .toggle()과 .hover() 메서드가 있으며, 합성 이벤트 핸들러라고 부른다.

.toggle() 메서드

두 개 이상의 함수 인자를 가진다.

처음 클릭하면 첫 번째 함수가 실행, 두 번째 클릭하면 두 번째 함수가 실행된다.

.toggleClass() 메서드

클래스의 존재 유무를 검사해 자동으로 추가하거나 제거해준다.

.hover() 메서드

두 개의 함수를 인자로 가진다.

마우스 커서가 들어가면 첫 번째 함수가 실행, 커서가 벗어나면 두 번째 함수가 실행된다.

이벤트의 여행

페이지에서 이벤트가 발생하면 DOM 전체 계층에 있는 모든 요소가 이벤트를 처리할 기회를 가진다.

반응에 대한 책임!

- 이벤트 캡처링

모든 것을 감싸고 있는 최상위 요소에게 이벤트가 처음으로 주어지고 그 후 연속해서 하위 요소로 전달된다.

- 이벤트 버블링

가장 낮은 자식 요소에 처음으로 전달되고, 반응 후 부모 요소에게 전파된다.

이벤트는 두 가지 과정 각각에 등록할 수 있다.

jQuery는 버블링 단계에 이벤트 핸들러를 등록한다. -> 첫 번째 이벤트 반응이 항상 최하위 특정 요소임을 보장받음

이벤트 버블링의 부작용

원치 않는다! .mouseenter과 .mouseleave 이벤트는 개별적으로 연결되고, .hover()메서드로 문제를 방지할 수 있다.

진행 경로 수정하기 : 이벤트 객체

이벤트 객체에 접근 할 수 있어야한다. -> 이벤트가 발생할 때 각 요소의 이벤트 핸들러로 넘겨지는 DOM 객체!

event 변수를 추가함으로써 핸들러에서 이벤트 객체를 사용할 수 있다.

event.target 프로러티를 사용하면 어느 이벤트가 처음으로 받은 요소인지(click 이벤트는 실제로 클릭된 요소) 알 수 있다.

this는 현재 이벤트를 처리하고 있는 DOM 요소이다.

이벤트를 받고 있는 애가 지금 처리하고 있는 mydiv일 때만(this) 버튼들을 숨긴다. 버튼을 누르면 안숨긴다.

.stopPropagatin() 메서드를 이용하여 이벤트 객체는 버블링 과정을 완전히 중단 할 수 있다.

기본 동작을 원치 않을 때 이벤트에 .preventDefault() 메서드를 호출하면 이벤트에 의해 기본 동작이 수행되는 일을 방지 할 수 있다. -> 잘 이해가 되지 않는다..ㅜㅜ

이벤트 위임

이 부분 잘 이해되지는 않는데, 버블링을 이용해서 이득을 얻을 수 있는 기법이라는 것 같다.

이벤트 위임을 활용해서 하나의 요소가 다른 여러가지 작업을 수행할 수 있도록 핸들러를 추가할 수 있다.

성능과 관련해서 얘기하는 것 같다...;

.is()는 현재 jQuery 객체가 지정한 선택자 표현식을 만족시키는지 검ㄴ사, 선택자에 해당하는 요소가 하나라도 있으면 true 반환.

이벤트 핸들러 제거하기

.unbind() 메서드를 사용한다.

$('.btn').unbind('click');

이벤트 네임스페이스 -> 잘 모르겠으나, 함수를 나중에 쓰기 위함인듯.. bind('식별하고자하는 이벤트이름', function()');

이벤트 다시 바인딩하기

funciton 함수가 변수에 할당된 경우를 종종봤는데, 이게 도대체 다른 점이 무엇인가 생각했었는데, 핸들러에 함수에 이름을 부여하는 것이었다.

var myfun = function(event) { ... };

나중에 이 함수를 다시 바인딩하고 싶을 때는 .bind('click', myfun); 이렇게 사용한다.

.one() 메서드는 이벤트 핸들러가 한 번만 호출된 후 바로 해제되기를 원하는 상황에서 사용한다.

$('.btn').one('click',myfun);

사용자 상호작용 흉내 내기

실제 이벤트가 발생하지 않았지만, 이벤트 핸들러 코드를 실행하고 싶을 때!

예로 페이지 로드할 때 원하는 객체에 click 이벤트가 실행된 상태에서 로드되길 원할 때!

$('.btn').trigger('click'); = $('.btn').click();

키보드 이벤트

종류 1. 키보드에 직접 반응하는 이벤트(keyup, keydown) - 어떤 키를 눌렀는지 알고 싶으면

종류 2. 텍스트 입력에 반응하는 이벤트(keypress) - 어떤 글자가 입력됐는지 알고 싶다면

키보드 이벤트 대상은 포커스를 가진 요소!

어떤 키를 눌렀는지 알기 위해 event 객체를 조사한다.

event.keyCode 프로퍼티는 눌려진 키에 대한 식별 값이 있 으며, 알파벳 키에 대해서 이 값은 대문자 ASCII 값이다.

그러므로 글자가 눌릴 때 매핑시키는 맵 또는 문자 객체를 만들어서 맵에 있는 확인하고, 그 값에 따라 이벤트 실행.

p.80

3장은 이벤트 처리와 관련된 내용을 학습합니당.

이벤트 처리란 jQuery 코드가 원하는 시점에 수행되게 하는 것!

페이지가 로드될 때 작업을 수행하게 하는 이벤트에는

1. $(document).ready() : DOM이 로드돼 사용할 준비가 끝나는 시점에 바로 호출. DOM 트리로 파싱되자마자 되기 때문에 다른 관련 파일(이미지 등)을 내려 받은 완료 상태와 상관없이 실행. (이미지와 높이와 너비 같은 속성을 항상 사용할 수 있는 건 아니라는!)

2. window.onload : 모든 도큐먼트를 브라우저로 완전히 내려받은 뒤 발생. 모든 요소에 접근 가능.

가 있습니다.

한 페이지에 여러 스크립트 사용하기

• window.onload = doStuff; 하고 또 window.onload = doStuff2; 하면 처음 줄은 제거됨.
• .onload 속성은 오로지 하나의 함수만 저장 가능
• $(document).ready() : 여기에서 호출해 추가한 함수는 모두 내부의 큐에 추가되어 페이지가 로드될 때 등록된 모든 함수를 순서대로 실행

※ 함수의 참조 vs 호출

• 함수를 핸들러에 할당할 때 괄호는 제외하고 함수 이름만 사용해야 함.
• 괄호가 있으면 함수가 즉각 호출
• 괄호가 없으면 참조만 하고 나중에 이 참조를 통해 사용 가능

.bind() 메서드

• DOM 이벤트에 행위자를 할당하는 역할

• 이러면 click 이벤트에 해당 function 할당ㅋ

이벤트 핸들러 컨텍스트

• 이벤트 핸들러가 실행되는 동안 사용할 수 있는 키워드 this
• 핸들러가 연결된 DOM 요소를 가리킴!!
• $() 함수가 DOM 요소를 인자로 받을 수 있다는 사실 -> $(this)를 사용하여 핸들러 연결된 DOM 요소에 이벤트 추가ㅋ

• 기존 코드와 같은 작업을 수행하면서 좀 더 효과적인 방식으로 수행되게 코드를 개선하는 것을 의미
• 리팩토링 잘하고 싶다 ㅎㅎㅎ

• bind()와 같은 기능을 하면서도 짧게 기술!
• .bind('click',function() { ... }); = .click(function() { ... } );
• 그 외 : blur, change, dbclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, resize, scroll, select .... 등등ㅋ

부모나 조상 요소를 선택하고자 할 때, 위로 혹은 아래로, 모든 DOM 트리 전체를 쉽게 검색할 수 있는 DOM 순회 메서드!

▶ .filter() 메서드 : 인자로 함수(function)를 지정할 수 있는 강력한 메서드!

예로 모든 외부 링크에 클래스 추가하려고 할 때..

href 속성 값이 도메인 네임을 포함하고, 링크된 도메인 네임과 일치하지 않을 때 addClass()!

▶ 특정 셀 선택하기

jQuery 객체가 감싸고 있는 DOM 요소에 직접 접근하고자 할 경우!

$('#element').get(0).tagName : jQuery 객체가 참조하고 있는 첫 번째 DOM 요소에 접근. 아이디가 element인 요소의 태그 이름 알아오기

= $('#element')[0].tagName : 간단한 표기법

jQuery의 가장 강력한 특징 중 하나는 DOM 요소를 쉽게 선택할 수 있는 능력입니다.

다양한 선택자와 메서드로부터 얻는 결과는 항상 jQuery 객체입니다.

▶ $() 함수

CSS에서 사용할 수 있는 표현이라면 무엇이든 문자열 형태로 $() 함수에 넘겨주면 해당 요소에 jQuery 메서드를 적용할 수 있습니다.

$(달러표시)는 jQuery의 줄인 표현입니다.

선택자의 세 가지 구성요소는 다음과 같습니다.

$() 함수를 사용하면 요소의 집합에 접근하기 위해 직접 for 반복문을 사용할 필요가 없습니다.

▶ CSS 선택자

$('#selected-plays > li').addClass 등등 ........ : 최상위 항목에만 추가할 수 있게 자식 콤비네이터(>)를 사용. 자식요소 중에서 li를 찾음!

$('#selectd-play li : not(.horizontal') : horizontal 클래스를 가지고 있지 않은 #select-play의 자손 li 선택!

▶ 속성 선택자

 속성 선택자는 정규 표현식과 유사한 문법 지원합니다.

1. ^=a : a로 시작하는

2. $=b : b로 끝나는

3. *=c : c를 포함하는

▶ 사용자 정의 선택자 (성능이 굉장히 중요할 때는 자주 이용하지 않는 편이 좋습니당!)

CSS의 의사 클래스 구문처럼 선택자의 구문은 콜론(")으로 시작합니다.

1. :eq(n) : n+1 번째 (n은 0부터 시작하기 때문!)

2. :odd, :even : 홀수, 짝수

3. :nth-child(n) : n번째 (1부터 시작하는 유일한 jQuery 선택자!)

4. :contains(text) : text를 포함하는

▶ 폼 선택자

위치 기반 요소 검색에 한정되어 있지 않고, 폼 선택자로 원하는 요소만 간단하게 뽑아낼 수 있습니다.

1. :input : 입력, 텍스트영역, 셀렉트, 버튼 요소

2. :button : 버튼 요소와 type 속성이 button인 input 요소

3. enabled : 활성화된 폼 요소

4. disabled : 비활성화된 폼 요소

5. :checked : 선택된 라디오 버튼 혹은 체크박스

6. :selected : 선택된 옵션 요소

오늘부터 jQuery를 제대로! 공부해보려고 해요.

마침 jQuery 온라인 스터디가 있길래 함께 참여하면서 제 블로그에도 같이 포스팅하도록 할게요.

그럼 jQuery를 정복하는 그 때를 위하여 화이팅!ㅎㅎㅎ

jQuery의 개념 대부분은 HTML 구조와 CSS(Cascading Style Sheets)로부터 나왔습니다.

1. 도큐먼트 요소에 접근 : 선택자 메커니즘을 이용하여 문서 객체 모델(DOM) 트리에 접근할 수 있습니다.
2. 페이지의 스타일 변경 : 페이지가 렌더링 된 이후에도 CSS 스타일을 따로 변경할 수 있습니다.
3. 도큐먼트 내용 변경 : 도큐먼트 내용 자체도 변경할 수 있습니다.
4. 페이지와 사용자 간 상호작용 처리 : 사용자 링크 클릭 등을 포함한 다양한 이벤트를 가로채 처리하는 방식으로 이벤트 핸들러를 추가할 수 있습니다.
5. 도큐먼트의 변화를 표시하는 애니메이션 추가 : 페이드(fade), 와이프(wipe)와 같은 시각적인 효과를 제공합니다.
6. 페이지를 새로고침하지 않고 서버에서 정보 가져오기 : Ajax 기능을 제공합니다.
7. 일반적인 자바스크립트 작업을 단순화

1. CSS 지식을 최대한 활용 : CSS 선택자 사용
2. 확장 지원 : 피처 크리프를 피하기 위해 플러그인으로 사용
3. 브라우저의 차이로부터 해방 : 추상화된 레이어를 제공함
4. 언제나 집합으로 작업 : 묵시적 반복 기법
5. 여러 동작을 한 줄에 작성 : 객체에 대한 메서드가 객체 자신을 반환값으로 반환함으로써 다시 새로운 동작을 해당 객체에 적용할 수 있게 해줌
6. 매우 작은 크기의 패키지
7. 모든 사람에게 무료로 제공

- 공식 jQuery 웹사이트(http://jquery.com/)에서 JS파일을 다운로드하여 HTML 도큐먼트에서 <script> 요소로 jQuery 파일을 포함하기만 하면됩니다.

- 혹은 자체 콘텐트 전송 네트워크(CDN)으로도 이용할 수 있습니다.

- 다른 스크립트를 로드하기 전에 jQuery 라이브러리를 로드해야합니다.

▶ CSS Class 변경하기

• $() 함수를 호출하면 jQuery 객체 인스턴스를 반환합니다.
• $(document).ready() 함수를 사용하여, DOM이 로드되는 즉시 함수를 호출합니다.
• 위의 예제는 익명함수(람다함수)로, 익명함수 기능은 메서드가 함수를 인자로 받지만 이 함수를 다시 사용하지 않을 때 편리하게 사용할 수 있습니다.

• 보통 값을 확인하기 위하여 alert() 함수를 사용했지만, 이 함수의 대안으로 console.log()를 사용할 수 있습니다.
• colsole.log() 메서드에 어떤 종류의 표현식도 넣을 수 있으며, 크롬에서는 F12를 눌러 Colsole 항목에서 값을 확인할 수 있습니다.