목록TIL/2022 TIL (88)
도영스 공간

🍄 이벤트 전파 브라우저에서 요소에 대한 event가 발생하면 해당 요소에 할당된 handler가 동작하게 됩니다. handler가 동작하면서 Bubbling과 Capturing이 발생하게 됩니다. 🍄 버블링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 상위 요소로 event가 전파되는 것을 의미합니다. 🌱 HTML요소는 트리 형식으로 랜딩페이지에서 가 최상위 요소가 됩니다. 🌱 그 밑으로 자식 요소들이 있게 됩니다. 🌱 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 뜻합니다. 캡처링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 하위 요소로 event가 전파되는 것을 의미합니다. 🌱 즉, 이벤트가 발생한 element부터 자식들에게 순차적으로 이벤..

🍄 브라우저가 렌더링 되는 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다. 2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다. 3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다. 4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다. 5. 화면에 HTML요소를 페인팅한다. STEP 1. 요청과 응답 👉 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다. 브라우저에 있는 주소창이 그 역할을 한다. 주소창에 URL을 입력하고 엔터..

🍄 프로토타입의 이해 자바스크립트는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 객체를 참조하는 prototype 속성과 객체 멤버인 proto속성이 참조하는 숨은 링크가 있습니다. 🍄 상속, 프로토타입 prototype 👩💻 콘솔창에 있는👉__proto__ 이것을 프로토타입이라고 한다. 👩💻 proto 는 생성된 객체(new) 또는 json 객체에 존재한다. 👩💻 즉, 상위 객체를 나타내는 속성이다..

오눌은 항해 99를 수료하는날이다 ~! 3월초에는 이날이 올까싶었지만, 놀랍게도 엄청 금방와버렸다 ! 🍄 항해를 통해 얻은 것들.. 96일동안 많은 것을 배웠다. 항해99를 통해 어떻게 구글링하는지 ..를 나 스스로 깨닫고, 강의에 의존한 공부법이 아닌 자기주도적인 공부방법을 익힐 수 있었던 시간인 것 같다 !!! 무엇보다도 좋은 동료들을 얻은 것 같다 !!!!!! 🥹 짜짠..나의 누적시간..ㅎㅎ 밤을 샌적은 ,,두 세번 정도지만 그 당시엔 밤을 샐 정도로 몰입했고, 그만큼 프로젝트를 완성하고 싶었다. 항해99를 통해 많은 프로젝트를 했었는데, 포기하지 않고 매번 제출을 잘했었다. ㅎ_ㅎ 내가 이렇게 몰두해서 공부를 할 수 있는 사람이었다는 사실을 알게 해줬다. 월화수목금토 아침9시부터 저녁9시 ㅎㅎ 맨..