아카이브: 2017

Ubuntu OS Playonlinux

Ubuntu 16.04 LTS Playonlinux 설치우분투에서 Wine 과 PlayOnLinux 를 사용하여 윈도우 프로그램을 사용할 수 있다.설치는 소프트웨어 센터에서 Playonlinux 를 간편하게 설치하거나 터미널 명령어를 설치 하면 된다. Wine 설치 터미널 창에서 다음의 명령어를 통해 Wine 을 설치 한다. 12345$ sudo apt-g

Ubuntu OS Chrome Browser

Ubuntu OS 16.04 LTS 크롬 브라우저 설치예전 우분투 버전에서는 소프트웨어 센터에서 chromium 으로 설치를 해서 사용했었는데 업데이트 된 우분투 리눅스에는 chromium 설치가 되지 않는 듯 하다.검색 확인 결과 크롬 브라우저를 설치하려면 터미널에서 아래 명령어를 실행해서 설치 과정을 거치면 크롬 브라우저를 사용할 수 있다. 우분투

React.js Functional Component

React.js Functional Component (함수형 컴포넌트)React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용한다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야 했었다. 1234567891011import React, {

React.js Router v3

React.js Router v3 사용하기아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 이다. (한동안 베타였는데 정식 릴리즈되었다. 관련 동영상이 만들어졌으니 여기를 참조) 리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용한다. 라우터는 사용자가 요청한 URL에 따라서

React.js Router [Outdated]

React.js Router: URL 에 따라서 다른 결과물을 보여주기이 포스트는 Outdated 되었으니, React-router v3 를 더 자세히 다루는 리액트 프로젝트에서의 라우터, React-router v3 사용하기 를 참고하도록 하자. 이번 포스트는 React.js 의 Router 사용에 대한 내용으로 Router 는 사용자가 요청한 URL 의

React.js ref

React.js ref: DOMref는 reference 를 의미하며, 이는 DOM 요소에 이름을 달아준다.HTML 의 id와 사뭇 비슷하지만, id는 일반 DOM 요소에 특정 DOM 메소드만 사용 할 수 있지만, ref는 DOM 요소에도 사용하고 컴포넌트에도 사용 할 수 있으며, 해당 컴포넌트가 가지고있는 메소드 및 변수들을 사용 할 수 있다는 점이 큰

React.js Component LifeCycle API

React.js Component LifeCycle API이번에는 React.js 컴포넌트의 LifeCycle API 에 관하여 살펴보겠다.LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드들 이다.이 메소드를 왜 쓰는것인가? 과연 쓸일이 있을까? 라고 생각할 수 있는데, 가

React.js Immutability Helper

React.js Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정컴포넌트에서 사용할 데이터 배열을 매핑하여 효율적으로 렌더링하는 방법에 이어 이번엔 데이터 배열에 변화를 주는 방법을 알아보도록 하겠다. 이 과정은 생각보다 쉽지만은 않다. 1. state 안의 array 에 원소 삽입/제거&

React.js Component Map

React.js Component Iteration (반복) – MapReact.js 에서 다른 데이터를 지니고있는 같은 종류의 여러 컴포넌트를 효율적으로 렌더링 하는 방법에 대하여 알아보도록 하겠다. 1. JavaScript – Array.prototype.map우선, JavaScript 의 Array 객체 내장함수인 map 함수에 대하여 알아보자. 정의

React.js Component State Props

React.js Component의 State 와 Props 사용하기React.js 의 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보도록 하겠다. 1. 시작하기Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 이어서 작성한다. index.html 1234567891011<!DOCTYPE h