본문 바로가기

전체 글

 (463)
당신의 클릭은 어디까지 닿을까? 자바스크립트 <이벤트 흐름> 이야기 이벤트 흐름은 연어와 같다!브라우저가 사용자의 입력을 받았을 때 어떤 일이 일어날까요?1. 브라우저 화면에서 이벤트가 발생합니다.이때 브라우저 관점에서의 이벤트란,마우스 클릭 뿐만 아니라, 마우스 휠의 움직임, 마우스 포인터의 이동, 화면을 터치하는 등모든 종류의 사용자 제스처를 말합니다.2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾는 일입니다.이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해렌더링 과정 중인 하나인 페인트 기록을 찾아봅니다.3. 캡처링 단계페인트 기록을 통해 좌표를 알아낸 브라우저는해당 좌표에 위치한 요소의 이벤트 리스너를 실행합니다.이 과정을 캡처링 단계(capturing phases)라고 합니다.이때 타겟 요소의 가장 최상의 window 객체로부터 캡..
브라우저는 어떻게 웹페이지를 그릴까? <브라우저 렌더링> 웹 브라우저의 기본적인 구조사용자 인터페이스브라우저 주소창, 탭, 북마크 바 등 웹 콘텐츠 영역 외 브라우저 UI를 구성하는 부분입니다.브라우저 엔진사용자 명령을 해석하고, 렌더링 엔진과 통신합니다.즉, 사용자 인터페이스와 렌더링 엔진의 중개 역할을 하는 것이지요.렌더링 엔진HTML, CSS를 해석하여 홤현에 그리는 역할을 합니다.통신렌더링 엔진은 HTML을 파싱하며, , 예제 hello world 2. 스타일 계산CSS을 파싱하여 CSSOM으로 변환합니다.CSS 또한 DOM과 같이 파싱하여 트리 구조로 변환합니다. 이것을 CSSOM이라 합니다.CSSOM 정보를 통해 DOM Node에 대한 스타일을 결정하여 스타일 상속이 결정됩니다.👉 CSSOM 생성 → Computed..
자바스크립트는 왜 웹에서 빠질 수 없을까?: <BOM>과 <DOM> 자바스크립트, 왜 쓸까?자바스크립트는 인터프리터 언어이므로,C, JAVA에 비해 훨씬 느립니다.그렇다고 자바스크립트가 Python처럼 연산에 특화된 강력한 함수들을 가지고 있는 것도 아닙니다.뭔가 특별할 게 없는 언어인데, 왜 지금 프론트엔드 개발자들은 자바스크립트를 배워야만 할까요?서버를 구축할 때,JAVA, 자바스크립트, Ruby, Python 등으로 가능합니다.하지만 만약 우리가 웹 브라우저를 컨트롤하고 싶을 땐, 자바스크립트 밖에 없습니다.이렇게 웹 브라우저를 컨트롤할 수 있는 요소들이 바로 BOM, DOM, Node입니다. (+) 자바스크립트의 강점자바스크립트는 빠르거나 강력한 연산 능력 때문에 사용하는건 아닙니다.✔️ 브라우저 유일 스크립트 언어로써의 독점성 → 웹을 위한 유일무이한 선택지✔️..
<호이스팅>이 뭘까? 함수/변수 선언이 끌어올려지는 이유 호이스팅(hoisting)함수의 두 가지 리터럴 형태1. 함수 선언함수 선언은 function 키워드 뒤로 함수의 이름을 적어서 사용합니다.function test() { return "test";} 2. 함수 표현식함수 표현식은 function 키워드 뒤로 이름을 적지 않고, 변수에 함수를 집어 넣어 사용합니다.이름이 없기 때문에 익명 함수라고 부르기도 합니다.var testValue = function() { return "testValue";} 함수 선언은 코드를 실행할 때 함수를 포함하는 스코프 최상단으로 끌어올려진다아래 코드에서 test()와 testValue는 둘 다 잘 작동할까요?console.log(test()); // testconsole.log(testValue()); //..
☁️ 구름톤 in JEJU 14기 회고: '놀래?!' 팀의 4일간의 여정 시작하기에 앞서2025년 7월 8일(화)부터 7월 11일(금)까지 3박 4일간 진행한 구름톤 14기에 참여한 후기를 남기려 한다.저번 DND 해커톤 회고는 2주나 지나고 나서야 작성하였는데, 시간이 지날 수록 기억이 흐릿해지고 정리하는데 오히려 더 많은 시간이 걸리더라. 그래서 앞으로는 행사 직후에 바로 회고를 작성하는 습관을 들여야겠다고 결심했다.그래서 이번에는 해커톤이 끝난 다음날인 오늘, 부족했던 잠을 푹 자고 어느 정도 회복을 한 후에 최대한 빨리 작성하여 후기를 정리하게 되었다.나는 이번 구름톤 14기에 ‘놀래?!’ 팀의 프론트엔드 개발자로 참여했다. 비록 수상은 못했지만, 그보다 더 값진 배움과 인연, 그리고 스스로 성장을 할 수 있었던 시간이었다.이 글에서는 해당 해커톤의 전반적인 진행 과정..
ES6 클래스와 상속 쉽게 이해하기 class코드 예시class User { constructor(name){ this.name = name; } sayName() { console.log(this.name); }}var me = new User("nno3onn");me.sayName(); // nno3onnUser에는 name이라는 프로퍼티가 있고, sayName이라는 메서드가 있습니다.sayName은 함수인데 function 키워드가 없습니다.클래스를 만드는 이유 역시 인스턴스를 만들기 위해서 입니다.생성자에서 인스턴스를 만드는 방법과 동일합니다. 이 코드를 클래스 대신 이전 방식으로 만든다면?function UserOld(name){ this.name = name;}UserOld.p..
new 키워드 이후의 세계: JS 상속 구조 이해하기 이전 이야기가 뭐였나면..이제 프로토타입 공정 도입으로 더 효율적으로 객체를 생산하게 되었습니다.우리가 생산하는 객체는 바로 마늘 소시지입니다.그런데, 이제 똑같은 소시지만 생산하다보니 예전보다 덜 팔리게 되어서불맛나는 소시지를 만들고 싶습니다. 어떻게 하면 될까요? 코드 예시- 마늘맛 소시지function Sausage(el1, el2) { this.inside1 = el1; this.inside2 = el2;}Sausage.prototype.taste = function() { return this.inside1 + "와 "+ this.inside2 + " 맛이 난다!";}var mySausage = new Sausage("돼지고기", "마늘");console.log(mySausage..
생성자 함수의 진화: 프로토타입으로 효율적인 객체 생성하기 프로토타입저번 시간과 이어서...생성자 함수를 통해 잘 나가는 공장장이 된 우리!하지만 넘쳐나는 쓰레기로 인해,이제는 양보다 질이 우선시되는 다품종 소량 생산 시대가 되었습니다.이제 좀 더 효율적인 객체 생산방식이 필요합니다.앞서 만든 생성자 함수를 살펴봅시다.function Food(taste) { this.name = name; this.smell = function() { console.log(this.name + "냄새가 난다"); }}var food1 = new Food("치즈 파스타");var food2 = new Food("토마토 파스타");console.log(food1.smell === food2.smell); // falsefood1과 food2의 메서드는 다른 곳을 참조하고..
반응형

티스토리툴바