[Node.js] TIP: Node.js 와 NPM 최신버전으로 업그레이드 하기

이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 방법에 대한 팁 입니다. 주의: 일부 모듈에선 v6.0.0 을 지원하지 않습니다. # Node.js 업그레이드 다음 절차에 따라서 업데이트를 진행하세요. 현재 NodeJs 버전 확인하기 $ node…

[React.JS] 강좌 10-2편 Redux: 예제를 통해 사용해보기

이번 포스트는 React.js 에서 Redux를 실제로 이용해보는 강좌입니다. Redux에 대한 이해가 부족하신분은 이전 강좌를 참조해주세요. # 프로젝트 시작하기 강좌 2.1편을 참조하여 React.js 프로젝트를 생성하세요. (NPM 을 통하여 환경설정을 하시길 바랍니다) 이 프로젝트에선 webpack.config.js 에서 entry 를 index.js 로 설정하겠습니다. module.exports…

[React.JS] 강좌 10-1편 Redux: React 앱의 효율적인 데이터 교류

이번 포스트는 React.js 를 통하여 만들어진 어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해주는 Redux 에 대하여 공부해보겠습니다. 강좌가 길어질 것 같아서 파트를 나눠서 강좌를 작성하겠습니다. 이번 파트에서는 이해를 돋구기 이하여 배경지식 및 특징을 알아보겠습니다. 1.소개 Redux는 JavaScript…

[React.JS] 강좌 9편 Router: URL 에 따라서 다른 결과물을 보여주자

이 포스트는 Outdated 되었습니다. React-router v3 를 더 자세히 다루는 리액트 프로젝트에서의 라우터, React-router v3 사용하기 를 참고하세요. 이번 포스트는 React.js 의 Router 사용에 대한 강좌입니다. Router 는 사용자가 요청한 URL 의 서브디렉토리에 따라서 결과물을 렌더링해줍니다.  Apache nginx등의 웹서버처럼 각…

[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…