본문 바로가기

Web

 (32)
jQuery에서 dom 생성 후 script 조작하는 방식 $(document).ready먼저 $(document).ready는 제이쿼리의 문법에서 문서가 준비되면 해당 코드를 실행시켜 달라는 의미이다.하나의 html에서 document.ready 코드가 여러 개일 때 $(document).ready(function () {}); $(function() { ... }); // 축약형이때 여러 번 선언해도, 각각 독립적으로 큐에 쌓이고, 문서가 준비되면 순차적으로 실행된다.만약 제이쿼리를 사용하지 않을 경우 아래의 코드로 비슷한 로직을 구현할 수 있다. document.addEventListener('DOMContentLoaded', function() { ... });document.ready의 코드 처리 순서먼저 html 문서가 파싱되는 동안 s..
display 속성 border 속성 출처https://www.youtube.com/watch?v=O04E9WPFEWM&list=PLFeNz2ojQZjuRTQGNUf6ZTz8-YRLgFFvZ&index=6블록 레벨 요소 vs 인라인 요소블록 레벨 요소자기가 속한 영역의 너비를 모두 차지하여 블록을 형성ex) div, p, h1 등인라인 요소자기에게 필요한 만큼의 공간만 차지ex. span, a 등그렇다면 인라인 요소가 블록, 즉 본인 외의 할당 영역을 갖도록 하려면?→ display 속성 사용display 속성display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의한다.display의 속성값display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.속성값 의미inline인라인으로 처리한다block블록 레벨로 처리한..
[22장] this 객체의 동작을 나타내는 메서드는 자신이 속한 객체의 상태. 즉, 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다.객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.하지만 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않으며 바람직하지도 않다.생성자 함수 방식으로 인스턴스를 생성하는 경우를 생각해보자.생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다.따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 ..
[21장] 빌트인 객체 자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체따라서 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다.ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다.호스트 객체브라우저 환경에서는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등)를 호스트 객체로 제공하고, Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 제공한다.ECMAScript 사양에 정의되어 있진 않지만..
[19장] 프로토 타입 프로토타입 객체프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)을 제공한다.리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입생성자 함수에 의해 생성된 인스턴스는 프로토타입의 constructor 프로퍼티에 의해 생성자 함수와 연결된다.이때 constructor 프로퍼티가 가리키는 생성자 함수는 인스턴스를 생성한 생성자 함수다.리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하다,.따라서 리터럴 표기법에 의해 생성된 객체도 가상적인 생성자 함수를 갖는다.프로토타입은 생성자 함수와 더불어 생성되며 prototype.constructor 프로퍼티에 의해 연결되어 있기 때문이다.다시 말해, 프로토타입과 생성자 함수는 단독으로 존재할 수..
[18장] 함수와 일급 객체 일급 객체를 만족하는 조건무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체이다.함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다.객체는 값이므로 함수는 값과 동일하게 취급할 수 있다.일급 객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환 값으로 사용할 수 있다는 것이다.이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나다.함수는 객체이지만 일반 객체와는 차이가 있다. 일반 객체는 호출할 수 없지만 함수 객체는 호출할..
[15장] let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수의 문제점변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언이 가능하다.초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시된다. 이때 에러는 발생하지 않는다.만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다.함수 레벨 스코프var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.변수 호이스팅var 키워드로 선언한 변수는 호이스팅되고 선언문 이전에 참조가 가..
[14장] 전역 변수의 문제점 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보자.변수의 생명 주기지역 변수의 생명주기변수는 자신이 선언된 위치에서 생성되고 소멸한다.전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.하지만 지역 변수가 함수보다 오래 생존해있는 경우가 있다.누군가 메모리 공간을 참조하고 있으면 해제되지 않고 확보된 상태로 남아있는 것처럼 누군가 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존하게 된다.따라서 일반적으로 함수가 종료하면 함수가 생성한 스코프도 소멸하지만 누군가가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존하게 된다.(..

티스토리툴바