From 38d821488bcc274b9ff30026a974e0470cef5727 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Tue, 16 Sep 2025 17:06:50 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Create=20=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part2 1주차 요약 --- .../\354\235\264\352\262\275\355\225\230.md" | 146 ++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 "Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" diff --git "a/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" "b/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" new file mode 100644 index 0000000..0905f0b --- /dev/null +++ "b/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" @@ -0,0 +1,146 @@ +# 1️⃣ 브라우저 이벤트 소개 + +## 자주 사용되는 DOM 이벤트 + +### 마우스 이벤트 + +- click, contextmenu, mouseover & mouseout, mousedown & mouseup, mousemove + +### 폼 요소 이벤트 + +- submit, focus + +### 키보드 이벤트 + +- keydown, keyup + +### 문서 이벤트 + +- DOMContentLoaded + +### CSS 이벤트 + +- transitionend + +## “이벤트는 DOM에만 한정되진 않습니다” +— 비 DOM 이벤트 예시 + +- window 객체 이벤트 + - load + - beforeunload / unload +- 자바스크립트 동작 관련 이벤트 + - Promise 객체의 then이나 catch 같은 콜백 함수 + - WebSocket 통신에서 새로운 메시지가 수신되었을 때 발생하는 이벤트 + +## 이벤트 핸들러 + +- 이벤트가 발생했을 때 실행되는 함수 +(사용자의 행동에 어떻게 반응할지를 자바 스크립트 코드로 표현한 것) +- 복수의 이벤트 핸들러를 할당할 수 없다(기존 핸들러는 덮어씌워짐) +- 할당방법 +1) HTML 속성 +2) DOM 프로퍼티 +3) addEventListener +- 핸들러 제거하고 싶다면 null 할당해주면 됨 +`elem.onclick = null;` + +### HTML 속성 + +- HTML안의 `on` 속성에 핸들러 할당 + + ```jsx + + ``` + + ex) `onclick`, `onmouseover`, `onkeyup`, `onsubmit`, `onchange` … + +- 코드가 길다면, 함수를 만들어 호출하도록 함 +- HTML 속성은 대소문자를 구분하지 않지만, 대개 onclick 같이 소문자로 작성 + +### DOM 프로퍼티(HTML + 자바스크립트) + +- ex) `elem.onclick` +- DOM프로퍼티는 대소문자를 구분함 + +### addEventListener / removeEventListener + +- 핸들러를 여러개 할당/삭제할 수 있는 방법 +- 문법 +`element.addEventListener(이벤트 이름, 핸들러 함수, [options]);` + - `option` — 아래 프로퍼티를 갖는 객체 + `once`: `true`면 이벤트가 트리거 될 때 리스너가 자동으로 삭제됨 + `capture`: 버블링 or 캡쳐링 + `passive`: `true`면 리스너에서 지정한 함수가 `preventDefault()`를 호출하지 않음 +- 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해야함 +- transitionend와 DOMContentLoaded 같은 일부 이벤트는 addEventListener를 써야만 동작 +- 함수 뿐만 아니라 객체를 이벤트 핸들러로 할당할 수 있는데, +이벤트가 발생하면 객체에 구현한 handleEvent 메서드가 호출됨 + +## this로 요소에 접근하기 + +- 핸들러 내부의 `this` 값 = 핸들러가 할당된 요소 +this 를 사용해 ‘요소 자체’를 참조할 수 있음 +- ex) + + ```jsx + + ``` + + - this.innerHTML 에서 this는 button + +## 자주 하는 실수(주의사항) + +1. 함수를 직접 핸들러에 할당할 때, 함수명만 작성해야 함 +`button.onclick = sayThanks;` O +`button.onclick = sayThanks();` X + ( ㄴ 함수 호출의 결괏값이 할당됨 ) +그러나, HTML 속성값에는 괄호 있어야함 +( ㄴ 브라우저는 속성값을 읽고, 속성값을 함수 본문으로 하는 핸들러 함수를 만들기 때문 ) +`` +2. `setAttribute`로 핸들렁 할당하면 안됨 + +## 이벤트 객체 + +- 이벤트가 발생하면 브라우저는 이벤트 객체(event object)를 만듦 +여기에 이벤트에 관한 상세한 정보를 넣은 다음, +핸들러에 인수 형태로 전달 + +### 이벤트 객체 프로퍼티 + +- ex) `.type`, `.currentTarget`, `.clientX` … + +# 2️⃣ 버블링과 캡처링 + +## 버블링 + +- ‘이벤트 버블링’ 이란? +한 요소에 이벤트가 발생할 때, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작 +- 꼭 필요한 경우가 아니라면 버블링을 막지 않아야 한다 + +### event.target + +- 이벤트 가장 안쪽의 요소는 `target` 요소라 불리며, +부모 요소 핸들러가 `event.target`을 사용해 접근할 수 있다. + + cf) event.currentTarget(=this) — 이벤트를 핸들링하는 현재 요소 + + +### 버블링 중단 + +- `event.stopPropagation()`을 사용하면 핸들러가 이벤트를 완전히 처리한 후 버블링을 중단함 +- `event.stopImmediatePropagation()`을 사용하면 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서 핸들러가 모두 동작하지 않음 + +## 캡처링 + +- 버블링과 반대 +이벤트가 하위 요소로 전파되는 단계 +- 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 설정해야 함 + + ```jsx + elem.addEventListener(..., {capture: true}) + //or + elem.addEventListener(..., true) + ``` + + - false(default값) ⇒ 버블링 단계에서 동작 + true ⇒ 캡처링 단계에서 동작 From 8c2a8ae4c35fc5e5f108f79adcf2ccc194233ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Tue, 16 Sep 2025 20:52:49 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Delete=20Part2/01-=EB=B8=8C=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=EC=A0=80=20=EC=9D=B4=EB=B2=A4=ED=8A=B8/=EC=9D=B4?= =?UTF-8?q?=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\352\262\275\355\225\230.md" | 146 ------------------ 1 file changed, 146 deletions(-) delete mode 100644 "Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" diff --git "a/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" "b/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" deleted file mode 100644 index 0905f0b..0000000 --- "a/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" +++ /dev/null @@ -1,146 +0,0 @@ -# 1️⃣ 브라우저 이벤트 소개 - -## 자주 사용되는 DOM 이벤트 - -### 마우스 이벤트 - -- click, contextmenu, mouseover & mouseout, mousedown & mouseup, mousemove - -### 폼 요소 이벤트 - -- submit, focus - -### 키보드 이벤트 - -- keydown, keyup - -### 문서 이벤트 - -- DOMContentLoaded - -### CSS 이벤트 - -- transitionend - -## “이벤트는 DOM에만 한정되진 않습니다” -— 비 DOM 이벤트 예시 - -- window 객체 이벤트 - - load - - beforeunload / unload -- 자바스크립트 동작 관련 이벤트 - - Promise 객체의 then이나 catch 같은 콜백 함수 - - WebSocket 통신에서 새로운 메시지가 수신되었을 때 발생하는 이벤트 - -## 이벤트 핸들러 - -- 이벤트가 발생했을 때 실행되는 함수 -(사용자의 행동에 어떻게 반응할지를 자바 스크립트 코드로 표현한 것) -- 복수의 이벤트 핸들러를 할당할 수 없다(기존 핸들러는 덮어씌워짐) -- 할당방법 -1) HTML 속성 -2) DOM 프로퍼티 -3) addEventListener -- 핸들러 제거하고 싶다면 null 할당해주면 됨 -`elem.onclick = null;` - -### HTML 속성 - -- HTML안의 `on` 속성에 핸들러 할당 - - ```jsx - - ``` - - ex) `onclick`, `onmouseover`, `onkeyup`, `onsubmit`, `onchange` … - -- 코드가 길다면, 함수를 만들어 호출하도록 함 -- HTML 속성은 대소문자를 구분하지 않지만, 대개 onclick 같이 소문자로 작성 - -### DOM 프로퍼티(HTML + 자바스크립트) - -- ex) `elem.onclick` -- DOM프로퍼티는 대소문자를 구분함 - -### addEventListener / removeEventListener - -- 핸들러를 여러개 할당/삭제할 수 있는 방법 -- 문법 -`element.addEventListener(이벤트 이름, 핸들러 함수, [options]);` - - `option` — 아래 프로퍼티를 갖는 객체 - `once`: `true`면 이벤트가 트리거 될 때 리스너가 자동으로 삭제됨 - `capture`: 버블링 or 캡쳐링 - `passive`: `true`면 리스너에서 지정한 함수가 `preventDefault()`를 호출하지 않음 -- 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해야함 -- transitionend와 DOMContentLoaded 같은 일부 이벤트는 addEventListener를 써야만 동작 -- 함수 뿐만 아니라 객체를 이벤트 핸들러로 할당할 수 있는데, -이벤트가 발생하면 객체에 구현한 handleEvent 메서드가 호출됨 - -## this로 요소에 접근하기 - -- 핸들러 내부의 `this` 값 = 핸들러가 할당된 요소 -this 를 사용해 ‘요소 자체’를 참조할 수 있음 -- ex) - - ```jsx - - ``` - - - this.innerHTML 에서 this는 button - -## 자주 하는 실수(주의사항) - -1. 함수를 직접 핸들러에 할당할 때, 함수명만 작성해야 함 -`button.onclick = sayThanks;` O -`button.onclick = sayThanks();` X - ( ㄴ 함수 호출의 결괏값이 할당됨 ) -그러나, HTML 속성값에는 괄호 있어야함 -( ㄴ 브라우저는 속성값을 읽고, 속성값을 함수 본문으로 하는 핸들러 함수를 만들기 때문 ) -`` -2. `setAttribute`로 핸들렁 할당하면 안됨 - -## 이벤트 객체 - -- 이벤트가 발생하면 브라우저는 이벤트 객체(event object)를 만듦 -여기에 이벤트에 관한 상세한 정보를 넣은 다음, -핸들러에 인수 형태로 전달 - -### 이벤트 객체 프로퍼티 - -- ex) `.type`, `.currentTarget`, `.clientX` … - -# 2️⃣ 버블링과 캡처링 - -## 버블링 - -- ‘이벤트 버블링’ 이란? -한 요소에 이벤트가 발생할 때, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작 -- 꼭 필요한 경우가 아니라면 버블링을 막지 않아야 한다 - -### event.target - -- 이벤트 가장 안쪽의 요소는 `target` 요소라 불리며, -부모 요소 핸들러가 `event.target`을 사용해 접근할 수 있다. - - cf) event.currentTarget(=this) — 이벤트를 핸들링하는 현재 요소 - - -### 버블링 중단 - -- `event.stopPropagation()`을 사용하면 핸들러가 이벤트를 완전히 처리한 후 버블링을 중단함 -- `event.stopImmediatePropagation()`을 사용하면 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서 핸들러가 모두 동작하지 않음 - -## 캡처링 - -- 버블링과 반대 -이벤트가 하위 요소로 전파되는 단계 -- 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 설정해야 함 - - ```jsx - elem.addEventListener(..., {capture: true}) - //or - elem.addEventListener(..., true) - ``` - - - false(default값) ⇒ 버블링 단계에서 동작 - true ⇒ 캡처링 단계에서 동작 From 7c2b72ec7c52b98c51d219baf40c17c221d18e16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Tue, 16 Sep 2025 20:53:28 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Create=20=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part2 1주차 요약 --- .../\354\235\264\352\262\275\355\225\230.md" | 146 ++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 "Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" diff --git "a/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" "b/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" new file mode 100644 index 0000000..0905f0b --- /dev/null +++ "b/Part2/01-\353\270\214\353\235\274\354\232\260\354\240\200 \354\235\264\353\262\244\355\212\270/\354\235\264\352\262\275\355\225\230.md" @@ -0,0 +1,146 @@ +# 1️⃣ 브라우저 이벤트 소개 + +## 자주 사용되는 DOM 이벤트 + +### 마우스 이벤트 + +- click, contextmenu, mouseover & mouseout, mousedown & mouseup, mousemove + +### 폼 요소 이벤트 + +- submit, focus + +### 키보드 이벤트 + +- keydown, keyup + +### 문서 이벤트 + +- DOMContentLoaded + +### CSS 이벤트 + +- transitionend + +## “이벤트는 DOM에만 한정되진 않습니다” +— 비 DOM 이벤트 예시 + +- window 객체 이벤트 + - load + - beforeunload / unload +- 자바스크립트 동작 관련 이벤트 + - Promise 객체의 then이나 catch 같은 콜백 함수 + - WebSocket 통신에서 새로운 메시지가 수신되었을 때 발생하는 이벤트 + +## 이벤트 핸들러 + +- 이벤트가 발생했을 때 실행되는 함수 +(사용자의 행동에 어떻게 반응할지를 자바 스크립트 코드로 표현한 것) +- 복수의 이벤트 핸들러를 할당할 수 없다(기존 핸들러는 덮어씌워짐) +- 할당방법 +1) HTML 속성 +2) DOM 프로퍼티 +3) addEventListener +- 핸들러 제거하고 싶다면 null 할당해주면 됨 +`elem.onclick = null;` + +### HTML 속성 + +- HTML안의 `on` 속성에 핸들러 할당 + + ```jsx + + ``` + + ex) `onclick`, `onmouseover`, `onkeyup`, `onsubmit`, `onchange` … + +- 코드가 길다면, 함수를 만들어 호출하도록 함 +- HTML 속성은 대소문자를 구분하지 않지만, 대개 onclick 같이 소문자로 작성 + +### DOM 프로퍼티(HTML + 자바스크립트) + +- ex) `elem.onclick` +- DOM프로퍼티는 대소문자를 구분함 + +### addEventListener / removeEventListener + +- 핸들러를 여러개 할당/삭제할 수 있는 방법 +- 문법 +`element.addEventListener(이벤트 이름, 핸들러 함수, [options]);` + - `option` — 아래 프로퍼티를 갖는 객체 + `once`: `true`면 이벤트가 트리거 될 때 리스너가 자동으로 삭제됨 + `capture`: 버블링 or 캡쳐링 + `passive`: `true`면 리스너에서 지정한 함수가 `preventDefault()`를 호출하지 않음 +- 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해야함 +- transitionend와 DOMContentLoaded 같은 일부 이벤트는 addEventListener를 써야만 동작 +- 함수 뿐만 아니라 객체를 이벤트 핸들러로 할당할 수 있는데, +이벤트가 발생하면 객체에 구현한 handleEvent 메서드가 호출됨 + +## this로 요소에 접근하기 + +- 핸들러 내부의 `this` 값 = 핸들러가 할당된 요소 +this 를 사용해 ‘요소 자체’를 참조할 수 있음 +- ex) + + ```jsx + + ``` + + - this.innerHTML 에서 this는 button + +## 자주 하는 실수(주의사항) + +1. 함수를 직접 핸들러에 할당할 때, 함수명만 작성해야 함 +`button.onclick = sayThanks;` O +`button.onclick = sayThanks();` X + ( ㄴ 함수 호출의 결괏값이 할당됨 ) +그러나, HTML 속성값에는 괄호 있어야함 +( ㄴ 브라우저는 속성값을 읽고, 속성값을 함수 본문으로 하는 핸들러 함수를 만들기 때문 ) +`` +2. `setAttribute`로 핸들렁 할당하면 안됨 + +## 이벤트 객체 + +- 이벤트가 발생하면 브라우저는 이벤트 객체(event object)를 만듦 +여기에 이벤트에 관한 상세한 정보를 넣은 다음, +핸들러에 인수 형태로 전달 + +### 이벤트 객체 프로퍼티 + +- ex) `.type`, `.currentTarget`, `.clientX` … + +# 2️⃣ 버블링과 캡처링 + +## 버블링 + +- ‘이벤트 버블링’ 이란? +한 요소에 이벤트가 발생할 때, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작 +- 꼭 필요한 경우가 아니라면 버블링을 막지 않아야 한다 + +### event.target + +- 이벤트 가장 안쪽의 요소는 `target` 요소라 불리며, +부모 요소 핸들러가 `event.target`을 사용해 접근할 수 있다. + + cf) event.currentTarget(=this) — 이벤트를 핸들링하는 현재 요소 + + +### 버블링 중단 + +- `event.stopPropagation()`을 사용하면 핸들러가 이벤트를 완전히 처리한 후 버블링을 중단함 +- `event.stopImmediatePropagation()`을 사용하면 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서 핸들러가 모두 동작하지 않음 + +## 캡처링 + +- 버블링과 반대 +이벤트가 하위 요소로 전파되는 단계 +- 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 설정해야 함 + + ```jsx + elem.addEventListener(..., {capture: true}) + //or + elem.addEventListener(..., true) + ``` + + - false(default값) ⇒ 버블링 단계에서 동작 + true ⇒ 캡처링 단계에서 동작 From 0633b3e92bc49cbf86a7270637c5df7d49818e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Wed, 24 Sep 2025 16:47:51 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Create=20=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part2-2주차 모듈 요약 --- "\354\235\264\352\262\275\355\225\230.md" | 111 ++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 "\354\235\264\352\262\275\355\225\230.md" diff --git "a/\354\235\264\352\262\275\355\225\230.md" "b/\354\235\264\352\262\275\355\225\230.md" new file mode 100644 index 0000000..ab2ce40 --- /dev/null +++ "b/\354\235\264\352\262\275\355\225\230.md" @@ -0,0 +1,111 @@ +# 1️⃣ 모듈 + +- 모듈이란, 분리된 파일 하나하나를 말한다. +대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨 +- export와 import 지시자를 적용하면 다른 모듈을 불러오고 호출하는 기능 공유가 가능해짐 +- 브라우저에서 동작 시킬 땐,