-
Php 2017‧07‧27
배열안에 해당 값이 존재하는지 체크
배열속에 특정 값이 존재하는지 확인할 때 사용한다. $Array = array(1,2,3,4,5,6,7); if(in_array(7, $Array)) echo "있어요~"; 자세한 추가 설명은 php.net에서 http://php.net/manual/kr/function.in-array.php
-
Reactjs 2017‧07‧21
리액트 라우터 v4 와 코드 스플리팅
리액트는 알다시피 한번에 모든 페이지 정보가 스크립트로 들어감. 그러다보니 방문하지 않을 페이지의 코드까지 로드하니 비효율적일 때가 있다. 해당 페이지로 라우팅되었을 때만 그 페이지 코드를 불러오게 해보자. 사용된 모듈은 react, react-dom, react-router-dom 이다. 리액트 라우터는 v4다. app.js (html에서 불러오는 코드 파일이다.) import React, { PropTypes, Component} from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter , […]
-
Reactjs 2017‧07‧21
코드 스플리팅을 위한 webpack.config.js , 패키지들
이번에 webpack3, react router v4로 접하면서 코드 스플리팅을 위한 작업을 했다. 설치한 패키지들은 package.json으로 파악하고 설치하면 된다. package.json 의 설치 모듈들 devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "express": "^4.15.3", "html-webpack-plugin": "^2.29.0", "webpack": "^3.3.0" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.1.2" } webpack.config.js const webpack = require('webpack'); […]
-
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번 방식은 […]