자바스크립트 4

[Javascript] Promise(프라미스)

Promise 객체란 무엇인가 Promise : 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드(producing code)가 준비되었을 때, 함수가 결과를 사용할 수 있도록 해주는 역할. 비동기 처리를 하기 위한 자바스크립트의 방식 중 하나로 콜백 패턴이 가진 단점을 보완한다. let promise = new Promise(function(resolve, reject){ //executor(실행자, 실행함수) }); new Promise 에 전달되는 함수는 executor(실행자, 실행함수)이다. executor는 new Promise 가 만들어질 때 자동으로 실행됨. 결과를 최종적으로 만들어내는 제작 코드를 포함한다. executor executor는 보통 시간이 걸리는 일을 수..

TIL 2022.07.31

돔(DOM) - 2탄

6. DOM 조작 DOM manipulation : 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것 6-1. innerHTML Element.prototype.innderHTML : 요소 노드의 HTML 마크업을 취득하거나 변경한다. 요소 노드 콘텐츠의 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환 📍참고📍 textContent는 HTML 마크업을 무시하고 텍스트만 반환 **BUT!** innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로를 반환 단점 : ① 크로스 사이트 스크립팅 공격 문제 ② 고비용. 비효율 → 그대로 있어야 할 요소들까지 전부 삭제하고 다시 새로운 자식 노드를 생성해서 반영해야 하기 때문 ③ 위치를 지정할 수 없다. 기존 요소를 ..

TIL 2022.07.18

돔(DOM) 1탄

HTML : 브라우저가 이해할 수 있는 언어로 문서가 어떤 의미를 지니고 어떤 구조로 이루어져있는지를 나타내는 것 (백지) CSS :시각적인 요소를 추가하기 위한 언어(물감) 💡 HTML, CSS 연결하는 방법? Inline Style Style tag Link 를 통한 input Javascript : 웹페이지를 동적으로 만들어주기 위한 언어 프로그래밍의 논리적 특성을 이용해서 동적으로 구현한다. HTML과 연결하는 방법? : script tag / .js 외부링크 import What is DOM? 👉HTML, JS를 연결하기 위한 중간다리 역할 👉웹 페이지에 접근해서 요소를 생성, 내용 추가, 클래스 부여 등등을 할 수 있다. Document Object Model 문서(html)를 객체화 시킨 모..

TIL 2022.07.18

함수 scope와 변수의 종류(var, let, const)

함수 스코프 Scope : 범위, 유효공간, 유효 범위 함수 스코프 : 함수에 의해서 생기는 범위. 변수의 유효범위. 블록 스코프 : Block Scope : 블락에 의해 생기는 유효범위 { }에 의해서 변수의 유효범위가 결정된다. 변수 선언 방식 종류 var, let, const ✔ 예제 1번 { let a = 10; { let a = 20; console.log(a) //20 } console.log(a) //10 } console.log(a) //reference error ✔ 예제 2번 function hasValue(p) { console.log(v) //undefined if (p) { //truthy var v = 'blue'; console.log(v); //blue } el..

TIL 2022.07.18