본문 바로가기

Front-End: Web/JavaScript

 (97)
당신의 클릭은 어디까지 닿을까? 자바스크립트 <이벤트 흐름> 이야기 이벤트 흐름은 연어와 같다!브라우저가 사용자의 입력을 받았을 때 어떤 일이 일어날까요?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()); //..
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의 메서드는 다른 곳을 참조하고..
'new'만 붙이면 끝? 생성자 함수부터 클래스까지 제대로 이해하기 생성자=객체 공장장아래를 통해 더 자세하게 알아보자. new 연산자와 함수생성자란, 앞에 new 연산자가 붙은 함수를 의미하며인스턴스를 만들 수 있습니다.예를 들어서, new Object(), new Array()는 자바스크립트의 내부적으로 존재하는 내장 생성자입니다. 예제 코드var myArray = new Array(1,2,3);console.log(myArray); // [1, 2, 3]Array함수에 new를 붙였더니, 새로운 배열을 생성해서 myArray 배열이 참조하고 있습니다. 이와 마찬가지로 사용자가 직접 새로운 타입을 만들 수도 있습니다.funtion MyOwn(){}// 생성자 함수var myObj = new MyOwn();// 인스턴스 생성자보통 함수 이름을 대문자로 시작해..
반응형

티스토리툴바