DTR web

JavaScript

네이버지도
구글지도기본
Angular 기본

페이스북 피드 긁어오기

페이스북에서 기본적으로 제공하는 Page 위젯으로도 페이지 피드를 뿌려줄수 있다.
하지만 커스터마이징을 위해 직접 페이스북 피드만 가져오는 방법이다.

$.ajax({
    type: "get",
    url: "https://graph.facebook.com//dovetorabbit/posts",
    data: "fields=id,message,created_time,type,object_id,picture,full_picture,link&access_token=엑세스토큰", 
    dataType : "json",
    success: function(msg) {
        console.log(msg);
        var content ='', d, nd;
        for (var i = 0; i < 5; i++) {
            content += '<li>';
            content += '<a target="_blank" href="'+msg.data[i].link+'">'+msg.data[i].message+'</a>';
            d = new Date(msg.data[i].created_time),
            nd = d.getFullYear()+'-'+(d.getMonth() + 1)+'-'+d.getDate();
            content += '<span>'+nd+'</span>';
        }
        $('.post-result__fbfeed').html(content);
    }
});

Result

# 트윈맥스 기본

TweenMax는 애니메이션 라이브러리다.
플래시 트윈맥스 제작자가 만들었으며, 쉽게 애니메이션 효과를 사용하게 해준다.
트윈맥스의 종류에는 TweenLight,TimelineLite,TimelineMax,EasePack,CSSPlugin이 있고 모두 포함되는
TweenMax.min.js 파일을 링크 시킨다.
Pure 스크립트로 사용할수도 있고 jQuery로도 사용이 가능하다.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

to 기본문법

CSS

.box {display:inline-block;position:relative;width:100px;height:100px;}
.red {background:red}

JavaScript

var ele = $('.box');
//TwieenMax.to(대상오브젝트, 시간, {속성})
TweenMax.to(ele,1.5,{width:100,height:100})

Result

선언된 형태로 CSS값을 변경해 준다.

to 기본문법 활용(CSS3)

JavaScript

var ele = $('.box');
TweenMax.to(ele,2,{scaleX:1.5,scaleY:2,rotation:120, ease:Power3.easeInOut })

Result

css3를 이용하거나 ease 효과를 적용가능하다.
ease 효과의 확인은 아래 사이트에서 가능하다.
http://greensock.com/ease-visualizer

to 기본문법 활용(delay,onComplete)

JavaScript

var ele = $('.box');
TweenMax.to(ele,2,{scaleX:1.5,scaleY:2,rotation:120, ease:Power3.easeInOut, delay:3, onComplete : function () {alert('Complete'); } })

Result

delay 옵션을 통해 실행을 지연시킬 수 있다.
onComplete 옵션을 통해 완료후 함수를 실행 시킬 수 있다.

to 기본문법 활용(repeat,repeatDelay)

JavaScript

var ele = $('.box');
TweenMax.to(ele,1,{width:300, repeat:-1, repeatDelay:1 });

Result

repeat 옵션을 통해 반복할 수 있고,
repeatDelay 옵션을 통해 반복시에 딜레이를 설정할 수 있다.
또한 yoyo:true 옵션을 통해 처음과 끝 모양의 반복이 가능하다.

from 기본문법

CSS

.box {display:inline-block;position:relative;width:100px;height:100px;}
.red {background:red}

JavaScript

var ele = $('.box');
//TwieenMax.from(대상오브젝트, 시간, {속성})
TweenMax.from(ele,1.5,{width:200})

Result

from 메소드에서 속성값은 요소의 초기값을 나타낸다.
위 효과는 Tweenmax.from 메소드가 실행될때 나타난다.
그외 기타 속성들은 to 메소드와 사용법이 같다.

# 네이버지도 기본

네이버 지도 기본으로 KEY 값이 필요하며, 커스텀 로고를 마커로 사용한다.

<div id="map" style="width:100%;height:400px;border:1px solid #000;"></div>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId={클라이언트 아이디}"></script>
<script>
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
	nhn.api.map.setDefaultPoint('LatLng');
	oMap = new nhn.api.map.Map('tci-map' ,{
		point:oPoint,
		zoom:10,
		enableWheelZoom:true,
		enableDragPan:true,
		enableDblClickZoom:false,
		mapMode:0,
		activateTrafficMap:false,
		activateBicycleMap:false,
		minMaxLevel:[ 1, 14 ]
});

var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
var marker = new nhn.api.map.Marker(oIcon);
marker.setPoint(oPoint);
oMap.addOverlay(marker);
</script>

Result

# 구글지도 기본

구글은 따로 키값이 필요하지 않다.
뒤에 language 파라미터에 국가코드를 전달하면 해당언어로 노출된다.

<div id="map2" style="width:100%;height:400px;border:1px solid #000"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.exp®ion=KR"></script>
<script>
function initialize(){
	var mapOptions = { 
		zoom : 16, 
		center : new google.maps.LatLng(37.5010226, 127.0396037), 
		scrollwheel : true, 
		mapTypeControl : false, 
		disableDefaultUI : true, 
		disableDoubleClickZoom : true, 
		draggable : true, 
		keyboardShortcuts : true, 
		maxZoom : 18, 
		minZoom : 1 
	};

	var map = new google.maps.Map(document.getElementById('map2'), mapOptions); 

	var image = 'http://static.naver.com/maps2/icons/pin_spot2.png'; 

	var marker = new google.maps.Marker({ 
		map : map,
		position : map.getCenter(), 
		icon : image 
	});
	google.maps.event.addDomListener(window, "resize", function() { 
		var center = map.getCenter();
		google.maps.event.trigger(map, "resize");
		map.setCenter(center); 
	});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Result

# Angular 기본

Google에서 개발한 프론트엔드 프레임워크.
Angular 공식 홈페이지에 있는 QuickStart를 기준으로 작성.
기본설치 : NodeJs, NPM

1.프로젝트 폴더 생성

mkdir angular2-quickstart
cd    angular2-quickstart

2.패키지 정의와 설정 파일 생성

기본 파일에는 4가지가 필요합니다.
package.json 필수패키지와 명령어를 등록하는 파일.
tsconfig.json TypeScript 파일을 JS 파일로 컴파일시 설정하는 옵션 파일.
typings.json JS 라이브러리들의 타입 정보를 내려받게 도와주는 툴.
systemjs.config.json NPM으로 설치된 모듈들을 관리해 주는 파일.

2-1.package.json

scripts 사용할 명령어 들을 정의.
dependencies 필수 패키지들을 정의.
devDependencies 개발 필수 패키지들을 정의.

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

2-2.tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

2-3.typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

2-4.systemjs.config.json

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

위 4개의 파일을 만들고 npm install을 하면, package.json에 선언되어 있는 필수 패키지들이 설치된다. 이제 app폴더를 만들고 실제 앱을 코딩한다.

3.app.component 작성

import { Component } from '@angular/core'; //angular 모듈을 호출
@Component({ //Decorator
  selector: 'my-app', //selector
  template: 'My First Angular 2 App' //template
})
export class AppComponent { }

4.main 작성

angular js를 로드하고, 호출할 모듈을 지정한다.

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

5.index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); }); //system 파일 호출
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

6.Run

npm start