-
Javascript, jQuery 2017‧07‧18
npm 옵션 (단축키)
npm - 옵션을 찾을 때가 있어서 적어놓는다. -v: --version -h, -?, --help, -H: --usage -s, --silent: --loglevel silent -q, --quiet: --loglevel warn -d: --loglevel info -dd, --verbose: --loglevel verbose -ddd: --loglevel silly -g: --global -C: --prefix -l: --long -m: --message -p, --porcelain: --parseable -reg: --registry -f: --force -desc: --description -S: --save -P: --save-prod -D: --save-dev -O: --save-optional -B: --save-bundle -E: --save-exact -y: --yes -n: --yes false ll and la commands: ls --long 공식 문서파일은 : https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties
-
Server 2017‧07‧14
이미지 태그에 .svg 파일 넣었는데 브라우져에서 깨져 나올 때
마크업에서 <img src='test.svg'> 이렇게 넣었을 때 로컬 호스트에서는 문제 없었지만 실제 서버에 올렸을 때 이미지가 깨져서 안나올 때가 있다. 그럴 때는 서버의 루트쪽에 있는 .htaccess 파일을 열어 상단에 아래 코드를 넣어주면 된다. AddType image/svg+xml svg svgz AddEncoding gzip svgz
-
Reactjs 2017‧06‧22
react REDUX - connect 유무에 따라 리듀서 안의 값 가져오기
export default connect( mapStateToProps, mapDispatchToProps )(스마트컴포넌트) 이런 식으로 스마트 컴포넌트를 연결할 것이다. 만약 connect를 쓰지 않고 스마트 컴포넌트 안에서 리듀서안의 state 를 가져오려면 this.props.store.getState().리듀서이름.키 위 처럼 쓰게 되고 connect를 사용했을 경우에는 this.props.키 이렇게 가져올 수 있다.
-
Reactjs 2017‧06‧21
findDOMNode) is not a function 오류 발생시
import React, { findDOMNode, Component, PropTypes } from 'react'; 이런식으로 findDOMNode 를 한 뒤 참조를 아래처럼 설정할 경우 오류가 날 것이다. const node = findDOMNode(this.refs.input); 리액트 버전 15(일부 제외)부터는 findDOMNode를 쓰지 않고 바로 ref를 사용해도 된다. const node = this.refs.input; 바로 사용해도 된다.
-
Reactjs 2017‧05‧29
JSX - 마우스 오버/아웃 효과
마우스 오버와 아웃 효과에 따른 스크립트를 작성할 때 아래와 같이 JSX에서 엘리먼트 안에 넣어 주면 된다. <img src='icon.jpg' onMouseOver={(event) =>{ 마우스 오버시 스크립트}} onMouseOut={(event) => { 마우스 아웃시 스크립트 }} /> 바로 스크립트를 작성해 넣지 않고, 작성된 컴포넌트 안에 선언한 인수를 실행할 수도 있다. <img src='icon.jpg' onMouseOver={(event) =>{ this.handlerOver(event);}} onMouseOut={(event) => { this.handlerOut(event); }} /> […]
-
Reactjs 2017‧05‧24
props가 변경되어서 state를 업데이트(setState) 할 때
자식 컴포넌트가 부모로 받은 props 의 값들이 변경되었다. 변경됨을 감지하고 자식 컴포넌트안의 state 값을 변경(setState)하여 자식 컴포넌트 안의 함수 실행 또는 변수 정의를 그에 맞게 재실행하고 할 때가 있다. componentDidUpdate(prevProps, prevState){ if (this.props.tagList !== prevProps.tagList) { console.log('업뎃?') this.setState({ ...this.state, selectTagNum : -1 }) } } 이렇게 하면 props.tagList라는 값이 변경이 되었다면 this.state 안에 selectTagNum 은 […]
-
Javascript, jQuery, Reactjs 2017‧05‧18
Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기
모듈 설치 npm install --save-dev style-loader css-loader sass-loader node-sass cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자. 이제 아래 두가지 방식 중 선택하여 작업한다. 1. .css 파일을 뽑아내지 않고 React에 담는 방식 2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel="stylesheet" ... > 태그로 흔히 우리가 기본적으로 사용하는 그 방법) 1번 방식은 […]
-
Reactjs 2017‧05‧17
JSX - 엘리먼트를 단순 조건에 따른 렌더
JSX 상에서 조건문을 길게 쓰지 않고 단순하게 엘리먼트를 렌더링 할때 사용한다. 특히 true/false와 같은 조건으로 React 엘리먼트를 렌더할 때 편하다. <div> { this.state.logined && <Profile /> } </div> this.state ={ logined : true } 이면 <Profile /> 엘리먼트가 렌더 된다. <Profile /> 대신에 html 엘리먼트를 넣어도 된다. (<img src="./test.jpg" /> 이런 거) 공식 문서 […]
-
Tools 2017‧05‧17
아톰 에디터 - 자동 한줄 내림 취소 설정
코딩하는데 자꾸 얼마 안치고 한줄 밑으로 내려서 코딩된다. 우측 영역에 공간이 많은데도 계속 내려간다. 한줄 최대 글자 입력수가 얼마인지 어디서 설정하는지 모르지만 일단 스크롤이 생기더라도 우측 공간 활용을 위해 해당 자동 내림 기능을 제거해야겠다. Settings 의 Editor 안에 Soft Wrap 체크 아웃 하면 된다.(아래 그림처럼)
-
Reactjs 2017‧05‧12
스니펫용 함수형 컴포넌트 코드
import React from 'react'; const myFunc = () => { return( <div></div> ) } export default myFunc; state가 없거나 리액트 라이프 사이클에 관계없는 컴포넌트 만들 때 사용.