본문 바로가기

JS 공부20

JS문법종합반 정리 5주차 - DOM, Class, Closure 웹 페이지가 로드되는 과정사용자가 브라우저에 주소를 입력 (= 클라이언트가 서버에 요청)→ 서버로부터 HTML 문서를 수신 (= 서버가 클라이언트에 응답)→ 브라우저가 HTML 파일을 해석(= parsing, rendering)→ DOM tree와 CSSOM tree 구성 후 둘을 묶어서 Render Tree 구성(= 최종 문서 모델을 나타내는 객체의 계층 구조)→ 브라우저 레이아웃 계산 → 페인팅  DOMDocument Object Modeling, HTML파일을 자바스크립트가 해석할 수 있는 객체 형태로 모델링한 것브라우저 환경에 기본적으로 내장된 API(= 시스템과 사용자 간의 중간 인터페이스)DOM Tree의 최상단 node는 항상 documentchildeNodes, parentNode 속성을 .. 2024. 11. 10.
JS문법종합반 정리 4주차 - 콜백함수와 제어권, 동기와 비동기, 비동기작업의 동기적 표현 콜백함수와 제어권 콜백함수란 다른 코드의 인자로 넘겨주는 함수. 이때 콜백함수의 매개변수, 양식, 실행, 호출 시점 등에 대한 모든 제어권은 얘를 인자로 받는 코드가 가짐!! 사용자가 실행시키고 싶을 때 실행할 수 없음!  동기와 비동기 개념동기 synchronous : 현재 실행 중인 코드가 종료돼야만 다음 코드를 실행비동기 asynchronous : 실행  중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감별도의 "요청, 실행 대기, 보류" 등의 기능을 갖는 코드는 모두 비동기적인 코드  비동기 작업의 동기적 표현1. Promise 활용Promise는 처리가 끝나면 알려줘~ 하는 약속임.new 연산자로 호출한 Promise의 콜백함수는 바로 실행됨콜백함수 내부의 resolve(처리 성공) 또는.. 2024. 11. 8.
JS문법종합반 정리 3주차 03 - 콜스택, 실행컨텍스트, VE, LE, 식별자정보, 외부환경정보, 호이스팅, 스코프, this, call(), apply(), bind() 콜 스택후입 선출의 보관 방식인 스택. 실행 컨텍스트를 보관하는 방식// ---- 1번 전역은 늘 먼저 스택var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 3번 inner가 스택됨 console.log(a); // 1}outer(); // ---- 2번 outer가 스택됨console.log(a); // 1코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료실행 컨텍스트코드실행outer() 실행in.. 2024. 11. 7.
JS문법종합반 정리 3주차 02 - 객체 복제, 얕은 복사, 깊은 복사 객체 복제의 문제점 객체를 변수에 직접 할당하는 식으로 통째로 복제하면, 복제된 객체의 프로퍼티를 변경할지라도 불변성 땜시 기존 객체와 복사 객체가 같다고 판단됨. /* 기존 객체 */var user = { name: 'wonjang', gender: 'male',};/* 객체를 복사하고, name 프로퍼티의 값을 바꾸는 함수 */var changeName = function (user, newName) { var newUser = user; newUser.name = newName; return newUser;};/* 복사 객체 생성 */var user2 = changeName(user, 'twojang');/* name의 값이 다름에도 불구하고 두 객체가 같다고 판단 */console.log(user.. 2024. 11. 6.
JS문법종합반 정리 3주차 01 - 메모리, 기본형 데이터, 참조형 데이터 데이터 타입 심화1. 데이터 타입의 큰 종류기본형 : Number, String, Boolean, null, undefined, Symbol 참조형 : Object (Array, Function, Date, RegExp, Map, Set)둘의 구분은 값의 저장방식과 불변성 여부로 함값의 저장방식 (= 복제 방식)기본형 : 값이 담긴 주소값을 바로 복제참조형 : 값이 담긴 주소값들의 묶음의 주소값을 복제불변성 여부기본형 : 불변성 O / 참조형 : 불변성 X 2. 메모리와 데이터에 대한 배경지식2-1) 메모리에는 비트와 바이트비트 : 컴퓨터가 이해할 수 있는 최소 단위 (0과 1의 작은 조각) 바이트 : 비트 8개 묶음, 비트를 일일이 찾기 부담돼서 생김 메모리는 바이트 단위로 구성 (64비트 정수를 저장.. 2024. 11. 6.
JS문법종합반 정리 2주차 - ES6문법, 일급객체로서 함수, Map, Set 구조 분해 할당 Destructuring배열이나 객체의 속성들을 분해해서 각각의 값을 변수에 할당할 수 있게 해줌/* 배열 분해 할당 */let arr = ["1", "2", "3"];let [a, b, c] = arr;console.log(a, b, c); // 반환 : "1" "2" "3"/* 객체 분해 할당 */let obj = { name : "Bob", age : 25 };let {name, age} = obj; console.log(name, age); // 반환 : "Bob" 25객체 분해 할당의 경우 변수명을 key 이름과 일치시켜야 하는데, 만약 변수 이름을 다르게 하고 싶다면 "key : 새이름"과 같이 설정해줄 수 있다/* 이름 바꿔 분해 할당 */let obj = { name : ".. 2024. 11. 5.