•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Nike Tech Studio
werty wordpress blog build
Mobis Phoebus site renewal
HYUNDAI Department Store, PanGyo
d&c site renewal
Kia motors Stage Motion Graphic
Gillette Pop-up Store
Seoul Cinema mobile web open
KOURSS.org
먹이로 유인하다
거품 샤워중인 졸망이
실내화에 들어가서 안나오려고 하는 졸망이
행운이 뿌잉뿌잉 발사!!
오잉? 이건 뭐지?
이불 덮고있는 졸망이
아빠 손에 뭔가 있어?!
아빠 이렇게 내려가면 되는건가요?
어허! 어허! 아빠 거기 내 단추~
 

Javascript, jQuery

자바스크립트와 제이쿼리

JS-현재 위치(지오로케이션) 구글맵 api 에 표시

html5의 지오로케이션(geolocation)을 이용해서 위치를 가져온 후 구글맵에 넣는 코드 html에 아래 엘리먼트를 추가해 준다.   자바스크립트 부분에 아래 코드를 넣어준다.  

... 2017/10/16

JS-(페이스북 API) access token 가져오기

페이스북 API를 이용해서 개발하려고 할 때 access token을 요구한다. 개인 인증이 있고, APP 인증이 있다. 두 용도는 다르다.  개인의 아이디의 친구 목록이나 포스팅을 가져오려면 개인 인증을 이용하고,  APP은 아시다시피 페이스북의 APP이다.  그 앱이 게임에 들어가거나 소셜 로그인하거나 하는 운영하는 APP의 사용자들을 대상으로 ...

... 2017/10/16

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

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

... 2017/08/31

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

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

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

... 2017/06/14

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

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

... 2017/05/18

JS-호이스팅(hoisting)

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

... 2017/04/26

JS – textarea 폰트 사이즈 변경

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

... 2017/03/27

PC와 모바일에서 텍스트를 클립보드에 복사 시키기

현실적으로 ios와 안드로이드 및 pc를 만족시키는 클립보드 스크립트는 없다. 기기마다 또는 os 마다 보안 정의도 다르기 때문이기도 하다. 아무튼 이 모든 기기를 만족시켜주기 위해서 두개의 플러그인을 사용해서 이용해보았다. clipboard.js : https://clipboardjs.com/ copy2clipboard.js 자세한 사용법은 각 사이트를 참고하면 되고, 아래는 작성해본 코드이다. head 안에 넣어서 스크립트를 ...

... 2017/03/17

자바스크립트를 이용해 위도,경도를 주소로 변환하기

위도 경도 데이터는 있는데 이를 주소명, 지역명으로 변환하고 싶을 때 사용한다. API 키 발급과 정보 : https://developers.daum.net/services/apis/local/geo/coord2addr  

... 2017/03/02

체크박스 라벨을 이미지 만들었고 클릭해도 반응 없을 때

input  중에 checkbox를 만들고 checkbox는 안보이게 포지션 잡은 뒤 label안에 디자인된 체크박스를 넣었을 때 가끔 이 안의 이미지를 눌러도 checkbox 값이 변경되지 않는 경우가 있다. 이럴 때 스크립트를 넣어주자.  

... 2017/03/02

input에 숫자만 입력받기 (최종판을 위해…)

숫자만 입력받는 방법은 무수히 많다. 숫자외 문자를 입력하면 글이 안써지게 하는 코드 (아쉽게 한글은 완성형으로 해당이 안된다.) css로 ime-mode 를 disabled 해서 한글은 안써지게 하는 코드 (아쉽게 크롬은 반응이 없다.) 또 어렵사리 만들어 놓으니 초성만 쓰고 탭을 눌러 이동하면 그 초성이 input칸에 남아있다. 등등 ...

... 2017/02/23

JS – 모바일 접속 체크

 와와 같이 선언해준 뒤 사용할 때는 아래처럼 사용하면 된다. 모바일 체크를 2개 올렸는데 나는 이걸 좀 더 쓰는 편이다.

... 2017/01/13

크롬 브라우저 http 웹사이트에서 위치(지오로케이션) 가져오기 중단

크롬 브라우저에서 갑자기 위치 정보가 안들어오길래 찾아보니 이제부터 https의 사이트에서만 위치 정보 가져올 수 있게 업데이트 되었다고 합니다. 개인 위치 정보에 대한 보안 강화 취지인데요. 웹앱 만드시거나 모바일웹 만드실 때 지오로케이션 (geolocation) 쓰시는 개발 작업에 위 내용 유념하시면 좋을 듯합니다. 아래는 관련 구글의 ...

... 2017/01/11

JS – textarea의 글자들에 엔터값을 br태그로 변환

DB 데이터를 불러와서 노출하거나 textarea로 부터 입력받은 데이터를 DB에 저장하려 할 때 종종 쓰인다.  str이라는 변수에 textarea에서 입력받은 데이터가 있다면 엔터는 br 태그로 변환된다. 아래는 예제 미리보기이다.

... 2016/12/16

JS – datepicker(jQueryUI,달력) 이용시 두개 날짜 범위 설정

jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다. 특정 기간 범위 설정 특정 기간 범위만 활성화 시작 달력과 끝 달력에 ...

... 2016/12/12
.