Lennon FE

https://parkparkpark.tistory.com/51 [JS] 스코프(1) - 전역, 지역 스코프에 대해 이번 포스팅은 자바스크립트에서 중요한 개념인 스코프에 대해 작성해보려 한다. 스코프 = 유효 범위 스코프는 변수 그리고 함수와 관련이 깊다. 함수 내의 매개변수는 함수 내에서만 참조할 수 parkparkpark.tistory.com 스코프 체인 함수는 함수 내에 선언할 수 있어 함수는 중첩되어 있을 수도 있다. 이는 함수의 지역 스코프도 중첩될 수 있다는 것을 의미한다. 즉 스코프는 함수의 중첩에 의해 계층적인 구조를 갖는다. let x = 1; function fun1(){ let y = 2; function fun2(){ let x = 3; } fun2() } 해당 코드에서 스코프를 분..

이번 포스팅은 자바스크립트에서 중요한 개념인 스코프에 대해 작성해보려 한다. 스코프 = 유효 범위 스코프는 변수 그리고 함수와 관련이 깊다. 함수 내의 매개변수는 함수 내에서만 참조할 수 있고, 외부에서는 참조할 수 없다. 모두 알고리즘을 공부하거나 반복문 및 조건문을 공부하면서 스코프 때문에 생긴 오류를 한 번쯤은 봤을 거라 생각한다. 반복문에서의 스코프 for(let i = 0; i < 1; i++){ let num = 0; for(let j = 0; j < 10; j++){ num+=j; } } console.log(num) // 에러 발생 함수에서의 스코프 function add(num1, num2){ console.log(num1, num2); return num1+num2; } add(1,2)..

여러개의 식별자가 하나의 객체를 공유할 수 있다는 것이 무엇을 의미할까? let obj = { name: 'Park' }; let obj2 = obj; // 얕은 복사 obj2.name = 'Lee'; console.log(obj); // name = 'Lee' console.log(obj2); // name = 'Lee' obj2 같은 경우에는 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 이 말은 새롭게 {name = 'Park'} 를 저장하기 위한 메모리를 만들지 않고 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 즉 obj와 obj2는 모두 동일한 객체를 가르키고, 원본 또는 사본 어느 한쪽에서 객체를 변경하면 서로..

단축 평가란 const obj = { name: "Park" // key = name, value = "Park" } 객체는 코드와 같이 키와 값으로 구성되어 있다. 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null이나 undefined이면 타입 에러가 발생한다. 이때 단축평가를 사용하면 에러가 발생하지 않는다. let obj = null; let result = obj.value; // TypeError let obj2 = null let result2 = obj2 && obj2.value; // null 단축 평가는 코드와 같이 논리연산자로 나타낼 수 있다. true && 1 // -> 1이 반환된다. true || 1 // -> true가 반환된다. && 연산자는 첫 번째 피연산자..

https://parkparkpark.tistory.com/47 브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리 브라우저 렌더링 과정 1. 브라우저는 HTML, CSS, JS, IMG등 렌더링에 필요한 리소스를 request하고 서버로부터 response 받는다. 2. 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합해 렌 parkparkpark.tistory.com 자바스크립트 파싱 및 실행 HTML 문서를 파싱한 결과물로서 생성된 DOM은 자바스크립트 코드에서 DOM API를 사용하여 동적으로 조작할 수 있다. HTML, CSS를 한 줄씩 순차적으로 파싱하며 DOM를 생성하다가 자바스크립트 파일을 로드하는 코드 나 태그를 만나면 DOM생성을 일시 중단한다..

브라우저 렌더링 과정 1. 브라우저는 HTML, CSS, JS, IMG등 렌더링에 필요한 리소스를 request하고 서버로부터 response 받는다. 2. 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합해 렌더 트리를 생성한다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고, 변경하면 다시 렌더 트리로 결합된다. 4. 렌더 트리를 기반으로 HTML의 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅한다. 브라우저의 핵심기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 렌더링 하는 것이다. 좀더 깊게 들어가보자. 순수 문자열로..