•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
KGC Sports site renewal
KOURSS.org
esoom agency
Samsung Thunders site renewal
Kia motors Stage Motion Graphic
TOYOTA PRIUS 2016
Nike Tech Studio
TOYOTA KOREA website renewal
MOBIS Carfe Intro Movie
아빠..손 따뜻해..
아빠 손은 노아의 방주인가요?
이불 덮고있는 졸망이
거품 샤워중인 졸망이
아빠 이렇게 내려가면 되는건가요?
이건 훌라후프인건가요..
음…아빠! 아빠가 빠뜨린게 있어~!
아빠 손에 뭔가 있어?!
참 똘똘하게 생긴 졸망이
 

My Study Note

실무에 필요하거나 공부중인 내용들을 등록합니다.

css3 animation 키프레임 멈추기

CSS3로 키프레임 애니메이션을 작동하다가 멈추고 싶을 때가 있다. 대부분 hover나 Class 를 추가하여 멈추는 동작을 넣고 싶을 경우다. 맨 마지막 줄에 -webkit-animation: none 이 있는 이유는 아이폰 ios 사파리에서 paused; 동작이 제대로 작동하지 않는다.  그렇기 때문에 대안으로 만들어진 코드이다.

... 2017/08/01

php – 배열에 값 추가하기

array_push 써서 배열의 마지막에 추가한다.  

... 2017/07/28

php 디버깅 할 때 배열,객체 값 콘솔로 확인

자바스크립트로 종종 console.log 나 console.dir 을 써서 데이터를 확인하는데 php에서는 따로하는 방법을 못찾았다. 그래서 자바스크립트로 연결해서 확인하는 용도로 아래 코드를 썼다.  

... 2017/07/28

php 문자열에서 숫자만 치환 (정규식 포함)

숫자만 남기고 나머지는 삭제하고 싶을 때  

... 2017/07/28

배열안에 해당 값이 존재하는지 체크

배열속에 특정 값이 존재하는지 확인할 때 사용한다. 자세한 추가 설명은 php.net에서 http://php.net/manual/kr/function.in-array.php

... 2017/07/27

리액트 라우터 v4 와 코드 스플리팅

리액트는 알다시피 한번에 모든 페이지 정보가 스크립트로 들어감. 그러다보니 방문하지 않을 페이지의 코드까지 로드하니 비효율적일 때가 있다. 해당 페이지로 라우팅되었을 때만 그 페이지 코드를 불러오게 해보자. 사용된 모듈은 react, react-dom, react-router-dom 이다. 리액트 라우터는 v4다. app.js (html에서 불러오는 코드 파일이다.) 여기에 보면 ./lib/asyncRoute 를 불러와서 외부 파일 ...

... 2017/07/21

코드 스플리팅을 위한 webpack.config.js , 패키지들

이번에 webpack3, react router v4로 접하면서 코드 스플리팅을 위한 작업을 했다. 설치한 패키지들은 package.json으로 파악하고 설치하면 된다. package.json 의 설치 모듈들 webpack.config.js 일단 이렇게 설정하고 코드 스프라이팅 빌드 해보니 오류는 없어졌다.  실제 확인해보니 코드도 문제없이 생성되었다. 환경설정은 이렇게 해놓고 코드 스프라이팅과 리액트 라우터 v4를 더 해본 ...

... 2017/07/21

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

... 2017/07/18

이미지 태그에 .svg 파일 넣었는데 브라우져에서 깨져 나올 때

마크업에서 <img src='test.svg'> 이렇게 넣었을 때 로컬 호스트에서는 문제 없었지만 실제 서버에 올렸을 때 이미지가 깨져서 안나올 때가 있다. 그럴 때는 서버의 루트쪽에 있는 .htaccess 파일을 열어 상단에 아래 코드를 넣어주면 된다.  

... 2017/07/14

react REDUX – connect 유무에 따라 리듀서 안의 값 가져오기

이런 식으로 스마트 컴포넌트를 연결할 것이다. 만약 connect를 쓰지 않고 스마트 컴포넌트 안에서 리듀서안의 state 를 가져오려면 위 처럼 쓰게 되고 connect를 사용했을 경우에는 이렇게 가져올 수 있다.

... 2017/06/22

findDOMNode) is not a function 오류 발생시

이런식으로 findDOMNode 를 한 뒤 참조를 아래처럼 설정할 경우 오류가 날 것이다. 리액트 버전 15(일부 제외)부터는 findDOMNode를 쓰지 않고 바로 ref를 사용해도 된다. 바로 사용해도 된다.

... 2017/06/21

JS – 클로저를 쉽게 이해해보자 (병맛 주의)

자바스크립트에서 클로저가 궁금해졌다. 이유는 독학으로만 익혀온 개발이기 때문에 이런 명칭에 생소했기 때문이다. 클로저(Closure) 는 사실 새로운 문법이나 방법도 아니다. 어찌보면 활용하는 방법에 대해서 정의내려진 것 같다. 이해를 돕고자 이미지를 사용해봐야하는데... 이 예제가 제대로 예제가 될 지 나름 걱정이다. 자! 우리는 일단 우리를 스나이퍼라 칭하자. 코딩 전투에 나가는 ...

... 2017/06/14

JSX – 마우스 오버/아웃 효과

마우스 오버와 아웃 효과에 따른 스크립트를 작성할 때 아래와 같이 JSX에서 엘리먼트 안에 넣어 주면 된다. 바로 스크립트를 작성해 넣지 않고, 작성된 컴포넌트 안에 선언한 인수를 실행할 수도 있다.  

... 2017/05/29

props가 변경되어서 state를 업데이트(setState) 할 때

자식 컴포넌트가 부모로 받은 props 의 값들이 변경되었다. 변경됨을 감지하고 자식 컴포넌트안의 state 값을 변경(setState)하여 자식 컴포넌트 안의 함수 실행 또는 변수 정의를 그에 맞게 재실행하고 할 때가 있다. 이렇게 하면 props.tagList라는 값이 변경이 되었다면 this.state 안에 selectTagNum 은 -1로 변경할 수 ...

... 2017/05/24

Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기

모듈 설치 cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자. 이제 아래 두가지 방식 중 선택하여 작업한다. 1. .css 파일을 뽑아내지 않고 React에 담는 방식 2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel="stylesheet" ... > 태그로 흔히 우리가 기본적으로 사용하는 ...

... 2017/05/18

JSX – 엘리먼트를 단순 조건에 따른 렌더

JSX 상에서 조건문을 길게 쓰지 않고 단순하게 엘리먼트를 렌더링 할때 사용한다. 특히 true/false와 같은 조건으로 React 엘리먼트를 렌더할 때 편하다. this.state ={ logined : true } 이면 <Profile /> 엘리먼트가 렌더 된다. <Profile /> 대신에 html 엘리먼트를 넣어도 된다.  (<img src="./test.jpg" /> 이런 ...

... 2017/05/17
.