본문 바로가기

Javascript139

webassembly에 대하여 작년 6월부터 webassembly에 대한 관심이 생겨서 지켜보고 있었다.webassembly란 간단하게 말해서 C, C++의 native 언어로 짠 프로그램을 웹에서도 동일한 속도로 돌려보겠다고 하는 프로젝트이다.그래서 순서는 먼저 C, C++로 코딩을 한 다음 컴파일을 통해 최종적으로 바이너리코드 비슷한 wasm 파일을 만든다.그리고 wasm 파일을 js의 함수를 통하여 웹에서 실행시켜준다.이렇게 실행시켜보면 웹에서도 엄청나게 빠르게 돌아가는 것을 볼 수 있다.그 속도차를 확연히 느낄수 있는 예제가 바로 아래 비디오 영상처리 앱 예제이다. https://d2jta7o2zej4pf.cloudfront.net/ 위 예제를 보고 정말 까무러치게 놀랐다.이젠 웹이서도 이런게 가능하구나 하고 말이다.지금 wa.. 2017. 6. 22.
survey.js validation 이벤트 사용하기 survey.js에는 다양한 이벤트 함수들이 존재한다.그중 최근 프로그램을 만드는데 필요할뻔했던 이벤트가 있어 소개하려한다. validation 이벤트인데, 본 이벤트를 통하여 어떠한 필드의 입력조건을 선택할 수 있으며,그 필드가 조건을 만족하지 못했을때 에러문구도 띄울수 있다.이러한 validation 이벤트는 아래의 링크에 예제와 함께 잘 정리되어 있다. http://surveyjs.org/examples/jquery/validators-standard/ (그런데 결론적으로 본 이벤트를 사용 안 하고 다른 방법으로 문제를 쉽게 해결하였다.ㅅ.) 2017. 6. 21.
synaptic.js 사용하기 최근 인공지능을 이용한 시각화를 구현해 보고자 synaptic.js 라이브러리를 이용해보았다.하면서 느낀건 예제가 많이 없다는 점과 뉴럴네트워크에 대한 개념이 약하다는 거였다. 그나마 쉬우면서도 잘 나와있는 예제가 아래의 두 링크다. http://progur.com/2016/09/how-to-create-and-use-neural-networks-in-javascript.html http://progur.com/2016/09/how-to-create-deep-neural-networks-in-javascript.html 하지만 애초에 개념이 없으니 라이브러리를 사용하는것에도 문제가 있다 생각하고,유튜브를 통해 뉴럴네트워크에 대한 강좌를 들어보았다. 아래는 그 강좌의 링크를 정리해 놓은 것이다.(생각보다 .. 2017. 6. 20.
무한스크롤 구현하기 최근 만들고 있는 웹사이트에서 메세지 확인페이지를 만드는 도중 무한스크롤 기능을 사용하고픈 마음이 생겼다.그래서 두려움과 떨리는 마음을 이끌고 구현 방법을 찾아보니 생각보다 어렵지 않아서 감사했다.ㅅ. 아래의 링크에 무한스크롤 구현방법이 간다하면서도 잘 나와있다. https://velopert.com/1890 2017. 6. 19.
GSAP 애니메이션 ease 옵션 GSAP는 ease 애니메이션 효과를 다양하게 쓸 수 있는 옵션을 제공해준다.먼저 아래의 링크를 보면 다양한 ease에 관련한 코드와 이미지를 서비스해주는 것을 볼 수 있다. https://greensock.com/ease-visualizer 본 서비스에서는 Power0, Power1, Power2, Power3, Power4, Back, Elastic, Bounce, Rough, SlowMo, Stepped, Circ, Expo, Sine, Custom의 객체을 제공하고 있으며,각각의 객체의 easeIn, easeOut, easeInOut 들은 각기 다른 결과를 보이게 된다.(결과는 그래프로 확인할 수 있다.) 아마 이러한 다양한 애니메이션 ease 옵션때문에 많은 사람들이 GSAP를 사용하지 않을까 .. 2017. 6. 14.
jquery autocomplete 의 초반 width값 조정 jquery autocomplete을 쓰다보면 초반에 input 텍스트 하고 select box의 길이가 맞지 않는경우가 종종 발생한다.이럴때 jquery를 써서 css를 수정한다 하여도 그 길이가 변하지 않는다.(아마 jquery autocomplete의 js가 우선적으로 적용되는거 같다.) 그래서 jquery autocomplete의 옵션을 쓰지 않고서는 본 select box의 스타일을 변경하기란 쉽지 않은데,다행이도 이 문제를 위해 open이라는 옵션을 제공해주고 있다. 자세한 사용 방법은 아래의 링크를 참고하면 된다. http://jsfiddle.net/salman/gP7Ns/ 2017. 6. 14.
GSAP 예제 사이트 GASP를 처음 접하는 분들은 본 라이브러리를 통해서 무엇을 할 수 있을지 궁금할 것이다.물론 HTML 애니메이션 라이브러리이지만 실질적으로 다른 라이브러리와 비교하여,사용하는 방법이라던지 성능의 차이가 궁금할 것이다. GASP를 쓰면서 동시에 구글링을 하다가 찾게 아래의 링크를 찾게 되었는데,본 링크를 통해서 앞서말한 궁금증을 어느정도 해결할 수 있었다. http://hwaba.nflint.com/lab/tween/ 관심이 있는 사람은 참고하면 좋다.ㅅ. 2017. 6. 12.
tweenMax에서의 yoyo 속성 GASP에의 tweenMax 애니메이션 기능 속성중에 yoyo 속성이 있다.지금까지 여러 애니메이션을 사용해 보면서 yoyo란 속성은 처음 받기에 한번 사용해 보았다.그런데 yoyo속성은 진행했던 애니메이션을 다시 되돌리는 속성이었다.말그대로 우리가 어릴때 즐겨했던 요요다. ㅋㅋ tweenMax의 여러 애니메이션 속성을 사용하고 있는데, 정말 유용한게 많다.그리고 삼성이 이 기업을 후원해주고 있어서 새삼 놀랐다.ㅅ. yoyo 속성에 대한 자세한 설명은 아래의 링크를 참조하면 된다. https://greensock.com/docs/#/HTML5/All/TweenMax/yoyo/ 2017. 6. 10.
GSAP에 대하여 2년전 GASP란 라이브러리에 대해서 찾아본적이 있다.본 라이브러리에는 HTML과 flash의 수많은 애니메이션 기능을 담고 있다.처음에 보고 너무 매력적이라 사용하려 했지만당시 회원제 유료였기에 사용을 접었었다. 지금 다시 사용해 보니 유료도 많이 풀리고 기능도 많아짐을 알 수 있었다.물론 라이선스 비용은 존재하는것 같다. 여튼 앞으로 본 라이브러리를 통해서 몇가지 작품을 많들어볼 생각이다.GASP 라이브러리는 다양한 기능에 비해 사용방법이 매우 간단하다. 자세한 정보는 아래의 링크를 참고하면 된다. http://www.beautifulcss.com/archives/2960 2017. 6. 10.

티스토리툴바