Front-end (37) 썸네일형 리스트형 [JavaScript] 스타일과 클래스 요소에 스타일을 적용할 수 있는 방법은 두 가지가 있다. CSS에 클래스를 만들고, 요소에 처럼 클래스 추가하기 처럼 프로퍼티를 style에 바로 써주기 자바스크립트를 사용하면 클래스와 style 프로퍼티 둘 다를 수정할 수 있다. 두 방법 중 하나를 택하라면 style보다 css 클래스를 수정해야 한다. style은 클래스를 다룰 수 없을 때만 사용해야 한다. style은 아래와 같이 자바스크립트를 사용해 요소의 좌표를 동적으로 계산하고, 계산한 좌표를 설정해주고자 할 때 사용하면 좋다. let top = /* 복잡한 계산식 */; let left = /* 복잡한 계산식 */; elem.style.left = left; // 예시: '123px', 런타임으로 좌표를 계산할 수 있습니다. elem.sty.. [JavaScript] 속성과 프로퍼티 브라우저는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다. 요소 노드(element node)에서 대부분의 표준 HTML 속성(attribute)은 DOM 객체의 프로퍼티(property)가 된다. 그런데 속성-프로퍼티가 항상 일대일로 매핑되지는 않는다! 1. DOM프로퍼티 DOM 프로퍼티의 종류는 엄청나게 많지만 이런 내장 프로퍼티만으로 충분하지 않은 경우 자신만의 프로퍼티를 만들 수도 있다. document.body.myData = { name: 'Caesar', title: 'Imperator' }; alert(document.body.myData.title); // Imperator DOM 프로퍼티는 일반 자바스립트 객체처럼 행동하므로 아래와 같은 특징을 보인다... [JavaScript] 주요 노드 프로퍼티 1. DOM 노드 클래스 DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다. 태그 에 대응하는 요소 노드엔 링크 관련된 프로퍼티를, 에 대응하는 요소 노드엔 입력 관련프로퍼티를 제공한다. 그런데 모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다. DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다. 계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받는다. 이런 관계를 그림으로 나타내면 다음과 같다. EventTarget – 루트에 있는 ‘추상(abstract)’ 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않는다. .. [JavaScript] getElement, querySelector 요소들이 가까이 붙어있다면 앞서 학습한 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있다. 하지만 그렇지 않은 경우에 원하는 요소 노드에 접근하는 방법은? 1. document.getElementById 혹은 id를 사용해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용해 접근할 수 있다. Element id 속성값을 그대로 딴 전역 변수를 이용해 접근할 수도 있다. Element 하지만 이렇게 요소 id를 따서 자동으로 선언된 전역변수는 동일한 이름을 가진 변수가 선언되면 무용지물이 된다. 2. querySelectorAll elem.querySelectorAll(css) 이 메서드는 elem의 자식 요소 중 주어진.. [JavaScript] DOM트리 HTML을 지탱하는 것은 태그(tag)이다. 문서객체모델(DOM)에 따르면, 모든 HTML태그는 객체이다. 태그 하나가 감싸고 있는 '자식' 태그는 중첩 태그라고 부른다. 이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용한다. 1. DOM의 구조 사슴에 관한 진실. 트리에 있는 노드는 모두 객체이다. 태그는 요소 노드(element node)이고, 트리 구조를 구성한다. 은 루트 노드가 되고, 와 는 루트 노드의 자식이 된다. 요소 내의 문자는 텍스트(text)노드가 된다. 텍스트 노드는 자식노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 된다. 2. 자동교정 기형적인 HTML을 만나면 브라우저는 DOM생성과정에서 HTML을 자동으로 교정한다... [JavaScript] 브라우저 환경과 다양한 명세서 (DOM과 BOM) 1. 브라우저 환경과 다양한 명세서 자바스크리브는 본래 웹 브라우저에서 사용하려고 만든 언어이다. 자바스크립트가 돌아가는 플랫폼은 호스트(host)라고 불린다. 이 호스트는 브라우저, 웹서버 등등이 될 수도 있다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 호스트 환경(host environment)라고 부른다. 호스트 환경은 랭귀지 코어에 더하여 플랫폼에 특정되는 객체와 함수를 제공한다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버사이드 기능을 제공한다. --> 최상단에는 window라 불리는 root객체가 있다. window객체는 2가지 역할을 한다. 자바스크립트 코드의 전역객체이다. (전역객체 chapter에 있음) '브라우저.. [React] React App 배포하기 1. build란? 컴파일 : 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업 컴파일 작업을 수행하는 프로그램을 컴파일러 라고 하는데, 일반적으로 컴파일의 결과는 .exe파일로 나타난다. (빌드의 한 과정) 빌드 : 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 그 결과 개발상태의 리액트는 개발의 편의성을 위해서 여러 가지 기능들을 추가해놓은 상태이기 때문에, 상당히 무거운 편이다. 개발자만 사용하게 된다면 모르겠지만 이 파일을 그대로 유저가 이용하게 된다면 상당히 느려질 것!! --> 이러한 불피요한 용량을 줄이기 위해 빌드를 하는 것이다. 2. build의 과정 npm run build yarn build 위 명령어를 수행하면 터미널에 아래와 같이 d.. [JavaScript] async 이터레이터와 제너레이터 비동기 이터레이터를 사용하면 비동기적으로 들어오는 데이터를 필요에 따라 처리할 수 있다. 네트워크를 통해 데이터가 여러 번에 걸쳐 들어오는 상황을 처리할 수 있기 때문. 더보기 1. async 이터레이터 비동기 이터레이터는 일반 이터레이터와 유사하며, 약간의 문법적인 차이가 있다. let range = { from: 1, to: 5, // for..of 최초 실행 시, Symbol.iterator을 호출해야함 [Symbol.iterator]() { // Symbol.iterator메서드는 이터레이터 객체를 반환 // 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, // 다음 값은 next()에서 정해진다. return { current: this.from, last: this.to,.. 이전 1 2 3 4 5 다음 목록 더보기