HTMLCollection 과 NodeList DOM 컬렉션 객체인 HTMLCollection 과 NodeList 는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다. 두개 모두 유사 배열 객체이면서 이터러블이다. 따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다. 그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (ex. map, forEach, reduce 등등) 여기서! HTMLCollection과 NodeList의 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체 라는 것이다. HTMLCollection 먼저 HTMLCollection은 getEl..
심플하고 깔끔한 아날로그 시계를 만들었습니다아 아래에 코드펜으로 자료를 올렸습니다 0.5로 해서 보시면 아주 좋습니당~! See the Pen Untitled by seunghyun (@plla2) on CodePen. 토글버튼을 통해 라이트모드와 다크모드도 구현해보았다.
자료형이란?? 자료형이란, 값(value)의 종류이다. 자료형은 크게 두가지로 구분이 된다. 원시자료형, 참조 자료형이다. 원시자료형 vs 참조 자료형 원시자료형의 특징 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다. 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다. 자료형(number, string, boolean, undefined, null, symbol)을 원시 자료형으로 구분합니다. 참조 자료형의 특징 참조 자료형을 변수에 할당하면 메모리 공간에 주솟값이 저장된다. 참조 값을 갖는 변수를 다른 변수에 할당하면..
이번 포스팅은 3월 9일, 10일에 진행했던 솔로 프로젝트 "나만의 아고라스테이츠 만들기" 진행 중 작성했던 코드들을 정리 할 것이다. 1. HTML 먼저 HTML 파일을 보면, form패그를 사용하여 폼에 제목, 이름, 질문내용을 작성할 수 있게 각 input을 주었다. 사실 포크해올 때 HTML 파일이 거의 대부분 만들어져 있어서 몇개만 바꾸고 추가해주기만해서 크게 건드리지 않았고, 많이 어려운 내용은 없었던 것 같다. 2. Javascript 진짜 어려운 점은 여기에서부터... 난관에 봉착.. 사실 자바스크립트 작성할 때 dom으로 HTML요소를 꺼내오긴했는데... 여기서 뭘 어떻게 해야할지 감조차 잡히지않았다 처음엔 하지만 유어클래스에서 튜토리얼로 간단하게 이런식으로 작성하면 된다~~ 이런 내용이..
DOM 이란, HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 자세히 알아보자면, 문서 객체 모델을 줄인 DOM은 문서의 구조화된 표현(structered representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하며 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 1 . 1 HTML 요소와 노드 객체 HTML요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이 때, HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML요소의 텍스트컨텐츠는 텍스트 노드로 변환된다. 트..
이 포스팅은 koans를 풀다가 더 공부가 많이 필요하겠다고 느낀 구조분해할당에 대해 알아보고 정리 구조 분해 할당?? 뭔지부터 알자 구조 분해 할당은 배열 또는 객체의 구조를 분해해서 그 분해된 값을 개별적인 변수에 담는 표현식 이라고는 하는데... 말로는 잘모르겠다 예제를 같이 보면서 이해해보자 const arr = [1, 2, 3, 4, 5]; const one = arr[0]; const two = arr[1]; const three = arr[2]; 배열 내부의 값을 새로운 변수에 각각 할당하고자 할 때, 하나씩 변수를 선언하고, 값을 할당하는 과정을 거쳐야된다. 하지만! 이때 배열의 구조분해할당 이라는 것을 사용하면 변수를 선언하고, 할당하는 과정을 한번에 해결할 수 있다. const arr ..
클로저 처음엔 closer인줄 알았던 클로저. 사실은 closure이라는... 처음알았다 클로저는 그냥 처음부터 난해하다고 설명을 하고있다. 예를 들어보면 이해가 편할수도있다. const x = 1; function outerFn() { const x = 10; function innerFn() { console.log(x); //10 } innerFn(); } outerFn(); 위의 예를 보면 outerFn 내부에서 중첩함수 innerFn이 정의되고 호출되었다. 이때 중첩 함수 innerFn의 상위스코프는 외부 함수 outerFn의 스코프이다. 따라서 innerFn 내부에서 자신을 포함하고 있는 외부함수 outerFn의 x 변수에 접근하여 콘솔에 10이 찍힌다. const x = 1; function..
실행 컨텍스트?? 그게 무엇이죠..? 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 그래서 그게 뭐냐구요?? 이 글을 읽다보면 이해가 되실수도 있습니다. (안되실수도...) ECMAScript 사양은 소스코드를 4가지 타입으로 구분. 전역코드, 함수코드, eval코드, 모듈코드 소스코드 타입 설명 전역코드 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 그리고 var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드를 바인딩하고 참조하기 위해 전역객체와 연결 함수코드 함수코드는 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스..
