Ryu.log

Hooks 사용법 Hooks는 React에서 Component를 함수형으로 개발 하도록하기위해 새로 만들어 졌다. Hooks를 사용하면 함수형 컴포넌트를 사용하면서도 State제어가 가능하다. 또한 Class형 Component에 비해 획기적으로 코드량이 확연하게 줄어든다. React에서는 기존 Class방식의 Component가 아닌 Hooks를 권장한다. useState hooks에서 state를 다룰때 사용된다. import React, { useState } from 'react'; const App = () => { const [check, setCheck] = useState(0); const onClickEvent = () => setCheck(check + 1); return ( Hooks..

webpack 설정 파일 정리 React를 사용하려고 웹팩을 쓰려하면 핵심 파일인 webapck.config.js파일의 설정값이.. 작성하려 할때마다 까먹는다.. 자꾸 까먹다보니 자꾸 다시 검색을 하게되고... 악순환 그래서 각 속성들의 역할들을 정리 해놓는다. package.json 먼저 package.json파일에 어떤 디펜더시가 들어가는지 확인해본다. // packaage.json file { "name": "Webpack Setting", "version": "1.0.0", "description": "Webpack Setting", "main": "index.js", "scripts": { "dev": "webpack" }, "author": "Junho Ryu", "license": "ISC"..

AutoComplete.js Demo : https://ryujun.github.io/demos/JavaScript/AutoComplete/ Github : https://github.com/RyuJun/AutoComplete.js AutoComplete.js는 es6++ 문법으로 작성된 input박스 자동완성 module이다. 초성검색, 중단검색, 전체검색 등을 지원하며 각종 검색 Search Bar 구현에 사용 될 수 있다. 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 설치 및 사용방법 일반 웹 페이지 웹 페이지에서 사용하려면 html파일 ... AutoComplete.js는 es6++문법으로 작성되어 ie에서 작동하지 않는다. AutoComple..

유효성 검사할때 등등, 업무중 꽤 많이 쓰는데, 항상 찾기 귀찮아서 한글, 영어, 숫자, 특수문자 구분 정규식을 모아보았다. 한글,영어,숫자,특수문자 구분 정규식 모음 var check_num = /[0-9]/; // 숫자 var check_eng = /[a-zA-Z]/; // 문자 var check_spc = /[~!@#$%^&*()_+|?:{}]/; // 특수문자 var check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크사용방법 test() 함수를 이용하면 boolen 값을 얻을 수 있다. check_num.test(str); //숫자 return 값 true / false check_eng.test(str); //영문 return 값 true / false check_spc.test(..