•  
  •  
  •  
  •  
 
2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Hold Holic
2013 Korea Mobile Ad Awards
K2 shop Flash Update
MOBIS Carfe Intro Movie
Impress Media FB App
MOBIS Carfe E-Catalog
K2 flash ebook solution
KT Season Update
KOURSS.org
바구니 안에 들어가있는 졸망이
아빠 손은 노아의 방주인가요?
오잉? 이건 뭐지?
먹이로 유인하다
난 졸망이라고 함!
이불 덮고있는 졸망이
음…아빠! 아빠가 빠뜨린게 있어~!
아빠 날개가 되어줘! 난 날을꺼야~
참 똘똘하게 생긴 졸망이
 

My Study Note

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

jQuery – 체크된 라디오 버튼 선택

  이렇게 그룹된 라디오 버튼이 있을 때 선택된 것이 있는지 체크하려면 아래 선택자를 활용하자.  

... 2017/08/31

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
.