All

이번에는 Component API 중 setState(), forceUpdate(), 그리고 ReactDOM.findDOMNode()라는 메소드에 대해서 알아보자. setState setState는 state를 변경할 때 사용합니다. 기존의 state를 대체하는 것이 아닌, 기존의 state에 변화를 줍니다. App.js import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setStateHandler.bind(this); }; setStateHandler() { var item = "setState..."..

ReactJS #05 - State & Props 이번 포스팅에서는 리액트의 State와 Props에 대해서 알아보겠습니다. State State는 데이터가 오는 곳입니다. 리액트를 사용할 때에는 이 State를 최소화 하고, stateful 컴포넌트를 줄이는 것이 좋습니다. 만약 스테이트를 사용하는 10개의 컴포넌트를 사용한다면, 한 컴포넌트에서 다른 모든 state를 정의하고 다른 컴포넌트를 참조하여 사용하는 것이 좋습니다. App.js import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", "con..

2017 NDC #02 - 학생 서포터즈 지원/면접/결과 작년에 2016 NDC 학생 서포터즈에 지원했지만 면접까지 보고 떨어진 본인입니다. ㅋㅋ 2017 NDC 학생 서포터즈는 꼭 하고 싶어서, 다시 지원을 했고, 결과적으로 서포터즈 활동을 할 수 있어서 엄청 행운이라고 생각합니다. 이번에는 제가 서포터즈를 지원하고 면접을 보고, 결과를 받은 과정에 대해서 포스팅하겠습니다. 서포터즈 지원 우선 NDC 학생 서포터즈 지원은 2월 20일 부터 시작하여 3월 12일까지 진행되었습니다. 신청 방법은 NDC 홈페이지 - 사전등록 - 서포터즈 신청에서 할 수 있었습니다. 신청서에 기입하는 내용은 기본 인적 사항, 외국어(영어, 일본어, 중국어) 수준, 자기 소개, 지원 동기, 경력 사항 이었습니다. 저는 작년에 ..

2017 NDC #01 - NDC란? 드디어 2017 NDC가 준비 중에 있다. 본인은 2016 NDC 학생 서포터즈에 지원했다가 떨어졌는데, 이번 기회에 다시 할 수 있게 되었다. 게임에 관심이 있다면, 누구나 관심있을 NDC. NDC에 대해서 알아보자. NDC란? NDC는 넥슨 개발자 컨퍼런스(Nexon Developer Conference)입니다. 넥슨 개발자 컨퍼런스는 지난 20년간 대한민국 게임산업을 이끌어온 넥슨인들이 각 프로젝트별로 산재된 지식과 경험을 공유하고자 2007년 사내 행사로 시작된 자발적인 게임 개발자 컨퍼런스입니다. 처음 시작하던 해에는 33개 세션이 전부였던 소규모 행사였지만, 이후 매년 꾸준히 세션을 확대해 현재 200여 명에 달하는 발표자들이 100~150여개 세션을 진행..

React JS #04 - Components 리액트는 컴포넌트로 시작해서 컴포넌트로 끝난다고 해도 과언이 아니다. 이번 포스트에서는 리액트의 컴포턴트에 대해서 예시를 통해 알아보자. Stateless Example 처음에는 State가 없는 컴포넌트를 만들어보자. 우선 컴포넌트는 컴포넌트들끼리 참조가 가능하다. 다음과 같이 App.js를 수정해보자. import React from 'react'; class App extends React.Component { render() { return ( ); }} class Header extends React.Component { render() { return ( Header ); }} class Content extends React.Component {..

Python : Non-ASCII character 에러 파이썬으로 작업을 하다보면, 주석을 한글로 달 때가 있는데 이런 경우에 신택스 에러가 발생한다. 에러 메세지는 다음과 같다. File "/Users/Documents/python/scapy/main.py", line 3SyntaxError: Non-ASCII character '\xec' in file /Users/Documents/python/scapy/main.py on line 3, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details 이런 경우에는 코드 내에 한글이 들어있어, 파이썬이 읽어들이지 못하기 때문에 발생한다. 해결방법은 간단하게, 파이썬 코드 ..

React JS #03 - JSX 리액트는 일반적인 Javascript 와는 다르게 JSX라는 템플릿을 사용한다. 꼭 필요한 건 아니지만, 많은 장점이 있다. - JSX는 Javascript 코드로 컴파일하는 과정에서 최적화된다. - JSX는 예측불가능한 결과를 내지 않는다. 대부분의 에러들은 컴파일과정에서 발견된다. - HTML에 친근하여 개발이 쉽고 빠르다. JSX 사용하기 JSX는 일반적인 HTML과 많이 닮았습니다. class App extends React.Component { render(){ return ( Hello World!!! ); }} HTML과 비슷하지만, JSX를 쓰기위해선 많은 것들을 염두해두고 있어야합니다. Nested Elements 많은 것들을 반환하고자 한다면, 하나의 ..

React JS #01 2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트. 리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다. 개발환경 구축 - 모듈 설치 이번에는 리액트를 시작하기에 앞서, 무엇보다 중요한 개발환경을 구축해보자. Babel babel은 최신의 Javascript 문법을 사용하게 해주는 툴입니다. 설치npm install babelnpm install babel-corenpm install babel-loadernpm install babel-preset-reactnpm install babel-preset-es2015 Webpack webpack은 모듈 번들러입니다. 웹팩은 클라이언트 사이드에서 사용되는 Javascript 파일들을 묶는 목적으로 사..

React JS #01 2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트. 오늘부턴 리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다. React JS란? 페이스북에서 개발한 유저 인터페이스 라이브러리로써, 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 한다. 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있다. 특징은 다음과 같다. 특징- JUST THE UI React.js는 UI 컴포넌트를 만들기 위한 라이브러리입니다. 컴포넌트 지향 프레임워크는 여러 가지가 있지만 React.js는 정말 UI 컴포넌트만 지원합니다. 비록 지원하는 범위는 작지만, 애플리케이션을 만드는 방법을 크게 바꿀 수 있다는 점이 재미있습니다. 또한..

homebrew update issue 'Please delete these paths and run `brew update`.' brew update를 시전하다가 Please delete these paths and run `brew update`. 라는 에러와 동시에 업데이트가 중단되었다. - 에러 Error: Could not link:/usr/local/etc/bash_completion.d/brew Please delete these paths and run `brew update`.Error: Could not link:/usr/local/share/zsh/site-functions/_brew Please delete these paths and run `brew update`.Error: C..