FrontEnd

교보라이프플래닛 - 펫사랑

- 구동 영상 

교보라이프플래닛 - 펫사랑

- 투입인원 : 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

- 구동영상

See the Pen svg by kwan young choice (@jszeronine) on CodePen.

삼성화재 - 슈퍼건치를 찾아라! 이벤트 게임 페이지

- 투입인원 : 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

https://reactjs.org/blog/2017/09/26/react-v16.0.html

core-j ( https://github.com/zloirock/core-js )

설치

npm install core-js

- index.js

import "core-js/es6/map";

import "core-js/es6/set";

babel-polyfill ( https://babeljs.io/docs/usage/polyfill/ )

설치

npm install --save babel-polyfill

- index.js

import "raf/polyfill";

// 글로벌 설치

npm install -g create-react-app 

// hello 폴더로 생성

create-react-app hello

// hello 폴더로 이동

cd hello

// 테스트 서버 실행

npm start

// 빌드

npm run build

// 셋팅

npm run eject

controller( "", function( $ionicScrollDelegate ){

console.log( $ionicScrollDelegate.getScrollPosition().top );

});

다음 우편번호 API를 웹 전용 API이다.

http:// 를 기준으로 동작을 한다.

아이오닉으로 앱을 제작하면

file:// 로 기준이 잡혀버려서

다음 우편번호 API가 오작동하는걸 발견하여,

다음 우편번호 API를 담고있는 html를 만들고

iframe를 이용해서 화면에 출력 한 뒤,

postMessage를 이용하여 부모에게 결과값을 전달하는 방식으로 만들었다.

 1. 다음 우편번호 Api를 담을 html 파일을 만든다.

- post.html

2. postMessage 로 부모에게 결과값 던지기 ( post.html )

3. iframe 삽입 ( index.html )

4. 결과값 받기( controller.js )

angular.module( "starter.services", [] )

.factory( "Service", function( $ionicLoading ){

$ionicLoading.show();

setTimeout( function(){

$ionicLoading.hide();

}, 3000 );

});

angular.module( "starter.controllers", [ $ionicPopup ])

.controller( "Main", function(){

$ionicPopup.alert({

title : "alert 창입니다."

});

});

출근 지하철 시간 1시간 30분.

퇴근 지하철 시간 1시간 30분.

왕복 3시간

약 1년 10개월간

지하철에서만 읽은 책들.

ng-cordova.min.js download

https://github.com/ionic-team/ng-cordova/releases

- index.html

<script src="js/ng-cordova.min.js">

- 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 );

}, function( error ){

alert( error );

});

}

});

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 );

});

- 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 );

});

})

핸드폰과 내 컴퓨터의 와이파이가 같다면

개발 어플을 쉽게 실행시켜주는 어플이 출시되었다.

http://blog.ionic.io/announcing-ionic-devapp/

이곳에서 각각 OS에 맞는 어플을 받은 후,

1. ionic serve 실행

2. 와이파이 설정

3. 다운로드 받은 앱 실행.

4. 어플 실행 화면( 조금만 기다리면 알아서 어플을 연결한다. )

5. 어플 연결 화면

6. 실행 화면

npm rebuild

각자 컴퓨터의 셋팅을 새로 설정해준다.

loadstart

브라우저가 미디어를 찾기 시작할때 발생

progress

브라우저가 미디어 데이터를 가져오는 중에 발생

suspend

브라우저가 현재 데이터를 전부 다 다운하지 않았는데 미디어 데이터를 가져오는 것이 멈췄을 때 발생

abort

브라우저가 에러가 아닌 상황에서 미디어 데이터를 가져오는 것을 멈췄을 때 발생

error

미디어 데이터를 가져오다가 에러가 발생햇을 때 발생

emptied

미디어의 networkState가 NETWORK_EMPTY상태로 들어가게 되었을 때 발생( 치명적인 오류로 멈추거나, 이미 리소스 선택 알고리즘이 실행중이었는데 load() 함수가 호출되었을 때 )

play

재생되었을 때, play() 함수가 리턴하고나서, autoplay로 인해 재생이 시작되었을 때 호출

pause

미디어가 일시정지 되었을 때 발생( pause() 함수가 리턴 되고나서 발생 )

loadedmetadata

브라우저가 미디어의 길이와 넓이, 높이의 메타정보를 가져왔을 때 발생

loadeddata

브라우저가 현재 재생위치에서 미디어 정보를 뿌릴 수 있는 상태로 준비되면 발생

waiting

다음 프레임이 로드되지 않아서 재생이 멈추었을 때 발생, 브라우저는 곧 프레임이 가능해질 것이라고 예상하고 있음

playing

재생이 시작되었을 때 발생

canplay

브라우저가 미디어 데이터의 재생이 가능해질 때 발생, 하지만 지금 재생이 시작하면 이후 버퍼링 속도가 느려서 다시 멈추지 않고 재생이 불가할것이라고 측정함

canplaythrough

브라우저가 현재 재생을 시작하면, 버퍼링 속도와 재생 속도를 고려했을 때 끝까지 멈추지 않고 재생 가능할 것이라고 측정함

seeking

seek 동작이 길게 유지되어서 브라우저에서 이벤트 발생이 될정도가 되었을 때 발생

seeked

seeking이 끝나면 발생

timeupdate 

현재 재생위치가 바뀌었을 때 발생

ended

미디어의 끝에 도달해서 재생이 멈추었을 때 발생

ratechange

defaultPlaybackRate나 playbackRate의 속성이 변경되었을 때 발생

durationchange

duration 속성이 바뀌었을 때 발생

volumechange

volume 속성이 변하거나 muted 속성이 변했을 때 발생

삼성투모로우솔루션

- 투입인원 : 2명

- 기여도 : 80% 이상

- 링크 : http://www.tomorrowsolutions.org/

- 사용자 참여 페이지

- TweenMax

- Youtube API

- Ajax

- HandlebarsJS

매가박스 - 순간극장

- 투입인원 : 1명

- 기여도 : 100%

- 링크 : http://brand.megabox.co.kr/momenttheater

- 사용자 참여 이벤트 페이지

- TweenMax

- Video

- Ajax

- HandlebarsJS

- 페럴럭스

호두잉글리스

- 투입인원 : 1명

- 기여도 : 100%

- 링크 : https://event.hodooenglish.com/

- 사용자 참여 이벤트 페이지

- 페럴럭스

- TweenMax

매그넘

- 투입인원 : 1명

- 기여도 : 100%

- 링크 : 

- 이벤트 페이지

- Mobile Coding

- TweenMax

- Ajax

- swiper 직접 구현

DUO

http://adqua.co.kr/ux/zeronine/20170316/

제안 작업

TweenMax

K2 - NX

상품 페이지

페럴럭스

TweenMax

K2 - DX

상품 페이지

페럴럭스

시퀀스 이미지 모션 제어

TweenMax