HTML, Javascript, CSS(8)
-
문서 객체 모델(DOM, Document Object Model)
- 문서 객체 모델(DOM)이란? 웹 페이지(HTML or XML)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당 W3C의 표준 객체 모델 DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조 => HTML DOM, 혹은 HTML DOM Tree로 부르기도 함 트리 자료 구조로 구축이 되기 때문에 HTML 문서는 최종적으로 하나의 최상위 노드(root node)에서 시작해 자식 노드들을 가지며, 아래로만 뻗어..
2023.05.17 -
[JavaScript] async, await
- await 비동기적인 함수를 동기적으로 실행시킬때 사용 async가 적용된 함수 안에서만 사용 가능 await은 프로미스에 사용 ex) await getName('Mike'); 위 코드는 getName 프로미스가 처리될 때까지 기다림 - async 평범한 함수를 Promise를 리턴하는 비동기적인 함수로 만들어줌 => 함수에 await 또 사용 가능 - async와 await으로 Promise 코드 간단화 async function run(){ await timer(1000) console.log('작업1') await timer(1000) console.log('작업2') await timer(1000) console.log('작업3') } run(); async, await을 사용하면 Promis..
2023.03.21 -
[JavaScript] Promise
- 정의 자바스크립트 비동기 처리에 사용되는 객체 비동기 작업이 성공하거나 실패했을 때 성공 or 실패를 반환 보통 비동기적 함수의 리턴값으로 사용됨 - 생성 const pr = new Promise((resolve, reject) => { // code }); resolve는 성공, reject는 실패했을 때 실행되는 콜백함수(어떤 일이 완료되었을 때 실행되는 함수) new Promise로 만든 프로미스 객체는 state와 result를 프로퍼티로 가짐 ㅇ 초기상태 state : pending(대기) result : undefined ㅇ resolve(value) (성공) state : fulfiilled(이행됨) result: value ㅇ reject(error) (실패) state : reject..
2023.03.21 -
[JavaScript] 나머지 매개변수(Rest Parameters)
- 나머지 매개변수란 매개변수의 개수가 정해지지 않았을 때, 나머지 매개변수를 사용하면 전달받은 매개변수 개수만큼 배열에 담아 반환해줌(전달받은 매개변수들이 담긴 배열) 나머지 매개변수는 배열의 내장 메서드 사용 가능(forEach, reduce 등) 매개변수로 아무것도 전달하지 않으면 undefined가 아닌 빈 배열을 반환해줌 - 사용 함수 정의 시 매개변수 이름 앞에 ...을 붙여서 사용 ex) function Test(...rest){ .... } - 사용 상황 매개변수로 전달받은 모든 수를 더해야 할 때와 같이 매개변수 수가 변할 때 사용 생성자 함수에서도 사용하면 유용
2023.03.21 -
클로저(Closure)
- 정의 함수와 Lexical 환경의 조합(자신이 선언될 당시의 환경을 기억하는 함수) 함수가 생성될 당시의 외부 변수를 기억(참조할 수 있는 상위 Lexical의 외부 변수를 기억) 외부 함수의 실행이 끝나서 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는것(외부 함수 실행 종료 후에도 클로저 함수는 외부함수의 Lexical 환경에 접근 가능) 함수가 호출되는 환경과는 별개로 기존에 선언되어있던 환경(Lexical 환경)을 기준으로 변수를 조회함 - 사용 함수를 리턴하는 함수에서 사용됨 리턴하는 함수(내부 함수)에 의해서만 외부 함수 변수에 접근할 수 있음
2023.03.20 -
어휘적 환경(Lexical Environment)
- 전역 Lexical 환경 코드 실행 시 변수와 함수들이 올라가는 환경 - 내부 Lexical 환경 함수 실행 시 함수의 매개변수, 함수 내의 지역 변수와 내부 함수들이 올라가는 환경 어떠한 함수 실행 시 그 함수에 대한 내부 Lexical 환경이 생성됨 내부 Lexical 환경은 호출된 상위의 Lexical 환경을 참조함 = 현재 Lexical 환경에 없는 변수를 참조하려고 하면 상위의 Lexical 환경을 찾아보고, 거기도 없으면 더 위로 올라가며 전역 Lexical 환경까지 찾아보며 참조 - JavaScript에서 코드 실행 시 선언한 변수와 함수들이 Lexical 환경에 먼저 올라감(호이스팅) 이 때 let으로 선언된 변수는 초기화가 되지 않은 채로 올라가기 때문에 선언 전에 사용이 불가능 하지..
2023.03.20