본문 바로가기

전체 글178

JS 웹 페이지 렌더링 과정 웹 페이지 렌더링 웹 브라우저의 기본적인 구조 랜더링 단계 1. 파싱 ( 철근 세우기 단계 ) HTML 을 파싱하여 DOM 으로 변환합니다. 오타 혹은 잘못된 문법을 사용했을 경우 예외처리를 합니다. 와 같은 태그를 만나면 리소스를 다운로드 합니다. 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석합니다. 2. 스타일 계산 ( 시멘트 채우기 단계 ) CSS 을 파싱하여 CSSOM 으로 변환합니다. CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정합니다. 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능합니다 3.레이아웃 ( 내부 설비 단계 ) 레이아웃 트리(렌더 트리) 를 생성합니다. 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생.. 2023. 3. 14.
JS BOM (Browser Object Model) BOM (Browser Object Model) 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델 대표적인 객체 종류 1. window 객체 Global Context (전역 공간)이자 브라우저 창을 나타내는 객체 입니다. 전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동하 게 됩니다. 중요 프로퍼티 - innerWidth, innerHeight, screenX, screenY, scrollBy( ), scrollTo( ) 등등 2. screen 객체 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체입니다. 중요 프로퍼티 - availHeight, availWidth, width, height, orientation 3. location 객체 사용자가 보고 있는 페이지의 URL을 다루는 .. 2023. 3. 14.
JS hoisting 호이스팅 함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려집니다. 이런 현상을 호이스팅이라고 합니다. 알고가야하는 내용 함수에는 두 가지 리터럴 형태가 존재한다. 1. 함수 선언 함수 선언은 function 키워드 뒤로 함수 의 이름을 적어서 사용합니다. function test() { return "test" } 2. 함수 표현식 함수 표현식은 function 키워드 뒤로 이름을 적지 않고 사용합니다. 이름이 없기 때문에 익명 함수라고 부르기도 합니다. var testValue = function() { return "testValue" } 변수 관련내용 선언한 변수의 값 까지 끌어올려지지는 않고 선언만 끌어올려짐 console.log(testValue); //undefi.. 2023. 3. 13.
JS 클래스 클래스 이전의 생성자를 이용 한 타입 생성과 클래스는 정확히 그 결과가 일치한다. 기존의 자바스크립트의 타입 생성 방법을 다른 언어와 비슷하도록 보기 쉽게 문법을 개선한 것이 자바스크립트 클래스이다. 익플에서 적용 안됨 ※ 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가 신텍스(Syntactic sugar)라고 한다 기본 모양새 생성자 부분 constructor 함수 안에서 생성하고 속성을 바로 선언 function 키워드없이 메서드 이름으로 바로 생성 class User { constructor(name) { this.name = name; } sayName() { console.log(this); console.log(this.name); } } var me = new User(.. 2023. 3. 13.
JS 프로토타입 상속 & subtype, supertype 효율적인 객체 설계 재사용성과 효율적인 관리를 위한 객체 설계가 필요하다. 알고가야 하는 내용 자바스크립트에서는 상속받는 타입을 하위 타입(subtype), 상속하는 타입을 상위 타입(supertype) 이라고 부릅니다 생성자 함수에서의 this 는 그 생성자 함수의 인스턴스를 의미한다 1. 생성자 훔치기 call 이나 apply 를 이용하여 인스턴스를 인수로 전달하고 프로퍼티를 상속받는 방법을 생성자 훔치기라고 합니다 // 기본 소시지 레시피 function Sausage(el1, el2) { this.inside1 = el1; this.inside2 = el2; } function FireSausage(el1, el2, el3) { Sausage.call(this, el1, el2); this.ins.. 2023. 3. 13.
JS 프로토타입 프로토타입 prototype 자바스크립트에서 생성자는 prototype 프로퍼티를 통해 타입의 특징을 정의합니다. (ex : 붕어빵 틀) 효율적인 생성자 정의 인스턴스를 생성할 때마다 같은 내용의 별개의 함수가 계속 만들어진다면 효율적이지 못한 과정이라 볼 수 있다. 기본적인 모양새 각 인스턴스마다 같은 내용의 별개의 메서드가 계속 만들어진다 function Food(name) { this.name = name; this.smell = function () { console.log(this.name + " 냄새가 난다"); } } 향상된 버전 공통된 메서드를 정의해 사용 // 공통된 smell 메서드를 정의해 사용 function smell() { console.log(this.name + " 냄새가 난.. 2023. 3. 13.
JS 생성자 생성자 생성자란 앞에 new 연산자가 붙은 함수를 의미하며 동일한 프로퍼티와 메소드를 가진 다수의 인스턴스를 만들 수 있습니다. new Object(), new Array() 등등 자바스크립트의 내부적으로 존재하는 내장 생성자 및 직접 새로운 타입을 만들 수도 있습니다. function MyOwn() { } var myObj = new MyOwn(); console.log(myObj instanceof MyOwn); // true console.log(myObj.constructor === MyOwn); // true new 연산자의 역활 new 연산자가 붙으면 함수의 this 는 인스턴스를 참조하게 되며, new 연산자가 자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요 없어지게 .. 2023. 3. 13.
JS closure 함수 closure 내부 함수가 살아있는 상태에서 외부 함수가 파괴 되면 외부 함수의 변수들에 대한 접근 권한은 내부 함수만 가지게 되고 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 closure 입니다. var person = (function () { var age = 15; return { name: "wade", getAge: function () { console.log(age); return age; }, setAge: function (val) { age = val; console.log(age); } } })(); person.getAge(); // 15 person.setAge(20); // 20 person.age = 30; // 적용 되지 않음 person.getAge(); // 1.. 2023. 3. 13.
JS this 개념 및 활용 this가 존재하는 이유 함수를 호출하는 객체를 의미하며 다른 객체에서도 사용성을 늘릴 수 있다. 기본적인 사용 예 function menuGlobal() { console.log("오늘 저녁은 " + this.name); } var myDiner = { name: "김치찌개", menu: menuGlobal } myDiner.menu(); // "오늘 저녁은 김치찌개" var yourDiner = { name: "된장찌개", menu: menuGlobal } yourDiner.menu(); // "오늘 저녁은 된장찌개" this 제어 call() 사용 call 메서드는 this 의 값을 바꿀 수도 있고, 함수를 실행할 때 사용할 인수도 전달할 수 있습니다. function menuGlobal(item).. 2023. 3. 3.
JS 타입 이해 원시 타입 있는 그대로 저장되는 데이터를 표현합니다 원시값을 변수에 할당하면 값이 복사되어 들어갑니다. 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 됩니다 불리언 : true, false 숫자 : 1, 2, 3 … 문자열 : “Hello World” null undefined ※ typeof : 원시값의 종류를 알 수 있게 해주는 매서드이고 null 은 특이하게 object 명시됨 참조 타입 참조 타입은 변수에 값을 직접 저장하지 않습니다.변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 “포인터” 입니다. 무엇이 저장되느냐, 이것이 원시 타입과 참조 타입의 가장 큰 차이입니다. ※ 원시 타입 빼고 전부 참조 타입으로 봐도 무방 객체 : { } 배열 : [ ] 함수 : .. 2023. 3. 3.
배열의 index 와 key 의 관계 공식 문서 중 발췌 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. react 는 바뀐 document 를 비교해서 랜더링할때 변경내용을 적용한다. 반복해서 생성한 엘리먼트가 있다면 구분이 힘들기 때문에 구분을 위해 Key 를 사용해 구분해준다 이때 Key 값으로 배열의 인덱스로 적용 할 경우 배열의 길이가 변경될 때 배열의 인덱스는 변경되므로 Key 값으로 쓰는데 문제가 있다. 공식 문서에서 참고하라고 하는 블로그에서는 되도록 배열에서 고유한 값(ex: id) 을 활용하는 것을 추천하고 있다 ※ 고유한 값을 만들어 쓰는 라이브러리도 추천했다. 예외적으로 아래 3가지의 내용에.. 2023. 2. 28.
js 코딩 테스트 : [ 택배 배달과 수거하기 ] 문제 : 택배 배달과 수거하기 LV.2 문제 설명 당신은 일렬로 나열된 n개의 집에 택배를 배달하려 합니다. 배달할 물건은 모두 크기가 같은 재활용 택배 상자에 담아 배달하며, 배달을 다니면서 빈 재활용 택배 상자들을 수거하려 합니다. 배달할 택배들은 모두 재활용 택배 상자에 담겨서 물류창고에 보관되어 있고, i번째 집은 물류창고에서 거리 i만큼 떨어져 있습니다. 또한 i번째 집은 j번째 집과 거리 j - i만큼 떨어져 있습니다. (1 ≤ i ≤ j ≤ n) 트럭에는 재활용 택배 상자를 최대 cap개 실을 수 있습니다. 트럭은 배달할 재활용 택배 상자들을 실어 물류창고에서 출발해 각 집에 배달하면서, 빈 재활용 택배 상자들을 수거해 물류창고에 내립니다. 각 집마다 배달할 재활용 택배 상자의 개수와 수거할.. 2023. 2. 23.

티스토리툴바