이번에는 리액트에서 Form을 어떻게 다루는 지에 대해서 알아봅시다. 리액트는 데이터의 흐름이 단방향입니다. 따라서 여러 폼에 변화하는 같은 값을 적용하려면, 따로 처리를 해주어야 합니다. 아래와 같이 초기 value 값을 state.data로 적용해주고, 이 후에 onChange로 변하는 값을 state로 갱신합니다. App.js import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this..

ReactJS에는 컴포넌트들에 대한 라이프 사이클 메서드들이 존재합니다. 이번 포스트에서는 이 라이프 사이클 메서드들에 대해서 알아봅시다. Life Cycle Methods- componentWillMount 서버와 클라이언트 모두에게 렌더링하기 전에 작동됩니다. - componentDidMount 클라이언트에서 첫 렌더링이 이루어지고 난 후에 작동됩니다. 이 메서드에서 AJAX 리퀘스트나 DOM, state 갱신을 진행합니다. 또한 다른 자바스크립트 프레임워크나 다른 함수들과 합쳐지는 것에 사용되며, 이 때는 setInterval이나 setTimeout 등과 같은 함수로 지연을 시키게 됩니다. - componentWillReceiveProps Prop가 갱신되면, 다른 렌더링이 작동하기 전에 불려집니다..

이번에는 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..

YSCEC-CRAWLER /와이섹 크롤러/ 와이섹 크롤/ 크롤링/ 와이섹 연세대학교 지식창조 커뮤니티라는 거창한 이름의 사이트가 있다. 이 사이트는 연세대학교 재학생들의 강의 공지와 강의 자료들이 올라오는 사이트인데, 매일매일 로그인하고 수강하는 과목의 자료들이 업로드 되었는지 확인하는 작업이 여간 귀찮은게 아니다. 그래서 매일매일 나 대신 체크를 해주는 스크립트를 개발해보았다. 개발환경NodeJSES7 문법으로 작성되었다. 소스코드https://github.com/pfldy2850/YSCEC-CRAWLER 설명selenium을 사용한 webdriverio라는 모듈을 사용하였다.이 모듈은 가상 웹 드라이버를 조작하여, 웹 브라우저를 자동으로 실시하는데 쓰이는데,주로 개발 과정에서 테스트를 목적으로 많이 ..

이 포스트에는 내가 git pull을 진행하면서 겪은 문제들의 원인들과 해결방법에 대해서 정리하고자 한다.(git pull해서 안되면 너무 짜증나) 문제 1.- 에러 메세지error: The following untracked working tree files would be overwritten by merge:- 원인 The problem is that you are not tracking the files locally but identical files are tracked remotely so in order to "pull" your system would be forced to overwrite the local files which are not version controlled. - 해결..

데이터 분석을 하기 위해 데이터 파일을 구했다. 그런데 이 데이터 파일이 .data 형식 파일이라 json으로 변환을 하기위해서 만들어보았다. - 소스코드import json print('Directory : ') file_dir = input(); input_file = open(file_dir + ".data", 'r') output_file = open(file_dir + ".json", 'w') data = {} data['dataset'] = []; print('start converting') while True: line = input_file.readline()[:-1] if not line: break row = line.split(',') tmpData = {} for i in rang..