프로토타입... 부트캠프 동기분들 사이에서 악명높기로 소문난 녀석... 저도 처음으로 맛보려고합니다 프로토타입?? 자바스크립트는 프로토타입 기반언어라고 불린다. 이유는 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미. 사실, 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거. 중복을 제거하는 방법은 기존의 코드를 적극적으로 재사용하는 것 예제를 보며 살펴보자 위의 예제의 생성자함수는 문제가 있다 무슨문제일까!?? radius 프로퍼티 값은 일반적으로 인스턴스마다 다르다. 하지만 getArea 메서드는 ..
자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 이루고 있는 거의 '모든 것'이 객체다. 그말은 즉, 원시타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조 이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라고 부른다 객체지향 프로그래밍 객체지향 프로그래밍의 정의는 이러하다. 객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성 그래서 뭐라고...?? 뭐해서 뭐하다고? 쉽게 설명 해.줘. 일단 단어부터 바꿔보자 객체는 너무 어려운말이다. 객체를 "사물" ..
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 ..
