-
Reactjs 2017‧04‧24
ReactJs - .propTypes, .defaultprops
prop 를 타입 선언과 기본 값 셋팅을 할 때 대소문자 주의해서 쓰자. const로 먼저 셋팅 선언하고, 하단에 실제 타입과 기본값 선언을 상단에서 설정한 셋팅값으로 가져온다. import React from 'react'; const propTypes = { number : React.PropTypes.number } const defaultProps = { number : -1 } class Value extends React.Component { constructor(props){ super(props); } render(){ return( […]
-
Reactjs 2017‧04‧24
ReactJs - 자동으로 프로젝트 생성/셋팅
이런 저런 설치와 설정없이 바로 리액트 프로젝트를 만들수 있게 해주는 플러그인이다. 참고 문서는 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html CMD 창에서 아무곳에서나 아래처럼 입력하여 글로벌로 설치한다. npm install -g create-react-app 이게 설치가 되면 이제 기본 리액트 셋팅이 된 환경을 만들어줄 수 있다. CMD 로 작업하려는 디렉토리에 가서 아래처럼 입력하자. create-react-app testreact 그러면 testreact라는 폴더가 생긴다. 그 안에 모두 셋팅되어 있으니 […]
-
Reactjs 2017‧04‧24
리액트에서 리스트 반복으로 버튼 만들 때 .map()
const makeLi = (data) => { return data.map((getdata, i) => { //jquery each 처럼 getdata로 들어온걸 i로 반복시킴 return( <ContactinforLi contact={getdata} key={i} onClicks={()=>{this.handClickA(i)}}/> ) }) //data.map } // const makeLi render(){} 안에서 작동시켜서 ContactinforLi 컴포넌트들이 반복적으로 랜더링 되게 한다.
-
Reactjs 2017‧04‧24
Immutability Helpers 간단 사용법
배열이나 객체 수정/추가/삭제를 용이하기 위한 리액트 플러그인. 공식 문서 : https://facebook.github.io/react/docs/update.html 문서내 선언 import update from 'react-addons-update'; 예를 들어 setState할 때 쓰려면 아래처럼 쓴다. handleCreate(contact){ this.setState({ getJsonData : update(this.state.getJsonData, {$push : [contact]}) //update(타겟배열,{$push [추가할 것=받아온것]}) }) }; handleRemove(){ this.setState({ getJsonData : update(this.state.getJsonData, {$splice : [[this.state.selectedkey, 1]]}), //update(타겟 배열, {$splice : [[배열의 순번, 그로부터 어디까지 지울지]]}) selectedkey […]
-
Reactjs 2017‧04‧21
React - 02. 코딩하기 - 컴포넌트
리액트는 컴포넌트를 만드는게 중요하다. 컴포넌트... 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다. 컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다. ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다. 그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다. 지난 번에(http://bongsunga.com/blog/3478) 만든 webpack.config.js 를 열어보면 output : 이란 곳이 있고 […]
-
Reactjs 2017‧04‧21
React - 01. 준비하기
완전 처음 접한다. 들어는 보았지만 어떻게 시작해야할지 찾아다니면서 엄청 해맸다. 내가 생각하기엔 결론은 두가지 방법이다. 중요한건 ES6, JSX다. 실서버에 올려놓고 ES6와 JSX를 변환을 하느냐? 아니면 올려놓기 전에 변환하고 올리느냐 라는 방식으로 난 구분했다. 올려놓고 번들링 하는 방식의 구축 방법은 http://yumere.tistory.com/78 그렇지 않고 로컬에서 npm으로 번들링하여 완성하고 구축하는 방법은 https://velopert.com/814 이렇게 두가지 방식으로 난 구분을 했고, 후자의 방식으로 […]
-
Tools 2017‧04‧11
Gulp - 플러그인 설치 및 사용하기
gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자. 내가 하려는 자동화 작업은 이렇다. js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다. scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다. html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다. localhost로 서버화 시켜서 웹브라우져에서 미리 보면서 작업하고 수정될 때마다 실시간 반영된다. 이미지는 압축과정을 거쳐 배포 […]
-
Tools 2017‧04‧11
Gulp - 시작전 준비하기
어제 Gulp(걸프)란 걸 접하고 구글링을 통해서 습득해보는 도중 적어놔야겠다 생각 들어서 정리를 해보려고 한다. (왼쪽은 Gulp 로고라고 하니 알아두자) Gulp는 처음 접하였고 Grunt도 들어는 보았지만 아직 해보진 않았다. 결론은 셋팅해두면 실무에 작업 하는데 도움이 되는 좋은 '자동 빌드 도구'이다. 본인은 이미 비슷한 도구로 GUI형식의 Prepros를 써왔다. 무료다. 다만 유료로 사용하라고 자꾸 뜨는게 귀찮지만 나름 scss도 […]
-
Javascript, jQuery 2017‧03‧27
JS - textarea 폰트 사이즈 변경
제이쿼리로 하면 간단하지만 자바스크립트로 폰트 사이즈를 직접 변경할 때 아래처럼 getElementById로 선택자를 선언하고 수정하면 된다. document.getElementById("엘리먼트ID").style.fontSize = '20px'; 만약 클래스값으로 선택하고자 한다면 getElementsByClassName('클래스명') 이렇게만 지정하면 오류난다. 못찾는다. getElementsByClassName('클래스명')[0] 이렇게 순번을 넣어 개별적으로 선언해주어야 오류나지 않는다.
-
Javascript, jQuery 2017‧03‧17
PC와 모바일에서 텍스트를 클립보드에 복사 시키기
현실적으로 ios와 안드로이드 및 pc를 만족시키는 클립보드 스크립트는 없다. 기기마다 또는 os 마다 보안 정의도 다르기 때문이기도 하다. 아무튼 이 모든 기기를 만족시켜주기 위해서 두개의 플러그인을 사용해서 이용해보았다. clipboard.js : https://clipboardjs.com/ copy2clipboard.js 자세한 사용법은 각 사이트를 참고하면 되고, 아래는 작성해본 코드이다. <script src="./js/clipboard.min.js"></script> <script src="./js/copy2clipboard.js"></script> head 안에 넣어서 스크립트를 로드 시킨다. <textarea name="copytextarea" id="copytextarea" cols="30" rows="2" […]