[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)

IT 2014. 6. 18. 23:45

[ 기본 준비 ]

  • Android와 관련된 모든 준비(Andoird SDK, Java 설치 등)는 되어 있어야 한다.
  • Eclipse 중심으로 Android SDK 설치가 되어 있어야하고, Android Studio가 설치되있어도 된다.
  • Java는 1.6이상의 버전이 설치 되어 있어야 한다.
  • Java와 Android SDK에 대한 Path 설정이 되어 있어야한다.
    ex)
    JAVA_HOME : C:\Program Files\Java\jdk1.7.0_45
    Path : C:\Program Files\nodejs\;C:\Program Files\Java\apache-ant-1.9.4\bin;C:\Users\YMJ\android-sdks\tools;C:\Users\YMJ\android-sdks\platform-tools


[ Install Node.js ]



Node.js를 http://nodejs.org/ 에서 다운로드 받아 PC 또는 Mac에 설치합니다.

설치하신 후 Mac은 “Terminal”을, Window는 “Node.js command prompt” 을 관리자 권한으로 실행합니다.


[ Install ANT ]

ANT는 반드시 설치해야 됩니다.

그렇지 않으면 platform 설정 시 error가 발생할 수 있습니다.


1. Apache Ant(http://ant.apache.org/bindownload.cgi)에서 파일을 다운받습니다.

'Current Release of Ant' 아래에 있는 .zip archive를 받으면 됩니다.

2014.06.18 현재 'apache-1.9.4-bin.zip'이 최신버전입니다.



2. 적당한 위치에 압축을 풉니다.

ex)  C:\Program Files\Java\apache-ant-1.9.4


3. 환경 변수에 ANT의 bin 경로를 등록합니다. (각 폴더는 ';'으로 구분합니다.)

[제어판] - [시스템] - [고급 시스템 설정] - [고급 탭] - [환경변수]



Path : C:\Program Files\Java\apache-ant-1.9.4\bin



4. 커맨드(cmd) 라인에서 ant 를 입력하여, 잘 설치되었는지 확인해봅니다.

(ant -version : ant  설치 버전 확인)




[ Install git ]

[Error: Error fetching plugin: Error: "git" command line tool is not installed: make sure it is accessible on your PATH.] 라는 메세지가 나오는 경우 git이 설치 되지 않아서 보여지는 메세지이다.


이전 버전과 다르게 코드에서 이용하고자 하는 js API를 Git에서 선택적으로 추가해서 사용하는 구조이다.


1. 다음 홈페이지 ->(https://help.github.com/articles/set-up-git)에 들어가서 다운받습니다.



2. 다운 받은 파일을 설치합니다.

2.1. 설치 도중 다음과 같은 화면이 나타나는데, 여기서 2번째 선택사항을 눌러주세요.



 선택항목

설명 

Use Git Bash only

윈도우의 환경변수를 설정하지 않고 "Git Bash"툴 만을 사용
보통은 동작에 문제가 없다. 

Run Git from the Windows Command Prompt 

윈도우의 환경변수에 Git 환경변수를 설정한다.

Dos cmd창으로도 동작할 수 있게 한다. 

Run Git and include Unix tools from the Windows Command Prompt 

Dos Cmd로부터 Git및 Perl 등의 부속 unix 툴을 이용할 수 있도록 설정한다.

일반적으로 사용할 때에는 선택하지 마세요. 


2.2. 암호화 통신 설정

Git은 암호화 통신에 ssh를 이용하지만, SSH 클라이언트로서 PuTTy툴을 이용할 수도 있습니다. PuTTy를 이용하는 경우는 아래 그림에서 "Use PLink"를 선택하고, "PuTTy"에 포함되는 "PLink.exe"의 패스를 지정합니다.



3. "Git Bash" 프롬프트에서 버전을 확인 할 수 있습니다.

$ git --version




[ Install module for PhoneGap ]



> npm install -g cordova

> npm install -g phonegap

> npm install -g plugman

Node.js의 모듈로 cordova, phonegap, plugman을 설치합니다.

이는 해당 모듈을 이용해서 빌드하고 플랫폼을 추가하고 다양한 명령을 통해 보다 쉽게 개발 환경을 만들어줍니다.


[ Project Create ]

(프로젝트가 위치 할 디렉토리로 이동 후) 커맨드 창에서 새로운 프로젝트를 생성합니다.

> cd 디렉토리위치

> cordova create HelloWorld com.example.hello "hello"


생성 후, 디렉토리에 가보면 프로젝트가 생성된 것을 확인할 수 있습니다.



"hello" 프로젝트에 들어가보면 "platforms" 폴더가 비어 있는 것을 보실 수 있습니다.

이제 이 곳에 원하는 플랫폼(android platform)을 add 해줍니다.

(본인이 개발하고자 하는 플랫폼을 위와 같이 설치하면 해당 프로젝트의 생성이 완료됩니다.)

> cd hello

> cordova platform add android


설치가 완료되면, "platforms" 디렉토리에 android를 위한 프로젝트가 하나 add 된 것을 확인 할 수 있습니다.



이 후 Eclipse에서 Import('Existing Android Code Into Workspace')해서 사용하면 됩니다.


[ Plugin 설치 ]

프로그램에서 사용하고자 하는 플러그인을 추가한다.

3.0 이전버전까지는 기본 js파일에 모든 api가 내장되어 있었지만, 3.0부터는 필요한 것만 직접 추가해서 사용하는 방식이다.

> cordova plugin add <git-url>


(plugin url)

Basic device information :

$ cordova plugin add org.apache.cordova.device

Network Connection and Battery Events :

$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status


Accelerometer, compass, and geolocation :

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation

Camera, Media playback and Capture :

$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media


Access files on device or network(File API) :

$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.file-transfer

Notifications via dialog box or vibration

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibrationc

Contacts

$ cordova plugin add org.apache.cordova.contacts

Globalization

$ cordova plugin add org.apache.cordova.globalization

Splash Screen

$ cordova plugin add org.apache.cordova.splashscreen

Open new browser windows (In-app browser) :

$ cordova plugin add org.apache.cordova.inappbrowser

Debug console

$ cordova plugin add org.apache.cordova.console


저작자표시

'IT' 카테고리의 다른 글

[JS] 전문가교육 2일차 - 오후  (0) 2014.05.25
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,

[JS] 전문가교육 2일차 - 오후

IT 2014. 5. 25. 15:29

HTML5 + CSS3 + HTML5 API

            구조       표현       동작(JavaScript)



객체지향 자바스크립트(con.)


13. call & apply (★★★중요)

call과 apply는 jQuery 같은 프레임워크에서 굉장히 많이 쓰인다.

  • this가 가리키는 객체를 변경시킴
  • Function에 정의돼 있음
  • func.call(thisObj, arg#1, arg#1, ... arg#n)
  • func.apply(thisObj, [arg#1, arg#1, ...arg#n])
    - 배열로 전달 가능
  • func()로 호출해야하지만 func.call(), func.apply()로 호출 가능
    - call(), apply() 메서드 인자는 func() 메서드 인자로 전달된다.
16. 상속
  • 프로토타입 멤버 상속
  • 상속 통합 구현
  • 멤버 확장
    - 기존 언어(Java)의 extend를 흉내 내는 기법
    - Object의 prototype에 추가해 놓고 사용
    모든 프로토타입은 Object의 prototype을 상속받는다. 따라서 Object의 prototype에 extend함수를 붙여주고 function으로 parent를 받고 for문에서 속성을 하나씩 빼와서 property에 저장을 하는데 속성의 갯수만큼 돈다. 근데 parent[property]를 현재 객체(this[property])에 저장하는 것이다.


18. 내장객체
  • Array
    var ar = [1,2,3,4,5];
    console.log(ar.length);    //5
    var data = ar.shift() //2,3,4,5
    var data2 = ar.unshift(0) //unshift는 할당문이 필요 0,1,2,3,4,5
    ar.unshift(30);
    console.log(Ar.length);    //5

    무엇을해도 ar은 변하지 않는다. 이런 것을 "Mutable"하다라고 한다.
    배열의 크기는 늘릴 수 없다. 왜냐하면 배열은 한번 선언할때 크기를 정하니까..
    Java의 경우 런타임 시간에 크기 선언을 한다. -> int[] a = new int[3];
    C의 경우에는 int a[3];이라고 선언을 하고 나중에 a = new int[5];라고하는 것은 방이 5개인 것을 새로 만든것이지 배열의 크기를 바꾼것이 아니다.
  • 정규표현식
  • JSON


19. 네임스페이스

  • 라이브러리의 독립성을 보장
  • 빈 객체를 하나 만들어준다.
    var People = {};



이벤트 프로그래밍

1. 이벤트와 이벤트 핸들러

  • 이벤트와 이벤트 핸들러 정의 및 종류
    - 이벤트(event)
    - 이벤트 핸들러(Event Handler)
      • 이벤트를 처리하는 기능
      • 이벤트 처리 루틴
      • HTML 문서에서 발생하는 이벤트는 onxxx 식으로 이벤트 핸들러 속성이 정의되어 있따.
        ex) 클릭 이벤트 : onclick
  • 이벤트 핸들링
    - HTML 태그의 속성으로 등록    //HTML태그와 이벤트 함수가 섞여서 비추천하는 방법
    ex) <input ........ onclick="handler()">
    - 요소 객체의 메서드로 등록
    ex) document.getElementById("options").onclick = function() { ...; }
  • 이벤트 핸들러
    - 함수의 인자로 event 객체가 전달됨, 함수 정의시 선언안해도 자동 전달됨
    - 이벤트 핸들러 코드에서 false를 반환하면 요소의 기본적인 액션을 취소시킨다.
      • event.preventDefault();와 같음

0123


event.html


Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p>여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p>여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>



2. DOM Level 2 이벤트 핸들링

  • 이벤트 핸들링
    - elem.addEventListener(string type, Function handler, useCqpture);
    • type : 핸들링 하고 싶은 이벤트. DOM Level0 의 이벤트 핸들러에서 on을 빼면 된다.
    • handler : 이벤트가 발생했을 경우 호출될 이벤트 핸들링 함수. 인자로 이벤트 객체가 전달된다.
    • useCapture : true일 경우 이벤트 버블링 현상일 캡처링 단계에서만 호출되도록 한다. false(default)일 경우 타겟 단계와 버블링 단계에서 호출됨.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
            var pElement3 = document.querySelector("p#two");
            pElement3.addEventListener("click", function() {
                this.textContent = "Hello~~";
            });
            
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p id="two">여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p>여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
            var pElement3 = document.querySelector("p#two");
            pElement3.addEventListener("click", function() {
                this.textContent = "Hello~~";
            });
            var pElement4 = document.querySelector("#four");
            pElement4.addEventListener("click", function() {
                alert(pElement3.textContent);
            });
            
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p id="two">여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p id="four">여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>



3. 이벤트 캡처링/버블링 예

캡처링 : 바깥에서부터 안쪽으로 이벤트가 처리된다

버블링 : 안쪽에서부터 바깥으로 이벤트가 처리된다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
        window.onload = function() {
            var elements = document.querySelectorAll("div");
            for(var i=0; i<elements.length; i++) {
//function(event)에서 event생략해도 자동으로 event들어간다.
                elements[i].addEventListener("click", function(event) {
                    console.log(this.getAttribute("id"));
                    event.stopPropagation();
                }, true);
            };
        };
    </script>
</head>
<body>
    <div id="a">AAAAAA
        <div id="b">BBBBBB
            <div id="c">CCCCCC
            </div>
        </div>
    </div>
</body>
</html>



5.

onoffline : 오프라인이면 로컬에 저장된걸 읽는다.

ononline : 온라인이면 서버에 올린다

저작자표시

'IT' 카테고리의 다른 글

[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)  (1) 2014.06.18
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,

[JS] 전문가교육 2일차 - 오전

IT 2014. 5. 25. 09:51

JavaScript 주말 전문가 교육의 2일차이자 마지막 날이다.


어제 교육의 review

JavaScript의 특징

- type 지정 키워드가 없다

- 숫자, 문자열, 논리(true, false(0, "", null, false, undefined, NaN(숫자 타입이 값이 지정되지 않았을 경우)))

- lexical 특성 : 전역변수로 선언되있던 것을 다시 지역변수로 선언했는데, 그것을 초기화하기 전에 사용했을 경우 undefined가 나오는 것.

var a=10

function doit() {

console.log(a);

var a=20;

}


- 함수

생성자함수의 역할

메소드의 역할

- 메소드 : 어떤 동작이 일어나게끔 하는 (behavior)


- 함수의 인자와 파라미터 개수는 꼭 같지 않아도 된다. 인자값이 모자라면 undefined, 넘치면 버려진다.

argument.length : 전달되는 인자의 개수



객체지향 자바스크립트

1. 클래스(Class) 기반 객체지향

  • 클래스 기반 객체지향 언어 : C++, C#, JAVA 등
  • 클래스 기반 객체지향 언어의 특징
    • 객체와 클래스의 개념 명확
    • 캡슐화(Encapsulation)
      • 정보 은닉을 위해 제공한다. 속성은 private로 제한, public 메서드를 통해 멤버에 접근하도록 함
      • 저장되는 값의 검증, 조회하는 콜러의 권한 체크 등이 메서드 안에 작성 가능하기때문에 메서드 이용
    • 집합(Aggregation or Composition)
    • 상속(Inheritannce) : 부모의 멤버(변수, 메서드)를 자식 클래스에서 상속받을 수 있고, 코드 재사용성을 높인다.
    • 다형성(Polymorphism) : 상속관계가 있는 상태에서 사용 가능하고, 부모타입으로 선언하면 참조시 상속관계가 있는 모든 개체를 참조할 수 있다.

2. 프로토타입(prototype) 기반 객체지향

  • 객체를 만드는 방법
    1. new와 Object(최상위 객체) 생성자를 이용
      * Object(언어차원에서 최상위 객체) 와 window(만들어진 객체?)

      ex)
          person = new Object();
          person.name = "MJ";
          person.age = 30;

    2. 사용자 정의 생성자를 이용
      ex)
          function Person(name, age) {
              this.name = name;    //속성 추가
              this.age = age;
              this.setName = function(newName) {    //메서드 추가
                  this.name = newName;
              }
          }
          var friend = new Person("KilDong", 25);

    3. 객체 리터럴을 이용
      ex)
          var person = {name: "Sunsin", age:35};    //JSON형식

    2번째 방법은 계속 값이 바껴서 저장되야할 때 좋고
    3번째 방법은 한번 값을 저장하면 되는 것일 때 사용하기 좋다.
    2번째 방법과 3번째 방법은 꼭 알아두는게 좋다.

Object 생성자 함수를 이용한 객체 생성




사용자 정의 생성자를 이용한 객체 생성



객체 리터럴을 이용 (JSON형식)


* http://json.org/

★★★ JSON 표현 형식

object
{}
{ members }
members
pair
pair , members
pair
string : value
array
[]
[ elements ]
elements
value 
value , elements
value
string
number
object
array
true
false
null
string
""
" chars "
chars
char
char chars
char
any-Unicode-character-
    except-"-or-\-or-
    control-character
\"
\\
\/
\b
\f
\n
\r
\t
\u four-hex-digits
number
int
int frac
int exp
int frac exp
int
digit
digit1-9 digits 
- digit
- digit1-9 digits
frac
. digits
exp
e digits
digits
digit
digit digits
e
e
e+
e-
E
E+
E-


3. 내장(built-in) 객체

  • 자바스크립트 타입 체계의 특징
    • 타입 체크를 수행하지 않는다
    • 객체 초기 구조는 결정
      • 자바스크립트의 생성자는 생성되는 객체의 최초 구조를 결정
        위에 예제에서 Person을 생성하면서 객체의 최초 구조를 결정한다고 볼 수 있다.
    • 객체 구조 변경
      위에 예제 Person(name, age)에서 꼭 name과 age만 들어가는걸까? 아니다.
      Runtime에도 속성을 언제든지 바꿀 수 있다.

4. 객체 정의 및 생성

  1. new Object
    객체를 생성하기 위해 함수를 호출할 때 new 사용
    new 다음에 나오는 함수를 생성자(constructor)라고 한다.
    Object도 함수다.
  2. 객체 리터럴
    객체 생성 구문으로 많이 사용
    { } 를 이용
  3. 함수 이용
    클래스 기반 언어에서 클래스 정의
    자바스크립트에서 클래스(생성자 함수) 정의


5. 객체 멤버



함수 내에서 바로 선언된 것(var 변수)을 비공개 멤버라하고, 이는 함수 밖에서 접근할 수 없다.




8. prototype, constructor, instance

★★★★★★ 완전 중요 ★★★★★★★


생성자 함수를 위한 공간이 실행코드 블록과 생성자(함수)영역으로 나뉜다.

인스턴스들은 함수 안에 this. 으로 선언한 속성들이 저장이된다.

프로토타입멤버의 프로토타입 속성은 생성자.prototype.속성 = 값; 으로 구현을 하는데..


01234


JavaScript는 클래스가 없어서 상속을 못하기때문에 prototype을 이용하는 것이다.

prototype에 뭔가를 추가하면은 instance에서도 추가가 되는 것이다.

멤버는 변수가 될수도있고 메서드가 될수도있다.



+ : 외부에서 참조 가능

- : 외부에서 참조 불가능


공개변수 영역 : 생성자를 직접 추가하거나 제거할 수 있다.

값을 저장하는 영역 : 변수 스코프 영역(-), 프로토타입 객체(+ : 프로토타입객체.xx로 참조가능), 공개변수 영역(+ : 함수이름.xxx로 참조 가능) 

constructor : 각각 상대를 의미한다. 즉 Person의 각각 객체를 의미

ex) Person.prototype.constructor = Person자바스크립트는 변수와 메서드 구분이 없다. 즉 변수가 추가되면 메서드도 추가가 가능하다는 소리이다.


salary라는 변수는 프로토타입 객체에도 있지만 friend라는 인스턴스에도 존재한다.(프로토타입 객체의 비대칭성)





9. prototype

  • 모든 생성자가 가지고 있는 공개 속성
  • 생성자를 통해 참조 가능(인스턴스를 통해 참조 불가능)
    - Person.prototype (o) / p.prototype (x)
  • 인스턴스 "is a" prototype 객체
    - 프로토타입 객체에 포함된 모든 멤버를 해당 생성자로 생성된 인스턴스에서 접근할 수 있다.
        Person.prototype.job
        p.job
    - 프로토타입 객체는 메모리에 정의할 때 한번만 생성된다.
    -프로토타입 멤버는 인스턴스 별로 복사본이 존재하는 것이 아니라 해당 생성자에 하나만 존재하면서 그 생성자의 모든 인스턴스가 함께 공유한다.
  • 프로토타입 멤버의 비대칭


10. constructor

  • Person.prototype (o) / friend.prototype (x)
  • Person.prototype.constructor = Person (o) / Person. constructor (x)
  • friend.constructor = Person (o)
  • 인스턴스를 가지고 생성자함수를 참조할수 있구나!

11. 객체 생성 과정

  • 프로토 타입 실체는 Object
  • 자바에서 최상위 객체는 Object이다. 자식이 만들어지기 전에 부모가 만들어져야한다.
  • 그러니까 Object가 만들어지고 그 다음에 Person생성자 내에서 this.name="KilDong"이 Object 인스턴스가 된다. 
  • 자동으로 __proto__가 생성된다. 이 속성이 참조하는 것이 Person prototype 객체이다
  • 그리고 Object는 this를 반환하는 형태이다.
12. this
  • this는 해당 함수를 호출하는 객체
  • 함수 안에서 쓰여진다.
  • 원래 this를 쓰려면 function Person(name) { this.name = name; } 이렇게 쓰는데
    //this.name = name 을 하고 var mySon = new Person("aaa")를 하면 aaa를 저장할 곳이 없다는 문제가 생기지만
    Person.prototype.setNewName = function(newName) { this.name = newName; } 과 mySon.setNewName("bbb"); 를 보면은
    mySon.setNewName("bbb")가 실행되면서 my
  • Q. line 12 이후 (어디에든) var urSon = new Person("ddd"); Console.log(urSon.name); 추가하고 결과값은??

    이유는 urSon이라는 인스턴스가 생겨나긴하는데, 이전에 저장되어있던 프로토타입을 가지고 와서 출력하기 때문에 "ccc"가 나온다.


저작자표시

'IT' 카테고리의 다른 글

[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)  (1) 2014.06.18
[JS] 전문가교육 2일차 - 오후  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,

티스토리툴바