[Node.js] 12.1 편: GULP – JavaScript 빌드 자동화툴 알아보기 + ES6 문법으로 사용해보기

이번 강좌에서는 JavaScript 빌드 자동화 툴인 gulp.js 에 대하여 알아보고, ES6 문법으로 gulp.js 를 사용하는 방법을 알아보겠습니다. # 소개 Node.js 환경에서 웹 어플리케이션을 만들다보면, 일일히 수작업으로 하기에 귀찮은 작업들이 존재합니다.. 예를들어서, ____.min.js, ____.min.css 이런 파일, 익숙하신가요? whitespace, newline 과 같이…

[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] 강좌 7편 Component LifeCycle API

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]   이번 강좌에서는 React.js 컴포넌트의 LifeCycle API 에 관하여 배워보겠습니다. LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드 들 입니다. 이 메소드를…

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

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이 강의는 조금 오래되었습니다 😉 다음 포스트를 읽으시는 것을 권장 드립니다: React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 [Featured] React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서…

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

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이번 강좌에서는 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보겠습니다. 1. 시작하기 강좌 4편 – Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 사용하겠습니다. index.html <!DOCTYPE html>…

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

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이번 강좌에서는 React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠습니다. 이 강좌는 이전에 설정한 React.js 작업환경에서부터 진행됩니다. Component 생성 및 모듈화 다음 index.js 파일은, 이전 강좌에서 만들었지요?…

[React.JS] 강좌 3편 JSX

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이번 강좌에서는 React.js 에서 사용되는 JSX 문법에 대하여 알아보겠습니다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있습니다.…

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

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]   이번 강좌에서는 React 작업환경을 설정해보도록 하겠습니다. 저희는 NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 합니다. NodeJS 환경에서 React를 사용하는 방법은  대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는…

[React.JS] 강좌 1편 소개 및 맛보기

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] React 강좌 01: 소개 및 맛보기 이 강좌에서는 React에 대한 간략한 정보와 특징에 대하여 알아보고, 간단한 예제를 통해 React를 사용해보도록 하겠습니다. 본 강좌는 ReactJS를 처음 배우는 JavaScript 개발자들을 대상으로 작성됐으며 앞으로…