티스토리

경적필패

검색하기

블로그 홈

경적필패

kjs-dev.tistory.com/m

경적필패의 개발일지

구독자: 4

방명록 방문하기

주요 글 목록

[YDKJ] Objects & Classes - Object Foundations 요약 Chapter 1: Object Foundations JS의 모든 것은 객체이다. => 이 것은 가장 만연하고 잘못된 사실 중 하나임!!!! 이 장에서는 객체로 시작하여, 프로토타입, this, 클래스를 위주로 알아볼 것. Objects As Containers 여러 값을 단일 컨테이너에 모으는 일반적인 방법 중 하나는 객체를 사용하는 것. ex myObj = { } Defining Properties 객체 리터럴 중괄호 안에는 name:value쌍으로 정의함 myObj = { favoriteNumber: 42, isDeveloper: true, firstName: "Kyle" }; 위처럼 리터럴 값을 할당할 수도 있고, 표현식을 할당할 수도 있음. function twenty() { return .. 공감수 0 댓글수 1 2023. 9. 3.
[YDKJ] Scope & Closures - Appendix A: Exploring Further 요약 이 부분은 본문에서 다룬 주제들에 대한 다양한 세부사항과 변칙적인 접근 방식을 탐구할 것. 이 부분은 다양한 주제와 장황한 내용을 포함하므로 여유롭게 읽을 것. Implied Scopes 때때로 스코프는 명확하지 않은 위치에서 생성됨. => 이러한 스코프가 프로그램 작동에 큰 영향을 미치진 않지만, 그들을 알고 있는 것은 유용하다. Parameter Scope // outer/global scope: RED(1) function getStudentName(studentID) { // function scope: BLUE(2) // .. } 이 프로그램에서 스코프는 2가지가 됨. // outer/global scope: RED(1) function getStudentName(/*BLUE(2)*/ st.. 공감수 0 댓글수 0 2023. 6. 13.
[YDKJ] Scope & Closures - The Module Pattern 요약 이 챕터에서는 코드 구성 패턴 중 하나인 모듈을 탐구할 것임. Encapsulation and Least Exposure (POLE)pole:최소노출원칙 캡슐화의 목표는 공통된 목적을 제공하는 데이터와 함수를 함께 묶어 배치하는 것. 비슷한 프로그램 조각을 함께 그룹화하는 것. 세부정보의 접근을 제한하는 것. 이러한 과정 속에서 코드의 조직성이 향상됨.=>유지보수 굿, 과도한 노출 방지. 이것이 js프로그램을 모듈로 구성하는 것에 대한 이점 중 일부임. What Is a Module? 모듈은 관련된 데이터와 함수의 모음. 또한 상태를 가지고 있고, 시간이 지남에 따라 정보를 유지하고 업데이트함 Namespaces (Stateless Grouping) // namespace, not module va.. 공감수 0 댓글수 1 2023. 6. 5.
[YDKJ] Scope & Closures - Using Closures 요약 이번 장에서는 클로저에 대해 다룰 것임. 이전 챕터에서 말했던대로, 클로저는 POLE원칙에 기반한 것임. POLE => 변수접근을 최대한 어렵게!!(블록스코핑) => 코드이해 쉬움, 유지보수 쉬움, 스코프 충돌 피하기 쉬움 See the Closure 클로저는 함수인 경우에만 작동 내부 함수가 외부 범위의 변수에 대한 참조를 만드는 것이 클로저 Pointed Closure 화살표 함수도 스코프 버블을 생성함 => 화살표 함수도 클로저에 참여!! Adding Up Closures 클로저에 인용되는 전형적인 예시 function adder(num1) { return function addTo(num2){ return num1 + num2; }; } var add10To = adder(10); var a.. 공감수 0 댓글수 0 2023. 5. 29.
[YDKJ] Scope & Closures - Limiting Scope Exposure 요약 이번 장에서는, 변수를 조직하기 위해 왜 다양한 스코프를 이용해야 되는지 알아본다. Least Exposure POLE(Principle of Least Privilege) => 최소권한 원칙 시스템의 구성요소가 최소한의 권한, 최소한의 접근권한, 최소한의 노출로 동작되도록 설계되어야 함을 나타냄. 그럴수록 하나의 구성요소의 결함 또는 실패가 전체 시스템에 미치는 영향이 적어짐 => 그래서 블록을 사용하여 스코프를 써야 한다!! 왜 전역에 모든 변수를 배치하면 안 좋을까? 1. 이름충돌 프로그램의 다른 부분에서 이름이 충돌남! 2. 예상치 못한 작동 private한 함수를 사용하여 개인정보가 노출될 수 있음 3. 의도하지 않은 의존성 어떤 코드가 숫자배열에 의존하고 있고, 나중에 이 숫자배열을 손봐.. 공감수 0 댓글수 0 2023. 5. 27.
[YDKJ] Scope & Closures - The (Not So) Secret Lifecycle of Variables 요약 지금까지는 전역 스코프에서 하위 스코프로 이어지는 중첩된 스코프에 대해 주로 알아봤음. => 스코프체인 그러나 변수가 어디 스코프에서 왔는지 아는 것은 아주 작은 부분일 뿐. 이번에는 스코프 안에서 문 이후에 변수 선언이 나온다면 어떻게 참조할까? 같은 스코프에 변수가 중복 선언된다면?? When Can I Use a Variable? greeting(); // Hello! function greeting() { console.log("Hello!"); } 이 코드가 작동하는 이유는 뭘까? 변수 선언을 스코프의 시작 부분부터 볼 수 있는 게 호이스팅임. 함수선언은 호이스팅이 될 때, 값 참조까지 자동으로 초기화되기 때문에 위 코드가 작동하는 것. let과 const도 호이스팅이 일어나지만, var과.. 공감수 0 댓글수 0 2023. 5. 22.
[YDKJ] Scope & Closures - Around the Global Scope 요약 Chapter 4: Around the Global Scope 챕터3 에서는 전역 스코프를 주로 언급했으나, 왜 전역 스코프를 사용하면 안되는지, 언제 유용한지에 대해 언급하지 않았음 챕터4에서는 이를 중점으로 볼 것. Why Global Scope? 대부분의 애플리케이션은 여러개의 개별 js파일로 구성되는 것이 일반적임 => 그렇다면 js엔진은 어떻게 이러한 분리된 파일을 하나의 런타임 컨텍스트로 관리할까? 브라우저에서 실행되는 어플리케이션의 경우 크게 3가지가 있음. 1. es모듈을 직접 사용한다면, JS환경에서 각 모듈이 개별적으로 로드 됨. 그 후, 각 모듈이 필요한 모듈이 있을 때, 참조로 가져옴.(공유된 스코프 없이 import를 통해 협력) 2. 빌드 프로세스에서 번들러를 사용한다면, .. 공감수 0 댓글수 0 2023. 5. 18.
[YDKJ] Scope & Closures - The Scope Chain 요약 Chapter 3: The Scope Chain 중첩된 스코프에서 연결된 스코프들을 스코프 체인이라고함. 체인은 방향성을 가지며 상위/외부 방향으로 탐색을 함. "Lookup" Is (Mostly) Conceptual 일반적으로 변수가 어떤 스코프에서 비롯되었는지는 초기 컴파일링 과정에서 결정됨. 런타임동안에 스코프가 변경되진 않음 => 그러나 런타임때 결정 될 수는 있음.(현재 프로그램에는 선언 안되어 있는데 다른 프로그램 전역 스코프에 있을 때) 챕터2에서는 엔진이 계속해서 스코프체인을 탐색하는 것처럼 말했지만, 사실 이미 정보가 알려져있어서 탐색안함. Shadowing 쉐도잉 => 가리는 것을 의미. var studentName = "Suzy"; function printStudent(stud.. 공감수 0 댓글수 1 2023. 5. 9.
[YDKJ] Scope & Closures - Illustrating Lexical Scope 요약 Chapter 2: Illustrating Lexical Scope 챕터1에서는 스코프가 어떻게 코드 컴파일중에 결정되는지 알아보았다. 이 모델을 렉시컬 스코프라 칭하였음. 이번 장에서는 다양한 방식으로 스코프를 설명하고 프로그램을 더 정확하게 이해할 수 있도록 하는 것이 목표다. Marbles, and Buckets, and Bubbles... Oh My! // outer/global scope: RED var students = [ { id: 14, name: "Kyle" }, { id: 73, name: "Suzy" }, { id: 112, name: "Frank" }, { id: 6, name: "Sarah" } ]; function getStudentName(studentID) { // f.. 공감수 0 댓글수 0 2023. 5. 8.
[YDKJ] Scope & Closures - What's the Scope? 요약 Chapter 1: What's the Scope? JS에서 변수를 구성하고 관리하는 매커니즘을 설명하기 위해서는 스코프에 대한 이해가 필요하다. 이 책에서는 scope가 작동하는 방식, 유용성, 피해야 할 함정을 살펴볼 것. Compiled vs. Interpreted 컴파일은 일반적으로 소스 코드가 한번에 변환되어 나중에 실행될 수 있는 파일로 저장됨. 인터프리터는 컴파일러와 유사하게 프로그램을 기계가 이해할 수 있는 명령어로 변환함. 그러나 처리모델은 다르고 소스코드가 한 줄씩 변환됨. Compiling Code 스코프는 주로 컴파일 중에 결정 됨. 따라서 컴파일과 실행을 이해하는 것이 스코프와 큰 관련이 있다. 컴파일러 이론에서 프로그램은 세가지 기본 단계로 처리됨. 1. Tokenizing.. 공감수 0 댓글수 0 2023. 5. 2.
[YDKJ] Get Started - Appendix B 요약 Practicing Comparisons scheduleMeeting(..) 함수는 시작 시간 (24 시간 형식의 문자열 "hh:mm")과 미팅 기간 (분 단위)을 받습니다. dayStart 및 dayEnd에서 지정된 시간에 따라 미팅이 전적으로 업무 일정 내에 있는 경우 true를 반환하고 업무 일정 범위를 위반하는 경우 false를 반환합니다. 내코드 const dayStart = "07:30"; const dayEnd = " 17:45"; const [sh, sm] = dayStart.split(":"); const [eh, em] = dayEnd.split(":"); let startSum = parseInt(sh) * 60 + parseInt(sm); let endSum = parseInt.. 공감수 0 댓글수 0 2023. 4. 30.
[YDKJ] Get Started - Appendix A 요약 Values vs. References JS에서 원시값은 값복사, 객체는 주소 복사 ! So Many Function Forms 익명함수 vs 이름 있는 함수 => 익명함수는 이름을 추론한다. var awesomeFunction = function(coolThings) { // .. return amazingStuff; }; awesomeFunction.name; // "awesomeFunction" // let awesomeFunction = .. // const awesomeFunction = .. var awesomeFunction = function someName(coolThings) { // .. return amazingStuff; }; awesomeFunction.name; // "s.. 공감수 0 댓글수 0 2023. 4. 27.
[YDKJ] Get Started - Chapter 4 - 1 요약 Chapter 4: The Bigger Picture 이번 4장에서는 JS언어의 구성을 세가지 주요 기둥으로 나눌것이다. 부록에 있는 연습을 건너뛰지 마라!! Pillar 1: Scope and Closure 변수를 스코프단위로 구성하는 것은 모든 언어에서 가장 기초적인 특성 JS는 호이스팅 때문에, 선언된 모든 변수는 스코프의 시작부분에서 선언된 것처럼 처리됨. let/const는 TDZ를 통해 실제로 사용할 수 없는 구간을 만듬. 함수가 외부 스코프의 변수를 참조하고, 스코프 변수에 대한 엑세스를 유지하는 것. => 클로저 자세한건 다음 책에서... Pillar 2: Prototypes 객체를 사용하는 유일한 방법은 클래스가 아니다. Pillar 3: Types and Coercion JS의 값.. 공감수 0 댓글수 0 2023. 4. 26.
[YDKJ] Get Started - Chapter 3 - 1 요약 Iteration 반복적인 데이터를 처리하기 위해 사용하는 패턴 iterator 자료구조를 가지고 있음. 값과, next(), done으로 이루어져있음 => done은 값이 마지막인지 확인하는 true/false 대표적으로 for...of가 있음. Iterables 이터레이터 소비 프로토콜은 이터러블에서 이터레이터 인스턴스를 만들어 소비함. es6에서 문자열, 배열, 맵, 셋등등을 이터러블로 정의함. 대부분의 경우 JS의 이터러블은 keys(), values(), entries()를 제공함. 즉, 이터레이터 인스턴스를 반환하면 이터러블(iterable) 이터레이터 결과값을 반환하면(value, done) 이터레이터(iterator) Closure 함수가 다른 스코프에서 실행될때에도 함수가 외부스코프.. 공감수 0 댓글수 0 2023. 4. 26.
[YDKJ] Get Started - Chapter 2 - 2(完) 요약 How We Organize in JS JS생태계에서 널리 사용되는 코드 구성패턴은 클래스와 모듈 Classes 클래스는 데이터와 해당 데이터를 조작하는 동작을 정의함. 클래스를 사용하려면 new 키워드로 인스턴스화해야 함. 클래스를 사용하지 않더라도 코드를 구성할 수 있지만, 구성이 어렵고 읽기 및 이해가 어려워짐 Class Inheritance 상속받은 메서드와 재정의된 메서드가 동일한 이름으로 공존할 수 있는 사실은 다형성(Polymorphism)이라고 함. class Publication { constructor(title,author,pubDate) { this.title = title; this.author = author; this.pubDate = pubDate; } print() {.. 공감수 0 댓글수 0 2023. 4. 23.
[YDKJ] Get Started - Chapter 2 - 1 요약 Each File is a Program 각각의 js파일은 개별적인 프로그램이며, 이 것들이 상호작용하여 하나의 프로그램처럼 보이는 것. 여러 독립된 js파일이 하나의 프로그램으로 동작하는 방법은 global scope뿐. 많은 프로젝트가 개별파일들을 하나의 파일로 결합하여 전달하는 빌드프로세스를 사용함. 이 경우는 단일 파일이 전체 프로그램이 맞음. Values JS에서 값은 기본값(원시값)과 객체 둘로 나뉨 `${NAME}` 백틱을 사용한 보간법 설명 null과 undefined 중 더 안전하고 확실한 방법은 undefined이며, 사용할 때는 둘 중에 하나로 통일하는 게 좋음 Symbol은 특수한 키를 만드는 데 사용함. => 일반적인 프로그램에선 쓸 일 거의 없음, 프레임워크나 라이브러리 같.. 공감수 0 댓글수 0 2023. 4. 22.
[YDKJ] Get Started - Chapter 1 - 2(完) 요약 Jumpong the Gaps JS는 과거의 호환성을 중요시한다고 했다. ES2019를 2016 엔진에서 실행한다면 충돌날 가능성이 높다. => 이러한 갭을 줄이기 위해서 나온 게 BABLE임. BABLE은 ES2019코드를 2016 엔진에서도 돌아가는 문법으로 변환해줌. Filling the Gpas 최신 JS와 옛날엔진의 간극을 매우는 방법은 2가지, Transpilation과 polyfilling임 트랜스파일링은 => 바벨과 같은 도구 사용하기. polyfilling은 그냥 코드로 새로운 기능 구현해 주기. JS가 계속 발전하기 때문에 이 간극은 계속해서 존재할 것임. 두 기술을 항상 채택해야 함. What is Interpretation? JS는 다음과정을 통해 컴파일된다. 개발자에디터에서 .. 공감수 0 댓글수 0 2023. 4. 21.
[YDKJ] Get Started - Chapter 1 - 1 요약 About This Book 이번 Get Started는 더 깊이 있는 JS학습을 위해 준비하는 과정 JS자체가 목표가 아니라 journey이다. => 계속해서 새로운 것을 배울 수 있다는 얘기인 듯..? What's with that name? Java와 Javascript의 이름이 비슷한 이유는 마케팅의 산물. JS가 나올 때 자바 프로그래머를 겨냥했기 때문이다 자바를 소유하고 있는 Oracle은 Javascript에 대한 상표도 소유하고 있음(효력은 없지만..) => 따라서 Javascript보다는 JS라고 말하는 것을 권장! Oracle이 소유하고 있는 상표와 거리를 두기 위해 공식적인 이름은 ECMAScript임 => 따라서 JS or ES20XX라 부르자. Language Specific.. 공감수 0 댓글수 0 2023. 4. 20.
[YDKJ] Get Started - preface 요약 Preface 1판에 추가내용을 넣었다. 그리고 js를 처음 접한다면 이 책이 어려울 것. Parts js의 안 좋은 부분은 피하고 좋은 부분을 위주로 사용하라는 책은 버려라. js의 모든 부분은 유용하다. Title 제목을 YDKJ로 지은 이유는.... 대부분의 JS개발자가 자신의 코드가 어떻게 동작하는지 모르기 때문이다. => 그러나 JS를 완전히 이해하는 것은 불가능하다. 추구해야 하는 방향일 뿐. Mission 코드의 결과물은 중요하지 않다. 왜 그렇게 동작하는지가 중요하다. YDKJ의 목표는 JS개발자들이 자신의 코드를 소유하고 완전히 이해하는 것. Paths 이 책을 빠르게 자신의 것으로 습득하려 하지 마라. 여러 프로젝트를 동시에 진행하며 천천히 읽고, 다시 읽어야 본인의 것이 될 것... 공감수 0 댓글수 0 2023. 4. 20.
[YDKJ] Get Started - foreword 요약 Microsoft에 다니는 시니어 프로그래머가 이 책을 보고 남긴 얘기... 책제목이 너는 js를 모른다여서 처음에 화났지만, 이 책을 읽을수록 자신이 js를 모름을 깨달았다고 하심.. ㅋㅋ 저자가 시대적인 대세에 크게 영향을 받지 않아서 근본적인 진실에 도달할 수 있게끔 해주어 큰 도움이 되셨다함. => 무슨 얘기인지 100% 이해하진 못했음 ㅋㅋ 이 책이 get Started이지만 가치가 있으므로, 이 책을 읽고 넘어가면 좋겠다고 하심. 이 책을 통해 얻은 견고한 기초는 어떤 프레임워크보다 좋은 성과를 가져올 것이라 얘기하면서 끝남. 느낀점 음.... 딱히 느낀점은 없었다. ms에 다니는 시니어가 칭찬을 많이 해놓아서 기대감이 올라간 정도..? 공감수 0 댓글수 0 2023. 4. 19.
js challenge 30 Whack A Mole! Code 배운 점 & 느낀 점 js challenge 마지막 과제였습니다. 두더지게임 만들기였습니다. 크게5가지 함수가 필요했는데, 1. 게임시간 정하는 정하는 함수 2. 랜덤으로 두더지 나오게 하는 함수 3. 랜덤으로 나올 두더지 정하는 함수 4. 게임 시작 함수 5. 유저가 두더지 클릭했을 때 점수 올리는 함수. 공감수 0 댓글수 0 2023. 3. 7.
task scheduler로 자동 git push 하기 깃 자동화 한 이유 1일 1커밋할 때 어쩔 수 없이 커밋 할 수 없는 날이 있습니다. 이런날 유용하게 사용할 수 있습니다. 저는 windows를 기준으로 설명하겠습니다. 0. 시작 => 작업 스케쥴러 => 작업 만들기 1. 이름 마음대로 작성하시고 2. 트리거 탭으로가서 원하는 시간을 설정합니다. 3. 그 다음 동작탭으로가서 스크립트 파일을 등록합니다. 4. 저는 다음과 같은 스크립트 파일을 하나 만들었습니다. (commit.sh) cd D:/mygithub/programmers git add . git commit -m"test" git push origin master 5. 그러면 원하는 시간에 스크립트 동작하여 git push가 됩니다 ! 공감수 0 댓글수 0 2023. 3. 7.
js challenge day 29 Timer Code let countdown; const timerDisplay = document.querySelector(".display__time-left"); const endTime = document.querySelector(".display__end-time"); const buttons = document.querySelectorAll("[data-time]"); const timer = (seconds) => { clearInterval(countdown); const now = Date.now(); const then = now + seconds * 1000; displayTimeLeft(seconds); displayEndTime(then); countdown = setInterva.. 공감수 0 댓글수 0 2023. 3. 6.
[프로그래머스] 연속 펄스 부분 수열 문제 어떤 수열의 연속 부분 수열에 같은 길이의 펄스 수열을 각 원소끼리 곱하여 연속 펄스 부분 수열을 만들려 합니다. 펄스 수열이란 [1, -1, 1, -1 …] 또는 [-1, 1, -1, 1 …] 과 같이 1 또는 -1로 시작하면서 1과 -1이 번갈아 나오는 수열입니다. 예를 들어 수열 [2, 3, -6, 1, 3, -1, 2, 4]의 연속 부분 수열 [3, -6, 1]에 펄스 수열 [1, -1, 1]을 곱하면 연속 펄스 부분수열은 [3, 6, 1]이 됩니다. 또 다른 예시로 연속 부분 수열 [3, -1, 2, 4]에 펄스 수열 [-1, 1, -1, 1]을 곱하면 연속 펄스 부분수열은 [-3, -1, -2, 4]이 됩니다. 정수 수열 sequence가 매개변수로 주어질 때, 연속 펄스 부분 수열의 합.. 공감수 0 댓글수 0 2023. 3. 6.
js challenge day 28 Video Speed Scrubber Code 배운 점 & 느낀 점 동영상에서 바를 이용해서 동영상 속도를 조절하는 과제였습니다. 바의 크기를 이용하여 위치정보를 알아낸 다음, 클릭으로 0.4배속에서 4.0배속까지 동영상 속도를 조절할 수 있었습니다. 언젠간 이용할 가치가 있을 것 같다는 생각이 듭니다. 공감수 0 댓글수 0 2023. 3. 3.
js challenge day 27 Click and Drag Code 배운 점 & 느낀 점 이 과제는 가로로 스클롤링 하는 이벤트를 다루는 것이었습니다. mousedown, mouseleave, mouseup, mousemove의 차이점에 대해서 알아야 했는데, mousedown => 요소를 클릭했을 때 mouseleave => 마우스가 요소를 떠날 때 mouseup => 요소를 클릭한 후 땔 때 mousemove => 요소위에서 마우스를 움직 일 때 이를 활용해서 마우스를 클릭했을때, isDown으로 상태를 관리한 다음에, isDown이 true일때 mousemove를 하면 가로로 스크롤링할 수 있게 하였습니다. 공감수 0 댓글수 0 2023. 3. 1.
js challenge day 26 Follow Along Nav Code 배운 점 & 느낀 점 특정 블록에 마우스를 올리면 다른 블록을 띄워주는 간단한 과제였습니다. 공감수 0 댓글수 0 2023. 2. 28.
HTTPS 적용기 (...SSL/TLS) 공부 동기 요즘 어디 웹 사이트를 가나 HTTPS를 적용하지 않은 웹을 보기가 힘들어, 저도 HTTPS를 프로젝트에 적용하면서 좀 더 공부해보았습니다. HTTPS는 HTTP프로토콜과 SSL/TLS의 조합입니다. HTTPS 탄생 배경 인터넷상에서 데이터를 전송하는 방식 중에서 가장 일반적인 방법은 HTTP방식입니다. HTTP방식을 이용해 클라이언트와 서버간의 통신이 이루어지게 되는데, HTTP는 통신에서 데이터를 암호화하지 않기 때문에 제 3자에게 데이터가 노출될 가능성이 있습니다. ex)스니핑, Sniffing 이러한 위험성으로부터 데이터를 보호하기 위해서 HTTPS가 탄생하였습니다. TLS vs SSL HTTPS의 핵심기술인 TLS와 SSL은 모두 데이터 보안을 제공하기 위한 프로토콜입니다. SSL은 .. 공감수 0 댓글수 0 2023. 2. 27.
[web] react 새로고침 시 404 Error 어디서? 로컬환경에서는 문제없었지만, 배포 이후, 새로고침 하면 404 Error가 발생했습니다. 이러한 에러를 connect-history-api-fallback이라고 칭하기도 합니다. 왜? 로컬환경에서 실행할 때는 npm start로 시작하기 때문에 react - router가 정상적으로 작동하게 됩니다. 물론, 배포 환경에서도 react-router는 정상적으로 작동하지만, 유저가 직접 url을 입력하거나, 새로고침하는 경우 서버에 해당 요청에 대한 파일을 요구하게 됩니다. 저는 index.html밖에 없기 때문에 404에러가 발생했던 것입니다 해결법 저는 nginx를 이용하여 문제를 해결하였습니다. server{ root /home/ec2-user/cppp/front/build; location .. 공감수 0 댓글수 0 2023. 2. 27.
js challenge day 25 Event Capture, Propagation, Bubbling and Once Code 배운 점 & 느낀 점 이벤트 캡처링, 이벤트 버블링, 이벤트 위임에 대해서 다시 한번 복습하는 시간을 가졌습니다. once라는 옵션은 처음 봤는데, 해당 이벤트를 한번 발생시키고 싶을 때 쓰는 옵션이었습니다. once 옵션을 쓰니까 좀 더 이해가 잘되었던 것 같습니다. 이벤트 캡처링은 이벤트가 발생한 요소로 들어가는 과정, 이벤트 버블링은 이벤트가 발생한 요소에서 빠져나가는 과정 캡처링은 default가 false이기 때문에, 캡처링 과정에서 이벤트를 발생 시키고 싶으면 설정을 해줘야합니다. 이벤트위임은, 모든 노드에 이벤트를 저장하지않고 부모요소에 이벤트를 저장하여 버블링을 이용하는 패턴 입니다. 공감수 0 댓글수 0 2023. 2. 27.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.