본문 바로가기
반응형

JavaScript97

Javascript Node 객체 - 노드 변경 API 노드 변경 API 노드 추가 appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가 insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다. document.createElement(tagname) : 엘리먼트 노드를 추가한다. document.createTextNode(data) : 텍스트 노드를 추가한다. HTML CSS 노드 제거 노드 제거를 할때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행(.. 2020. 11. 20.
Javascript Node 객체 - 노드 종류 API 노드 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType : node의 타입을 의미한다. Node.nodeName : node의 이름 (태그명을 의미한다.) Node Type 노드의 종류에 따라서 정해진 상수가 존재한다. for(var name in Node){ console.log(name, Node[name]); } ↓ 결과 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NOD.. 2020. 11. 20.
Javascript Node 객체 Node 객체 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. 주요기능 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류 Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다. Node.nodeT.. 2020. 11. 20.
javascript Element 객체 - jQuery 속성 제어 API jQuery 속성 제어 API Element의 API에 해당하는 기능을 jQuery에서는 어떻게 구사 가능하다. 속성제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 'attr'이다. 또한 removeAttribute에 대응되는 메소드로는 'removeAttr'이 있다. 블로그 attribute와 property DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다. URL jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 이런 것이 라이브러리를 사용하는 의의라고 할 수 있다. ↓ jin seok 2020. 11. 19.
javascript Element 객체 - 속성 API 속성 API 속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 여기서 name은 class, href, title 등등의 여려 종류로 예를 들 수 하다. Element.getAttribute(name) : name의 속성의 값을 가져온다. Element.setAttribute(name, value) : name의 value값을 설정한다. Element.hasAttribute(name); : name 속성의 존재여부를 true, false로 판단한다. Element.removeAttribute(name); : name을 삭제한다. ↓ 예시 블로그 속성과 프로퍼티 모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 .. 2020. 11. 19.
javascript Element 객체 - 조회 API 조회 API 조회 API는 엘리먼트를 조회하는 기능이다. 지금까지 document.getElementsBy 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. html css JavaScript JavaScript Core DOM BOM 찾고자 하는 엘리먼트를 참조하는 객체를 생성("var active")한다. 이 생성한 객체에서 getElementsByClassName 메소드를 통해 HTMLcollection을.. 2020. 11. 19.
javascript Element 객체 - 식별자 API 식별자 API HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용되는데 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다. Element.tagName 해당 엘리먼트의 태그 이름을 알아낸다. 하지만 태그 이름을 변경하지는 못한다. html css JavaScript Element.id 문서에서 id는 단 하나만 등장할 수 있는 식별자다. 그 id의 값을 읽고 변경하게 한다. html css JavaScript Element.className 클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다. html css JavaScript Element.classList className에 비해서 훨씬 편리한 사용성을 제공한다. html css JavaScript 2020. 11. 19.
javascript Element 객체 Element 객체 Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. DOM의 계층구조에서 Element 객체의 위치는 아래와 같다. 주요기능 식별자 문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API .. 2020. 11. 19.
Javascript DOM - HTMLElement HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 예제1 HTML CSS JavaScript 위의 코드의 결과로 알 수 있는 것은 document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection 즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. 예제2 jin seok blog HTML CSS JavaScript 위 결과를 통해서.. 2020. 11. 17.
javascript DOM - jQuery jQuery이란? 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 중 하나이다. jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery의 사용 jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. jQuery를 로드하는 방법 의 jQuery 연동 링크는 jQuery 홈페이지에 들어가서 다운 받을 수 있다. 위의 코드의 결과는 Body 태그 아래에 jin seok 코드가 만들어진다. jQuery( document ).ready(function( $ ) 같이 {}로 감싸는 것이 이상적이다. jQuery로 제어 대상을 찾기 jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.. 2020. 11. 17.
javascript DOM - 제어 대상을 찾기 DOM이란? Document Object Model의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. document.getElementsByTagName getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는.. 2020. 11. 17.
javascript BOM BOM이란? BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 전역개체 Window Window 객체 Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다. 전역객체 Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. 위의 코드와 결과를 보면 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모든 객체는 사실 window의 자식이라는 것도 알 수 있다. 이러한 특성을 ECMAScript에서는 Global 객체라고 부른다. ECMASc.. 2020. 11. 17.
Javascript 참조 복제 var a = 1; var b = a; b = 2; console.log(a); 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로이다. 변수 b의 값에 변수 a의 값이 복제된 것이다. a을 b로 복제한 후에 a의 값을 변경한다고 이미 복제한 b가 변하는 것이 아닌 것처럼 생각하면된다. 참조 var a = {'id':1}; var b = a; b.id = 2; console.log(a.id); var a = {'id':1}; var b = a; b = {'id':2} console.log(a.id); 변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 된 것이다. 이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미하다. 하지만 b={'id':2.. 2020. 11. 16.
Javascript 데이터 타입 데이터 타입 데이터 타입이란 데이터의 형태를 의미한다. 데이터 타입은 크게 두가지로 구분할 수 있다. 객체와 객체가 아닌 것. 객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 한다. 그 외의 모든 데이터 타입들은 객체다. 숫자 문자열 불리언(true/false) null undefined 레퍼 객체 문자열과 원시 테이터 타입 var str = 'jin seok'; console.log(str.length); console.log(str.charAt(0)); 문자열은 분명히 프로퍼티와 메소드가 있다. 그렇다면 객체다. 그런데 왜 문자열이 객체가 아니라고 하는 이유는 내부적으로 문자열이 원시 데이터 타입이고 문자열과 관련된 어떤 작업을 하려고 할 때 자바스크립트는 임시로 문자열.. 2020. 11. 16.
Javascript Object Object Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. 동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다. Object 객체 확장 Object.prototype.contain = function(X) { for(var name in this){ if(this[name] === X){ return true; } } return false; } var o = {'name':'jin seok', 'city':'seoul'} console.log(o.contain('jin s.. 2020. 11. 16.
Javascript 표준 내장 객체의 확장 표준 내장 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp 내장 객체를 이용한 배열 값의 랜덤 추출하기 배열 확장 1 var arr = new Array('kim','jin','seok','25', 'Ma.. 2020. 11. 16.
Javascript 상속(inheritance)과 프로토타입(prototype) 상속 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 상속의 기본적인 예. function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototype.introduce = function(){ return 'My name is '+this.name; } var p1 = new Person('jin seok'); document.write(p1.introduce()+" "); .prototype이라는.. 2020. 11. 13.
Javascript this this this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 함수 호출 function func(){ if(window === this){ document.write("true"); } } func(); 위의 코드와 결과를 보면 func() 함수 안의 this는 func() 함수의 전역객체인 window인 것을 확인 할 수있다. 메소드의 호출 var o = { func : function(){ if(o === this){ document.write(.. 2020. 11. 13.
Javascript 전역개체에 대하여 전역개체 전역객체(Global object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. function func(){ document.write('jin seok'+''); } func(); window.func(); var o = {'func':function(){ document.write('jin seok'+""); }} o.func(); window.o.func(); func();와 window.func();는 모두 실행이 된다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다. 자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다. 전역개체 API ECMAScript에서는 전역객체.. 2020. 11. 13.
Javascript 생성자와 new 객체 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. var person = {} person.name = 'jin seok'; person.introduce = function(){ return 'My name is '+this.name; } document.write(person.introduce()); 위의 코드는 person이라는 객체와 밑의 코드들이 분리되어 있어 가독성이 떨어지고 중간에 다른 코드가 끼어있을 우려가 생긴다. 즉 객체를 만드는 과정에 분산되어 있다고 볼 수 있다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자. ↓ var person = { 'name' : 'jin se.. 2020. 11. 13.
Javascript 객체 지향 프로그래밍에 대하여 객체 지향 프로그래밍 객체지향 프로그래밍(Object-Oriented Programming)은 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 이 객체들을 마치 레고 블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체란 무엇인가를 이해하는 것이라고 할 수 있다. 객체지향 프로그래밍을 학습하는데 장애 중의 하나는 번역이다. Object를 번역한 객체는 현실에서는 거의 쓰지 않는 말이고, 객체는 변수와 메소드를 그룹핑한 것이다. 객체지향 프로그래밍 교육은 크게 두 가지로 구분된다. 문법.. 2020. 11. 12.
Javascript 함수의 호출 함수의 호출 JavaScript는 함수를 호출하는 특별한 방법을 제공한다. function func(){ } func(); 위의 코드에서 함수 func는 Function이라는 객체의 인스턴스(실행중인 임의의 프로세스)다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다. 대표적인 예로 메소드는 Function.apply과 Function.call이다. function sum(arg1, arg2){ return arg1+arg2; } alert(sum.apply(null, [1,2])) 위의 코드를 보면 함수 sum은 Function 객체의 인스턴스다. 그렇기 때문에 객체 Function 의 메소드 apply를 호출 할 수 있다. apply 메소드는 두개의 인자를 가질 수 있.. 2020. 11. 12.
Javascript 유사 배열 arguments arguments 이란? 함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 arguments배열에는 arguments을 품고 있는 함수를 호출할 때 입력한 인자가 담겨있다. function sum(){ var i, _sum = 0; for(i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; } return _sum; } document.write('result : ' + sum(1,2,3,4)); 함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행의 sum()을 보면 함수 sum은 인자에 대한 정의가 없이 비워져있다. 하지만 마지막 .. 2020. 11. 10.
Javascript 값으로서의 함수와 콜백 값으로서의 함수 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. function a(){} 위의 코드에서 함수 a는 변수 a에 담겨진 값이다. a = { b:function(){ } }; 또한 위의 코드에서처럼 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. function cal(func, num){ return func(num) } function increase(num){ return num+1 } function decrease(num){ return num-1 } alert(c.. 2020. 11. 10.
Javascript 함수지향-유효범위 유효범위란? 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global'; function fscope(){ alert(vscope); } fscope(); 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. var vscope = 'global'; function fscope(){ var vscope = 'local'; alert('함수안'+vscope); } fscope(); alert('함수밖'+vscope); 함수 .. 2020. 11. 9.
Javascript 정규표현식(regular expression)에 대한 기본 정규표현식이란? 정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식의 생성 정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 컴파일(compile) 컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. var pattern = /a/ var pattern = new RegExp('a'); 위 두 가지 방법과 같이 'a'라는 문자를 컴파일하며 객체를 만들며 패턴을 생성해낸다. 정규표현식 실행(execution) 정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다... 2020. 11. 9.
Javascript API 기본과 언어 문서 API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 레퍼런스와 튜토리얼 프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 tutorial(안내서)가 있다. 통상 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미하다. 언어에 대한 강의들은 일종의 안내서라고 할 수 있고, 자바스크립트 사전은 레퍼런스라고 할 수 있다. 자바스크립트의 API 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다. 자바스크립트 API 문서 ECMAScript (표준문서) .. 2020. 11. 9.
Javascript 모듈(module)에 대하여 모듈이란? 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들인 모듈(module)을 사용된다. 순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 모듈을 사용하면 좋은 이유 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에.. 2020. 11. 6.
Javascript 객체(object) 및 객체 지향 프로그램 객체란? 배열은 아이템에 대한 식별자로 숫자를 사용했다면 객체란 문자를 사용하고 싶을때 사용한다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 되는데 이 인덱스를 이용하해서 데이터를 가져오게 되는데 이때 객체로 인덷스를 문자로 사용한다. 객체의 생성 var grades = {'kim': 10, 'jin': 6, 'seok': 80}; 'kim'은 key가 되고, 10은 value가 된다. var grades = {}; grades['kim'] = 10; grades[jin'] = 6; grades['seok'] = 80; var grades = new Object(); grades['kim'] = 10; grades['jin'] = 6; gra.. 2020. 11. 6.
Javascript 배열(array) 배열이란? 배열이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 배열의 생성 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법으로 배열을 쓰면 된다. var member = ['kim', 'jin', 'soek'] 변수 member에 담아보고자하는 정보를 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다. 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다. 이 숫자를 색인(index)라고 부르고 0부터 시작한다. 즉 첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어.. 2020. 11. 6.
반응형

티스토리툴바