[React.JS] 강좌 6-2편 Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정

* 이 강좌는 [React.js] 강좌 6-1편 과 이어지는 강좌입니다. 저번 강좌에서 컴포넌트에서 사용할 데이터 배열을 매핑하여 효율적으로 렌더링하는 방법을 배웠습니다. 이번엔 데이터 배열에 변화를 주는 방법을 배워보도록 하겠습니다. 이 과정은 생각보다 쉽지만은 않습니다. 1. state 안의 array 에 원소 삽입/제거/수정…

[React.js] 강좌 6-1편 컴포넌트 Iteration (반복) – Map

이번 강좌에서는 다른 데이터를 지니고있는 같은 종류의 여러 컴포넌트를 효율적으로 렌더링 하는 방법에 대하여 알아보겠습니다. 1. JavaScript – Array.prototype.map 우선, JavaScript 의 Array 객체 내장함수인 map 함수에 대하여 알아볼까요? 정의 map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각…

[React.JS] 강좌 5편 컴포넌트의 State 와 Props 사용하기

이번 강좌에서는 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보겠습니다. 1. 시작하기 강좌 4편 – Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 사용하겠습니다. index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React App</title> </head> <body> <div…

[React.JS] 강좌 4편 Component 생성 및 모듈화

이번 강좌에서는 React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠습니다. 이 강좌는 이전에 설정한 React.js 작업환경에서부터 진행됩니다. Component 생성 및 모듈화 다음 index.js 파일은, 이전 강좌에서 만들었지요? src/index.js import React from 'react'; import ReactDOM from 'react-dom';…

[React.JS] 강좌 3편 JSX

이번 강좌에서는 React.js 에서 사용되는 JSX 문법에 대하여 알아보겠습니다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있습니다. JSX는 컴파일링 되면서 최적화 되므로, 빠르다 Type-safe (어떠한 연산도…

[React.JS] 강좌 2.1편 손쉽게 React.js 작업환경 설정하기 / 프로젝트 시작하기

이번 강좌는 React.js 작업 환경설정 시 필요한 부연설명을 모두 생략하고 그냥 빠르게 작업환경을 설정하는데에 집중합니다. 앞으로 작성 될 강좌를 따라하게 될 때마다 새 프로젝트를 생성하거나 기존 프로젝트를 수정하거나 해야 되는데 그 귀찮음을 해소하고하고자 이 포스트를 작성하였습니다. 0. The EASY WAY…

[React.JS] 강좌 2편 작업환경 설정하기

이번 강좌에서는 React 작업환경을 설정해보도록 하겠습니다. 저희는 NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 합니다. NodeJS 환경에서 React를 사용하는 방법은  대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는 방법이 있는데요, 이 포스트에서는 webpack을 이용하도록 하겠습니다. 주의: Node.js를 설치…

[Node.js] GitHub Webhook 을 이용하여 push 될 때 마다 자동으로 pull 하기

요새 한동안 vim 을 사용하여 서버에서 직접 작업하다가 오랜만에 IDE가 사용하고싶어져서 Atom 을 사용하고있다. 그나저나, Atom이 처음 나왔을때는 솔직히 별로라고 생각했는데 지금보니 꽤나 괜찮은 것 같다. Atom에서 작업 후, push 하면 서버에서 자동으로 pull 하는 환경을 만들고 싶어서 Node.js 로…