본문 바로가기

Javascript - 이론 : 순수함수, 일급함수 순수함수 : 1. 들어오는 인자가 같으면 항상 동일한 결과를 리턴하는 함수.2. 함수가 받은 인자 외에, 다른 어떤 외부의 상태에 영향을 끼치지 않는 함수.3. 리턴값 외에는 외부와 소통하는것이 없는 함수. 일급함수 : 1. 함수를 값으로 다룰 수 있는 개념.
6. 함수형 프로그래밍 - pipe function reduce( $list, $fn, $memo ) { let memo = $memo; each( $list, ( $item ) => memo = $fn( memo, $item )); return memo; } function each( $list, $fn ){ for( let item of $list ){ $fn( item ); } } function pipe() { let fns = arguments; return ( arg ) => reduce( fns, ( arg, fn ) => fn( arg ), arg ); } let f1 = pipe( ( a ) => a + 1, ( a ) => a + 2, ( a ) => a * a ); console.log( f1( 1 )); console..
5. 함수형 프로그래밍 - reduce function reduce( $list, $fn, $memo ) { let memo = $memo; each( $list, ( $item ) => memo = $fn( memo, $item )); return memo; } function each( $list, $fn ){ for( let item of $list ){ $fn( item ); } } const add = ( a, b ) => a + b; const minus = ( a, b ) => a - b; console.log( reduce([ 1, 2, 3 ], add, 0 )); console.log( reduce([ 1, 2, 3 ], minus, 6 ));
Javascript - 클로져( Closure ) function getData( $key ){ let data = [ { name : "A", value : 37 }, { name : "B", value : 21 }, { name : "C", value : 15 }, { name : "D", value : 21 }, { name : "E", value : 33 } ] return ( $index ) => data[ $index ][ $key ]; } let name = getData( "name" ); console.log( name( 0 )); console.log( name( 2 )); console.log( name( 4 )); let value = getData( "value" ); console.log( value( 0 )); console...
4. 함수형 프로그래밍 - each const users = [ { isView : false, id : 1, name : "A", age : 36 }, { isView : true, id : 2, name : "B", age : 32 }, { isView : true, id : 3, name : "C", age : 31 }, { isView : false, id : 4, name : "D", age : 27 }, { isView : true, id : 5, name : "E", age : 25 }, { isView : false, id : 6, name : "F", age : 31 } ]; function filter( $list, fn ){ let nList = []; each( $list, ( $item ) => { if( fn( $..
3. 함수형 프로그래밍 - filter + map const users = [ { isView : false, id : 1, name : "A", age : 36 }, { isView : true, id : 2, name : "B", age : 32 }, { isView : true, id : 3, name : "C", age : 31 }, { isView : false, id : 4, name : "D", age : 27 }, { isView : true, id : 5, name : "E", age : 25 }, { isView : false, id : 6, name : "F", age : 31 } ]; function filter( $list, fn ){ let nList = []; let item; for( item of $list ){ if( f..
2. 함수형 프로그래밍 - map const users = [ { isView : false, id : 1, name : "A", age : 36 }, { isView : true, id : 2, name : "B", age : 32 }, { isView : true, id : 3, name : "C", age : 31 }, { isView : false, id : 4, name : "D", age : 27 }, { isView : true, id : 5, name : "E", age : 25 }, { isView : false, id : 6, name : "F", age : 31 } ]; function map( $list, fn ){ let nList = []; let item; for( item of $list ){ nList.pu..
1. 함수형 프로그래밍 - Filter const users = [ { isView : false, id : 1, name : "A", age : 36 }, { isView : true, id : 2, name : "B", age : 32 }, { isView : true, id : 3, name : "C", age : 31 }, { isView : false, id : 4, name : "D", age : 27 }, { isView : true, id : 5, name : "E", age : 25 }, { isView : false, id : 6, name : "F", age : 31 } ]; function filter( $list, fn ){ let nList = []; let item; for( item of $list ){ if( f..
Vue( Nuxt.js ) mapActions( store module ) 데모보기 pages/studymapactions/index.vue mapActions 버튼 {{ count }} import { mapActions, mapGetters } from "vuex"; export default { data(){ return{ count : 0 } }, methods : { show(){ // 기존 방식 // this.$store.dispatch( "studymapactions/setCount" ); this.setCount(); // 기존 방식 // this.count = this.$store.getters[ "studymapactions/getCount" ]; this.count = this.getCount; }, ...mapActions( "studymapactions"..
Vue( Nuxt.js ) mapMutations( store module ) 데모보기 pages/studymapmutations/index.vue mapMutations 버튼 {{ count }} import { mapGetters, mapMutations } from 'vuex';export default { data(){ return{ count : 0 } }, methods : { show(){ // 기존 방식 // this.$store.commit( "studymapmutations/setCount" ); this.setCount(); // 기존 방식 // this.count = this.$store.getters[ "studymapmutations/getCount" ]; this.count = this.getCount; }, ...mapMutations( "studyma..
Vue( Nuxt.js ) mapGetters( store module ) 데모보기 pages/studymapgetters/index.vue mapGetters 버튼 {{ item.txt }} import { mapGetters } from "vuex";export default { data(){ return{ list : [] } }, methods : { show(){ this.list = this.getList; } }, computed : { ...mapGetters({ getList : "studygetters/getList" }) }} .map_getters{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px; h1{ margin-bottom: 50px; } button{ width: 500px;..
Vue( Nuxt.js ) axios, promise 데모보기 npm install axios pages/studypromise/index.vue 버튼 출력값 : {{ name }} export default { data() { return{ name : "" } }, methods : { show() { let vm = this; this.$store.dispatch( "studypromise/setData" ) .then( function(){ let getData = vm.$store.getters[ "studypromise/getData" ]; vm.name = getData.name; } ); } }} .promise{ width: 500px; text-align: center; margin: 0 auto; padding: 100px 0; butt..
Vue( Nuxt.js ) Filter 데모보기 pages/studyfilter/index.vue Study Filter 확인 {{ index + '. ' + item.txt }} export default { data(){ return{ list : [] } }, methods : { showList() { this.list = this.$store.getters[ "studyfilter/getList" ]; } }} .studyfilter{ padding-top: 50px; width: 500px; margin: 0 auto; text-align: center; h1{ margin-bottom: 50px; } button{ width: 500px; text-align: center; font-size: 100px; margin-bottom..
Vue( Nuxt.js ) Vuex( Store ) Module 데모보기 pages/studystoremodule/index.vue STUDY STORE MODULE 버튼 {{ item.txt }} export default { data(){ return{ list : [] } }, methods : { getList(){ this.list = this.$store.getters[ "studystoremodule/getData" ]; } }} .study_store_module{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px; h1{ margin-bottom: 50px; } button{ width: 500px; font-size: 100px; padding: 20px 0; margin-bot..
Vue( Nuxt.js ) Vuex( Store ) 데모보기 pages/studystore/index.vue STORE {{ item.txt }} export default { data(){ return{ getList(){ return this.$store.state.list; } } }} .studystore{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px; h1{ margin-bottom: 25px; } ul{ li{ margin-bottom: 10px; } } } store/index.js import Vuex from 'vuex';const store = () => new Vuex.Store({ state : { list : [ { txt : "첫번째 리스트" }, { t..
Vue Plugin VueNuxt 데모보기 - StudyPlugin.js export default{ install( Vue ){ Vue.prototype.getMobileDevice = function(){ let mobileKeyWords = [ 'Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson' ]; let i = 0; let len = mobileKeyWords.length; for( i; i
Vue Mixin( 믹스인 ) VueNuxtMixin 데모보기 - index.vue import CounterButton0 from '~/components/studymixin/CounterButton0';import CounterButton1 from '~/components/studymixin/CounterButton1';import CounterButton2 from '~/components/studymixin/CounterButton2'; export default { components : { CounterButton0, CounterButton1, CounterButton2 }} .study_mixin{ text-align: center; padding-top: 10px; > div{ margin-bottom: 10px; ..
Vue TweenMax Slider Gallery NuxtVueTweenMax( gsap ) 데모보기 - index.vue import Slide from '~/components/slide/Slide.vue' export default { components: { Slide }} - Slide.vue 이전 다음 import SlideItem from "@/components/slide/SlideItem";import { TweenMax, Expo } from "gsap";export default { components : { SlideItem }, data(){ return{ index : 0, prevIndex : 0, isShow : false, list : [ { left : "0px", backgroundColor : '#ff0000' }, ..
아모레퍼시픽 현장 참여 이벤트 아모레퍼시픽 현장 참여 이벤트 jQueryRequestJSAjaxTweenMaxCanvasSVG - 구동 영상
React study page React test page https://github.com/JSzeronine/react_shany - 구동영상
호두잉글리시 스페셜 이벤트 사이트 호두잉글리시 스페셜 - 이벤트 페이지( PC ) jQueryTweenMaxRequireJSModule Pattern http://adqua.co.kr/ux/zeronine/hodoospecial - 구동 영상
펨퍼스 - Vue 펨퍼스 - 이벤트페이지( 반응형 ) Vue( framework )TweenMaxMixinVuePlugin http://www.pampers.co.kr/
신한금융투자 - 미니게임( PC ) 신한금융투자 - 미니게임( PC ) jQueryAjaxRequireJSModule PatternTweenMax http://adqua.co.kr/ux/zeronine/20181024_shinhan/
신한금융투자 - 미니게임( 모바일 ) 신함금융투자 - 미니게임( 모바일 ) jQueryAjaxRequireJSModule PatternTweenMax http://adqua.co.kr/ux/zeronine/20181024_shinhan/m_index.html
아모레퍼시픽 프로모션 아모레퍼시픽( 모바일 페이지 ) jQueryAjaxRequireJSSVGModule Pattern Mobile : http://adqua.co.kr/ux/zeronine/20180919_amore/m_index.html
빙그레 프로모션 빙그레 프로모션 - 모바일 jQuery,RequireJS,Module Pattern
호두 잉글리시 프로모션 호두잉글리시 - 프로모션 호두잉글리시 - 프로모션 투입인원 : 1명기여도 100%링크 : (모바일) : http://event.hodooenglish.com/cur - requirejs- scss- TweenMax.js
Vue CLI npm install --global vue-cli vue init webpack sample cd samplenpm installnpm run dev // npm run build
교보라이프플래닛 - 펫사랑 교보라이프플래닛 - 펫사랑 - 구동 영상 교보라이프플래닛 - 펫사랑 - 투입인원 : 1명 - 기여도 : 100%; - 링크( 모바일 ) : https://event.lifeplanet.co.kr - 사용자 참여 이벤트 - requirejs - scss - Ajax - Video - Youtube - TweenMax
삼성화재프로포즈 - 런닝맨 삼성화재 - 런닝맨! 이벤트 게임 페이지 - 투입인원 : 1명- 기여도 : 100%;- 링크 : 실서버 - http://www.sfpropose.com/promotion/campaign/17/game/테스트서버 - http://adqua.co.kr/ux/zeronine/20180328_game/ - 사용자 참여 이벤트- TweenMax- Mobule Pattern- MVC Pattern- scss - 구동영상
svg- loading bar See the Pen svg by kwan young choice (@jszeronine) on CodePen.
javascript prototype - 상속 function Parent(){} Parent.prototype.Show = function() { console.log( "Parent Show" ); // Parent Show 상속해서 사용 } function A(){} A.prototype = new Parent(); function B(){} B.prototype = new Parent(); function C(){} C.prototype = new Parent(); C.prototype.Show = function() { console.log( "C Show" ); // C 에서 Show 함수 캐치 } var a = new A(); a.Show(); var b = new B(); b.Show(); var c = new C(); c.Show();
삼성화재 - 슈퍼건치를 찾아라! 이벤트 게임 페이지 삼성화재 - 슈퍼건치를 찾아라! 이벤트 게임 페이지 - 투입인원 : 1명- 기여도 : 100%;- Mobile 링크 : https://www.adqua.co.kr/ux/zeronine/20190314_samsungminigame/ - 사용자 참여 이벤트- TweenMax- Mobule Pattern- MVC Pattern - 구동 영상
마인드브릿지 #뜻밖의스펙 영상 촬영용 마인드브릿지 #뜻밖의스펙 입력기 제작 - 구동 영상 - 촬영 영상 마인드브릿지 #뜻밖의스펙 촬영용 페이지 - 투입인원 : 1명 - 기여도 : 100%; - 링크 : https://www.youtube.com/watch?v=6HSElGEvzU4 - 사용자 참여 이벤트 - Video - TweenMax - Mobule Pattern - NodeJS - 소켓통신
마인드브릿지 #뜻밖의 스펙 마인드브릿지 #뜻밖의스펙 - 구동 영상 마인드브릿지 #뜻밖의스펙 - 투입인원 : 1명 - 기여도 : 100%; - 링크 : http://www.respectyourself.kr/ - 사용자 참여 이벤트 - Ajax - Video - Youtube - TweenMax - Mobule Pattern - MVC
교보 라이프 영상 캠페인 교보 라이프 영상 캠페인 - 투입인원 : 1명- 기여도 : 100%;- 링크 : https://event.lifeplanet.co.kr/m - 사용자 참여 이벤트- Ajax- Video- TweenMax- Mobule Pattern- MVC
React v16.0 https://reactjs.org/blog/2017/09/26/react-v16.0.html
React - IE9 에서 돌리기( core-j, babel-polyfill ) core-j ( https://github.com/zloirock/core-js ) 설치npm install core-js - index.jsimport "core-js/es6/map";import "core-js/es6/set"; babel-polyfill ( https://babeljs.io/docs/usage/polyfill/ ) 설치npm install --save babel-polyfill - index.jsimport "raf/polyfill";
Reactjs create-react-app // 글로벌 설치npm install -g create-react-app // hello 폴더로 생성create-react-app hello // hello 폴더로 이동cd hello // 테스트 서버 실행npm start // 빌드npm run build // 셋팅npm run eject
아이오닉( ionic ) - 스크롤값 : $ionicScrollDelegate controller( "", function( $ionicScrollDelegate ){ console.log( $ionicScrollDelegate.getScrollPosition().top ); });
아이오닉(ionic) 1 에서 Daum 우편번호 Api 사용하기( iframe, postMessage ) 다음 우편번호 API를 웹 전용 API이다.http:// 를 기준으로 동작을 한다. 아이오닉으로 앱을 제작하면file:// 로 기준이 잡혀버려서다음 우편번호 API가 오작동하는걸 발견하여, 다음 우편번호 API를 담고있는 html를 만들고iframe를 이용해서 화면에 출력 한 뒤, postMessage를 이용하여 부모에게 결과값을 전달하는 방식으로 만들었다. 1. 다음 우편번호 Api를 담을 html 파일을 만든다. - post.html DOCTYPE html> POST window.onload = function() { var map = document.getElementsByClassName( "map_container" )[ 0 ]; // 다음 우편번호 Api 생성 new daum.Postcode(..
아이오닉 로딩 - $ionicLoading angular.module( "starter.services", [] ) .factory( "Service", function( $ionicLoading ){ $ionicLoading.show(); setTimeout( function(){ $ionicLoading.hide(); }, 3000 );});
아이오닉 팝업창 - $ionicPopup alert angular.module( "starter.controllers", [ $ionicPopup ]) .controller( "Main", function(){ $ionicPopup.alert({title : "alert 창입니다."}); });
출근 지하철 시간 1시간 30분.퇴근 지하철 시간 1시간 30분. 왕복 3시간 약 1년 10개월간지하철에서만 읽은 책들.
QR - BarcodeScanner ng-cordova.min.js download https://github.com/ionic-team/ng-cordova/releases - index.html - app.js angular.module( "myApp", [ "ionic", "ngCordova" ]) - controllers.js angular.module( "myApp.controllers", [ "ngCordova" ]) .controller( "myApp-controller", function( $cordovaBarcodeScanner ){ $scope.showClick = function(){ $cordovaBarcodeScanner.scan().then( function( imageData ){ alert( imageData )..
$http 데이터 보내기 - params var data = { teamcode : "T01" }; $http({method : "POST",url : url,params : data,headers : {"Content-Type" : "application/json; charset=utf-8"}}).success( function( $data ){ console.log( $data ); }).error( function( err ){ console.log( err ); });
CORS 문제 해결 - proxy - ionic.config.json "proxies" : [{"path" : "/api","proxyUrl" : "url"}] - app.js .constant( "ApiEndpoint", {url : "/api"}) - services.js .factory( "Service", function( ApiEndpoint ){var url = ApiEndpoint.url; $http({method : "GET",url : url}).success( function( $data ){console.log( $data );}).error( function( err ){console.log( err );});})
Ionic DevApp 출시 핸드폰과 내 컴퓨터의 와이파이가 같다면개발 어플을 쉽게 실행시켜주는 어플이 출시되었다. http://blog.ionic.io/announcing-ionic-devapp/ 이곳에서 각각 OS에 맞는 어플을 받은 후, 1. ionic serve 실행2. 와이파이 설정3. 다운로드 받은 앱 실행. 4. 어플 실행 화면( 조금만 기다리면 알아서 어플을 연결한다. ) 5. 어플 연결 화면 6. 실행 화면
node_modules 재 셋팅 npm rebuild 각자 컴퓨터의 셋팅을 새로 설정해준다.
Video Tag Event loadstart브라우저가 미디어를 찾기 시작할때 발생 progress브라우저가 미디어 데이터를 가져오는 중에 발생 suspend브라우저가 현재 데이터를 전부 다 다운하지 않았는데 미디어 데이터를 가져오는 것이 멈췄을 때 발생 abort브라우저가 에러가 아닌 상황에서 미디어 데이터를 가져오는 것을 멈췄을 때 발생 error미디어 데이터를 가져오다가 에러가 발생햇을 때 발생 emptied미디어의 networkState가 NETWORK_EMPTY상태로 들어가게 되었을 때 발생( 치명적인 오류로 멈추거나, 이미 리소스 선택 알고리즘이 실행중이었는데 load() 함수가 호출되었을 때 ) play재생되었을 때, play() 함수가 리턴하고나서, autoplay로 인해 재생이 시작되었을 때 호출 pause미디어가 ..