꿈꾸는 개발자

버블링(bubbling) 정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 위 사진에서 태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다. 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X Event.target event.targe로 이번트가 발생한 target요소에 접근 가능! event.target vs thi..

공통: 얕은 복사든 깊은 복사든 생성된 객체는 기존과 다른 별개의 객체이다! 복사에 대한 정의: 여기에서 복사란, 원시값처럼 새로운 값을 복사한다는 의미로 복사되지 않았다는 것은 곧 참조값이 넘어갔다는 의미로, 상호간의 영향을 줌을 의미한다. 얕은 복사(Shallow Copy): 객체에 중첩되어 있는 객체의 경우 참조값을 복사한다 객체 트리의 노드의 최말단을 복사하지 않는 방식 (따라서, 중첩 객체의 참조값을 복사한다고 한다!) const original = { num: 3, age: 24, arr: ["a", "b", "c"], }; const clone1 = { ...original }; //참고 spread문법은 iterable한 객체만 사용할 수 있다 original.num = 4; console..

생활코딩 영상 참고 await에 대한 이해: 그림에 나온 것처럼, 좌측에 있는 promise-then() 형식의 코드를 오른쪽처럼 단순화하기 위해서는 각 promise함수에 await란 keyword을 붙여야 한다=> 추가로, await은 function() 내에 사용돼야 하며, await을 포함하고 있는 function은 async란 keyword를 앞에 추가해야 한다! run()함수를 호출하면 왼쪽과 오른쪽 코드는 완전히 똑같은 동작을 하게 된다! await/async를 사용하지 않은 코드: function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } con..

생활코딩 영상 참고-(1)-then(),catch(),: -fetch api를 사용한다(Ajax에 대한 추가적인 내용의 학습이 필요해 보인다!) 해당 사이트의 post에 각각의 글들을 json이란 데이터 타입으로 만든? url을 획득하는 것이다? 아무튼 url을 통해 서버에 통신하는 것처럼 json 데이터를 fetch할 수 있음! https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1...

-codding apple 영상 참고: function first(parameter) { console.log("1"); parameter(); } function second() { console.log("2"); } first(second); //callback함수는 동기일 수도 비동기일 수도 있다=> //callback함수를 사용하는 이유: 함수를 순차적으로 실행하기 위해서 사용을 한다! //다른 사람이 작성한 코드를 가져와(여기에서는 first()) 그 다음 바로 내가 원하는 코드를 작성할 때 //이 경우 function second => callback함수를 실행하면 된다! //위처럼 callback을 중복하다 보면 이제 callback hell이 발생하게 된다=>이럴 때는 promise로 해결..

추가로 학습해야 할 내용들: anonnymous 함수에 대한 내용! call/bind/apply()에 따른 this의 변환을 조사해라! promise의 정적 메소드들 추가 분석하기 (ex Promise.allSettled()); this에 관한 내용! (화살표 함수의 this는 무조건 부모 값을 받아오는 것이다!) const obj = { name: "hoin", sayName() { console.log(this.name); const inner = () => { console.log(this.name); }; inner(); }, }; 위와 같은 경우에는 inner함수 즉 화살표 함수의 경우 내부 this 부모에 binding되어 sayName()과 마찬가지로 부모의 this를 지칭하게 된다! 하지만..