•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Mobis Phoebus site renewal
Nike Tech Studio
Korea Web Design
HYUNDAI Department Store, PanGyo
KGC Sports site renewal
esoom agency
Hold Holic
Seoul Cinema mobile web open
Character illust for iPhone
꼬리들고 자는 졸망이
난 졸망이라고 함!
음…아빠! 아빠가 빠뜨린게 있어~!
아빠 손에 뭔가 있어?!
아빠 이렇게 내려가면 되는건가요?
오잉? 이건 뭐지?
잠은 편하게 자야지~
내려오려고 하는 올망이
아빠 날개가 되어줘! 난 날을꺼야~
 

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

아톰 에디터 – 자동 한줄 내림 취소 설정

코딩하는데 자꾸 얼마 안치고 한줄 밑으로 내려서 코딩된다. 우측 영역에 공간이 많은데도 계속 내려간다. 한줄 최대 글자 입력수가 얼마인지 어디서 설정하는지 모르지만 일단 스크롤이 생기더라도 우측 공간 활용을 위해 해당 자동 내림 기능을 제거해야겠다. Settings 의 Editor 안에 Soft Wrap 체크 아웃 하면 ...

... 2017/05/17

스니펫용 함수형 컴포넌트 코드

state가 없거나 리액트 라이프 사이클에 관계없는 컴포넌트 만들 때 사용.

... 2017/05/12

스니펫용 기본 컴포넌트 코드

컴포넌트 만들 때 스니펫으로 등록하려는 용도로 만든 기본 템플릿이다.  

... 2017/04/28

JS-호이스팅(hoisting)

갑자기 호이스팅이라고 들었을 때 무엇인지 궁금했다. 찾아보니 스크립트 작성할 때 이미 쓰고 있는? 혹은 자연스럽고 당연스럽게 쓰여지고 있었다. 독학의 단점은 이렇게 명칭이 뭔지 모를 때가 있고 가끔 개념 정리중에 누락된게 있다. 먼저 호이스팅 간단하게 정리하기 전에 함수 쓰는거에도 명칭이 있었더라 (난 필요에 따라 ...

... 2017/04/26

ReactJs – .propTypes, .defaultprops

prop 를 타입 선언과 기본 값 셋팅을 할 때 대소문자 주의해서 쓰자. const로 먼저 셋팅 선언하고, 하단에 실제 타입과 기본값 선언을 상단에서 설정한 셋팅값으로 가져온다. .propTypes 과 .PropTypes 에 대소문자 주의하자. 자주 헷갈려서 오류난다.

... 2017/04/24

ReactJs – 자동으로 프로젝트 생성/셋팅

이런 저런 설치와 설정없이 바로 리액트 프로젝트를 만들수 있게 해주는 플러그인이다. 참고 문서는 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html CMD 창에서 아무곳에서나 아래처럼 입력하여 글로벌로 설치한다. 이게 설치가 되면 이제 기본 리액트 셋팅이 된 환경을 만들어줄 수 있다. CMD 로 작업하려는 디렉토리에 가서 아래처럼 입력하자. 그러면 testreact라는 폴더가 생긴다. 그 안에 ...

... 2017/04/24

리액트에서 리스트 반복으로 버튼 만들 때 .map()

render(){}  안에서 작동시켜서 ContactinforLi 컴포넌트들이 반복적으로 랜더링 되게 한다.

... 2017/04/24

Immutability Helpers 간단 사용법

배열이나 객체 수정/추가/삭제를 용이하기 위한 리액트 플러그인. 공식 문서 : https://facebook.github.io/react/docs/update.html 문서내 선언 예를 들어 setState할 때 쓰려면 아래처럼 쓴다. $push : 추가 , $splice : 잘라내기, $set : 값 변경

... 2017/04/24

React – 02. 코딩하기 – 컴포넌트

리액트는 컴포넌트를 만드는게 중요하다. 컴포넌트... 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다. 컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다. ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다. 그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다. 지난 ...

... 2017/04/21

React – 01. 준비하기

완전 처음 접한다. 들어는 보았지만 어떻게 시작해야할지 찾아다니면서 엄청 해맸다. 내가 생각하기엔 결론은 두가지 방법이다. 중요한건 ES6, JSX다. 실서버에 올려놓고 ES6와 JSX를 변환을 하느냐?  아니면 올려놓기 전에 변환하고 올리느냐 라는 방식으로 난 구분했다. 올려놓고 번들링 하는 방식의 구축 방법은 http://yumere.tistory.com/78 그렇지 않고 로컬에서 npm으로 번들링하여 완성하고 구축하는 ...

... 2017/04/21

Gulp – 플러그인 설치 및 사용하기

gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자. 내가 하려는 자동화 작업은 이렇다. js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다. scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다. html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다. localhost로 ...

... 2017/04/11

Gulp – 시작전 준비하기

어제 Gulp(걸프)란 걸 접하고 구글링을 통해서 습득해보는 도중 적어놔야겠다 생각 들어서 정리를 해보려고 한다. (왼쪽은 Gulp 로고라고 하니 알아두자) Gulp는 처음 접하였고 Grunt도 들어는 보았지만 아직 해보진 않았다. 결론은 셋팅해두면 실무에 작업 하는데 도움이 되는 좋은 '자동 빌드 도구'이다. 본인은 이미 비슷한 도구로 ...

... 2017/04/11

JS – textarea 폰트 사이즈 변경

제이쿼리로 하면 간단하지만 자바스크립트로 폰트 사이즈를 직접 변경할 때 아래처럼 getElementById로 선택자를 선언하고 수정하면 된다. 만약 클래스값으로 선택하고자 한다면 getElementsByClassName('클래스명') 이렇게만 지정하면 오류난다.  못찾는다. getElementsByClassName('클래스명') 이렇게 순번을 넣어 개별적으로 선언해주어야 오류나지 않는다.  

... 2017/03/27
.