map을 이용한 반복 내장 고차 함수 map에서 배열 메서드 map의 특성 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)합니다. 배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 합니다. 블로그 포스트가 100개인 경우를 상상해 봅시다. 이런 상황에서는 블로그 포스팅이 늘어날 때마다 매일 코드를 변경해야만 합니다. 데이터가 변경될 때마다, 알아서 렌더링할 수는 없을까요? React에서는 이런 문제를 해결하기 위해서 배열 메서드 map을 활용합니다. const posts = [ { id : 1, title : 'Hello World', content : 'Welcome to learning React!' }, { id : 2, ..

리액트는 무엇인가? 리액트는 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리입니다. 리액트 3가지 특징 선언형 리액트는 한 페이지를 보여주기위해 기존 HTML / CSS / JS 로 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다. (*JSX는 아래 설명) // JSX로 작성된 코드 // 하나의 파일에 명시적으로 작성할수 있는 JSX를 활용 const Weather = () => ( ) 컴토넌트기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발합니다. 컴포넌트로분리하면 서로 독립적으로 재사용이 가능하고 기능자체에 집중하여 개발할 수 있습니다. //컴포넌트로 분류 const Cart = ({items}) =>..

Bare Minimum Requirements const sleep = (wait) => { return new Promise((resolve) => { setTimeout(() => { resolve('hello'); }, wait); }); }; function runPromise() { resetTitle(); playVideo(); sleep(1000) .then((param) => { console.log(param); pauseVideo(); displayTitle(); return "world"; }) .then((param) => { console.log(param); return sleep(5000); }) .then(highlightTitle) .then(sleep.bind(null, ..

반딧불 Beesbeesbees과제 레퍼런스의 의사코드를 작성하여 블로깅하세요. 코드스테이츠 BeeBeeBee 과제. 아래 조건을 만족하게 js를 수정해야 한다. Class 구조 ├── Grub │ └── Bee │ ├── HoneyMakerBee │ └── ForagerBee 과제의 요구조건 Bee class functionality ✓ `age` 속성은 `5`이어야 합니다 ✓ `color` 속성은 `yellow`이어야 합니다 ✓ `food` 속성은 Grub으로부터 상속받습니다 ✓ `eat` 메소드는 Grub으로부터 상속받습니다 ✓ `job` 속성은 `Keep on growing`이어야 합니다 ForagerBee class functionality ✓ `age` 속성은 `10`이어야 합니다 ✓ `job`..

프로토타입(Prototype)이란? 프로토타입은 원형 객체를 의미합니다. 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. ECMA-262에서 prototype은 object that provides shared properties for other objects로, 다른 객체에 공유 프로퍼티(메서드 포함)를 제공하는 객체이다. 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의..

객체 지향 프로그래밍 패러다임이 등장하기 전 절차 지향 프로그래밍이 있었다. 이전에는 모든것을 절차적으로 생각해왔으며 기껏해야 함수로 이동하는것이 전부였다. 초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다. 객체지향 프로그램이 패러다임이 등장하며 단순히 별개의 변수와 함수로 순차적 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어내는 방법을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한번에 묶여서 처리할 수 있게 되었다. 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다.객체 지향 언어 "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 현대의 언어들은 대부분 객체 지향의 특징을 ..

보호되어 있는 글입니다.

클래스와 인스턴스 자바스크립트에서 클래스와 인스턴스? 이건 또 뭔.. 말이야? 객체(Object)란? 객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말한다. 예를 들어 물리적(유형)으로 존재하는 자동차, 컴퓨터, 사람과 추상적(무형)으로 존재하는 강의, 주문 등이 모두 객체가 될 수 있다. 사람이라는 객체는 이름, 나이, 성별 등과 같은 속성과 먹다, 걷다, 자다 등의 동작을 가진다. 이러한 속성들을 필드(field), 동작들을 메소드(method)라고 부른다. 클래스(class)란? 용도 : 객체를 생성하는 데 사용한다. 클래스(Class)란 객체를 생성하기 위한 일종의 설계도이다. 객체가 가지는 속성(필드)과 동..