하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

Study

• 데이터 속성 사용하기 (data attribute)

  Study/html 2020. 6. 12. 15:44

  html5 특성 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML요소에 추가 정보를 저장 할 수 있도록 해준다. data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법이다. HTML 문법 문법은 간단하다. 어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다. 아래 dat..

  Read More
• 원시값의 메서드

  Study/JavaScript 2020. 6. 10. 14:47

  자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해준다. 원시값에서도 객체에서처럼 메서드를 호출할 수 있다. 원시값의 메서드에 대해선 곡 학습할 예정인데, 그 전에 원시값은 객체가 아니라는 것을 상기하도록 하자. 원시값과 객체는 다음과 같은 차이점이 있다. 원시값: 원시형 값이다. 원시형의 종류는 문자(string), 숫자(number), bigint, boolean, symbol, null, undefined 형으로 총 7가지 이다. 객체 : 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {name: "John", age: 30} 와 같이 대괄호{}를 사용해 만들 수 있다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼..

  Read More
• createElement()

  Study/JavaScript 2020. 6. 8. 15:38

  HTML 문서에서 Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환한다. 구문 let element = document.createElement(tagName[, options]); 매개변수 tagName : 생성할 요소의 유형을 가리키는 문자열 options : is 속성 하나를 가진 ElementCreationOptions 객체. 속성의 값은 customElements.define() 을 사용해 정의한 사용자 정의 요소 입니다. 예제 아래 예제는 새로운 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다. 위의 텍스트는 동적으로 추가했습니다. ..

  Read More
• 정적 메서드와 정적 프로퍼티

  Study/JavaScript 2020. 6. 8. 11:03

  "prototype"이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있다. 이런 메서드를 정적(static)메서드라고 부른다. 정적 메서드는 아래와 같이 클래스 안에서 static 키워드를 붙여 만들 수 있다. class User { static staticMethod() { alert(this === User); } } User.staticMethod(); //true 정적 메서드는 메서드를 프로퍼티 형태로 직접 할당하는 것과 동일한 일을 한다. class User { } User.staticMethod = function(){ alert(this === User); }; User.staticMethod(); //true User.staticMethod()가 호출될 때 this의 값은 클래스 생성자인..

  Read More
• 오늘의 TIL

  Study/TIL 2020. 6. 7. 22:55

  오늘의 TIL 😎 1. 자바스크립트 Class 2. react의 장단점

  Read More
• 클래스, 함수 변경해보기

  Study/JavaScript 2020. 6. 7. 22:46

  함수 스타일로 작성된 Clock 클래스를 ‘클래스’ 문법으로 다시 써봅시다. class Clock { constructor({ template }) { this.template = template; } render() { let date = new Date(); let hours = date.getHours(); if (hours < 10) hours = '0' + hours; let mins = date.getMinutes(); if (mins < 10) mins = '0' + mins; let secs = date.getSeconds(); if (secs < 10) secs = '0' + secs; let output = this.template .replace('h', hours) .replace(..

  Read More
• 클래스와 기본 문법

  Study/JavaScript 2020. 6. 7. 22:42

  클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. -위키백과 실무에선 사용자나 물건 같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦다. 이럴때 'new'연산자와 생성자 함수에서 배운 new function을 사용할 수 있다. 여기에 더하면 모던 자바스크립트에 도입된 클래스(class)문법을 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다. 클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호작용하도록 작성하는 방법이다. '객체지향 프로그래밍'이라는 단어에서 '객체'는 ..

  Read More
• react component lifecycle

  Study/React 2020. 6. 4. 13:59

  컴포넌트가 로딩되기 시작하는 Mounting constructor 클래스 생성자 이것은 어찌보면 당연합니다. 어떤 클래스를 만들더라도 생성자보다 더 빨리 샐행되는 로직은 없기 때문입니다. 하지만 지금의 리액트에서는 생성자를 건드릴 일이 거의 없어졌기 때문에 가볍게 넘어가도록 하겠습니다. 아직 클래스 인스턴스가 막 실행된 시점이기 때문에 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않습니다. 실제 로딩이 이루어지는 render constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. render메소드는 메소드 이름 자체로 어떤 일을 하는지 나타내고 있습니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다. 그러나 한가지 명심해..

  Read More