Ryu.log

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(..

회사에서 진행하였던 작업이며, 사이트의 Rolling 배너들을 효율적으로 관리하기 위해 제작된 slider plugin이다. Carousel.js Carousel.js는 es6++ 문법으로 작성된 Carousel module이다. slider, fade등의 기능들을 지원하며, 사이트의 배너 관리를 위하여 제작 Demo : https://ryujun.github.io/demos/JavaScript/Carousel/ Github : https://github.com/RyuJun/Carousel.js 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 ( ie9 에서는 transition이 적용 되지 않아서, Motion등이 default로 적용됨 ) 설치 및 사..

재미있는 작업을 해서 올려본다.. 회사에서 진행하였던 작업이며, Canvas를 통해 마치 복권을 긁는듯한 모션을 보여주는 js 모듈이다. Demo : https://ryujun.github.io/demos/JavaScript/lotteryScratch/ Github : https://github.com/RyuJun/lotteryScratch lotteryScratch.js lotteryScratch.js는 HTML5 canvas를 사용하여 제작되었다. 마치 복권을 긁는 듯한 이벤트를 처리해주는 자바스크립트 라이브러리 이며, 브라우저에서 각종 이벤트 페이지 제작에 사용될 수 있다. 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 설치 및 사용방법 일반 웹 ..

원시타입(primitive type)과 참조타입(reference type) JavaScript의 자료형에는 두가지 형태가 존재한다. 원시타입 (primitive type)과 참조타입(reference type) 두가지 타입이 존재하는데. 이 두가지 타입을 자세히 알아보자. 원시타입(primitive type) String, Number, Boolean, Null, Undefined와 같은 타입이며 ES6(ECMAScript 2015)에서Symbol타입이 추가되어 총 6개의 로 이루어진 타입이다. 원시타입은 메모리에 값을 그대로 저장한다. const a = 3100; let b = a; b = 3; console.log(a); // result 3100참조 없이 값이 변동되었을때 메모리에 값을 그대로 저..

highlight.js를 이용한 코드 하이라이팅 회사 업무도중 highlight.js 플러그인을 사용해야하는 상황이 생겼다. highlight.js는 코드의 하이라이트를 구현해주는 플러그인이다. 많은 언어와 다양한 스타일을 제공하고, 자동으로 언어를 감지하는 기능도 갖추고 있다. 현재 162개의 언어를 지원하며 CDN으로 이용시 22개의 언어를 지원한다. 검색 결과 CDN으로 사용하는 방법만 웹상에 가득해서, npm을 통한 모듈로서 highlight.js를 사용하는 방법을 기록해 놓는다. CDN 방식 먼저 CDN을 통한 highlight.js 사용방법은 아래 코드를 페이지 테그 사이에 위치시킨다. 기본적인 사용 방법은 페이지에 아래 코드를 입력하고 class부분에 언어를 넣어준다. body { backg..