728x90 My Wiki (CodesStates)47 (5-3) JS/객체 지향 JavaScript/클래스와 프로토타입 JavaScript는 프로토타입 기반 언어이다. 여기서 프로토타입(Prototype)은 원형 객체를 의미한다. 프로토타입 문서를 반드시 읽어 보자. 다음과 같이 Human이라는 클래스를 구현해 본다. 개발자 도구를 열어 다음 코드를 실습해 보자. class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다`); } } let kimcoding = new Human('김코딩', 30); // 실습해보세요 Human.prototype.constructor === Human; // 결과는 무엇일까요? Human.prototype === kimcoding._.. 2021. 8. 23. (5-2) JS/객체 지향 JavaScript/객체 지향 프로그래밍 Object Oriented Programming, 객체 지향 프로그래밍에 대해 알아보자. 객체 지향 프로그래밍이라는 패러다임이 등장하기 전으로 돌아가보자. 먼저 절차 언어가 있었다. 우리는 앞서 모든 것을 절차로 생각해왔다. 기껏해야 함수로 이동하는 것이 전부였다. 초기의 C, 포트란같은 언어들은 객체 지향의 개념이 없는 절차 언어였다. 그러나 객체 지향 프로그래밍이라는 패러다임이 등장하면서 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안해냈다. 따라서 데이터와 기능이 별개로 취급되지 않고 한번에 묶어서 처리할 수 있게 되었다. 이러한 객체 지향의 특징은 빠르게 현대 언어에 적용이 되었다. 자바스크립트는 엄밀히 말해.. 2021. 8. 23. (5-1) JS/객체 지향 JavaScript/클래스를 이용한 모듈화 객체 지향 프로그래밍(OOP, Object-oriented programming) 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리한다. 속성과 메소드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게 클래스(Class)라는 이름으로 부른다. 객체 지향 프로그래밍은 사람이 세계를 보고 이해하는 방법과 매우 흡사하다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문에 이미 오래 전부터 프로그래밍 방법론으로 매우 빠르게 적용되었다. 객체 지향 프로그래밍을 철저하게 적용한 프로그래밍 언어 Java나 C#과는 다르게 자바스크립트에서 OOP를 구현하는 방법은 조금 독특하다. 클래스와 인스턴스 객체 지향 프로그래밍의.. 2021. 8. 23. (1-8) React 기초 - State State state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 하였다. 실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까? 쇼핑몰 장바구니를 예로 들어보겠다. 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다. [그림] 장바구니 내에서의 상태 체크박스를 코드로 구현해 보면 아래와 같다. 아래 예시에서는 단순히 체크된 상태에 따라 보이는 글씨가 달라지지만 이를 쇼핑몰에 적용하면 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면 또한 달라진다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉.. 2021. 8. 15. 이전 1 2 3 4 5 ··· 12 다음
