Javascript Array Object (자바스크립트 배열 요소 정리) > script

본문 바로가기

script

Javascript Array Object (자바스크립트 배열 요소 정리)

작성일 16-04-12 16:20

페이지 정보

작성자서방님 조회 217회 댓글 0건

본문

출처 : https://chongmoa.com:45183/javascript/7780


자바스크립트 배열은 여러 개의 데이터 값을 하나의 변수에 할당할 때 사용합니다. 

자바스크립트 배열을 적을 때, 마지막 데이터 값 다음에 ,(콤마)를 적지 않습니다. 
적을 경우, 브라우저마다 다르게 나타남. 자바스크립트는 순서를 셀 때, 0부터 시작함. 즉, 첫 번째는 0, 두 번째는 1, 세 번째는 2, ..... 마지막 


배열 개념과 장점

1) 배열은 여러 데이터 값을 하나의 변수에 할당 가능.
2) 한 개의 변수에 하나의 데이터 값만 할당해 사용할 경우 특정 데이터 값을 찾기도 힘들 뿐더러,   데이터가 많아짐에 따라 변수 또한 많아져서 가독성도 떨어지고 처리 속도도 떨어지게 됩니다.
3) 배열을 이용하면, 데이터 색인을 이용해 쉽게 찾을 수 있고, 가독성도 좋아집니다.

Javascript의 배열 선언

배열 선언은 방법1, 방법2 , 방법3은  결과값이 똑같습니다. 

다만, 가독성 및 처리 속도 향상을 위해 방법3인 Literal 타입인 

var arr3 = ["C.m.A 1", "C.m.A 2", "C.m.A 3"];  대괄호 이용 방식이 더 좋습니다.

자바스크립트에 내장된 배열 생성자인 new Array() 사용하면 가끔 부작용이나 부정확한 결과가 생길 수 있습니다.
즉, 배열에 사용된 데이터가 2개 이상일 땐 정상 출력되지만, 오직 1일 땐 undefined (정의 안 됨) 오류가 뜸.

1
2
3
4
5
6
7
8
9
10
11
/* 방법1 : Type1 - Regular*/
var arr1 = new Array();
arr1[0] = "C.m.A 1";
arr1[1] = "C.m.A 2";
arr1[2] = "C.m.A 3";
 
/* 방법2 : Type2 - Condensed*/
var arr2 = new Array("C.m.A 1", "C.m.A 2", "C.m.A 3");
 
/* 방법3 : Type3 - Literal ==> 권장 */
var arr3 = ["C.m.A 1", "C.m.A 2", "C.m.A 3"];


arr4는 인자가 하나 있는 배열을 선언하는 게 아니라 길이가 5, 즉 요소를 다섯 개 넣는 배열을 선언합니다.
arr5는 인자가 하나 있는 배열인데 차이는 Array 생성자가 두 가지 인자를 받는다는 데 있습니다. 
숫자 자료형 하나만을 인자로 주면 배열 길이가 되고 문자열이나 다른 객체를 인자로 주면 배열 요소가 됩니다. 
(그런데 숫자더라도 음수나 소수, 32비트를 넘는 자연수를 주면 오류 발생) 하지만 [] 선언식은 항상 배열 요소를 인자로 받는다

1
2
3
4
5
6
7
8
var arr4 = new Array(5); // 배열 요소갯수 선언
var arr5 = [5]; // 배열 요소갯수 선언
var arr6 = new Array(); // 빈 배열 선언
 
var arr7 = []; // 빈 배열 선언
arr7[0] = "C.m.A 1";
arr7[1] = "C.m.A 2";
arr7[2] = "C.m.A 3";


자바스크립트 배열은 요소를 추가하는 대로 알아서 그 크기가 늘어나므로 사실 위처럼 처음부터 요소 개수를 선언해 놓는 경우가 많지는 않지만

두 가지 다른 선언 방식이 있다는 사실은 반드시 알고 있어야 한다.
마지막으로 하나, 배열 길이는 아무리 크게 잡아도 실제로 메모리를 차지하는 것은 배열 요소의 값을 실제로 넣은 경우에만 발생한다.


Javascript의 배열 확인

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var i;
var tot = arr1.length; // 배열에 할당된 데이터 갯수 구하기
for (i=0;i<tot;i++) {
   if(!arr1[i]) continue;  // null , undefined, 빈 원소일 때 건너뜀
   document.write(arr1[i] + "<br />");
}
 
var tot2= arr2.length; // 배열에 할당된 데이터 갯수 구하기
for (i=0;i<tot2;i++) {
   if(!arr2[i]) continue;  // null , undefined, 빈 원소일 때 건너뜀
   document.write(arr2[i] + "<br />");
}
 
var tot3= arr3.length; // 배열에 할당된 데이터 갯수 구하기
for (i=0;i<tot3;i++) {
   if(!arr3[i]) continue;  // null , undefined, 빈 원소일 때 건너뜀
   document.write(arr3[i] + "<br />");
}

C.m.A 1
C.m.A 2
C.m.A 3
C.m.A 1
C.m.A 2
C.m.A 3
C.m.A 1
C.m.A 2
C.m.A 3


length 속성

배열에 할당된 데이터 갯수를 반환합니다. 
사용법은 배열.length ==> arr3.length; 
이와 비슷하게 배열의 length 속성은 배열이 가지고 있는 항목의 개수를 반환할 것으로 생각할 수 있지만, 
배열에서는 length 속성이 항목의 정확한 개수를 반환할 수도 있고 반환하지 않을 수도 있습니다. 
배열의 항목들이 실제값으로 차곡차곡 쌓이지 않고 중간에 undefined가 듬성듬성 나오는 경우에 undefined까지 모두 센 개수를 반환하기 때문입니다. 
좀더 정확히 말하자면 배열에 length 속성을 지정하면 undefined 값을 가지는 속성을 자유자재로 만들 수 있습니다.

배열의 length는 배열의 항목의 (index들 중 가장 큰 값) + 1 을 값으로 가집니다.
[참고] 배열의 데이터 갯수는 배열의 색인 번호보다 1 큼. 
즉, 배열의 순서는 0부터 시작하므로 배열의 마지막 데이터 색인 번호는 총 데이터 갯수에서 1을 뺀 숫자가 되는 것입니다.
var arr3 = ["C.m.A 1", "C.m.A 2", "C.m.A 3"]; 의 경우 3개의 데이터가 있지만, 마지막 데이터의 배열의의 색인 번호는 3에서 1을 뺀 arr3[3]이 되는 것입니다.

for(~) 문안에 Array.length 구하는 함수등을 호출하지 말고, 외부에서 var tot = Array.length를 설정한다. 
객체를 찾아가는 탐색 경로를 거치게 되므로 응답성능이 느려진다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arr = ['C.m.A 1', 'C.m.A 2', 'C.m.A 3'];
 
// for(~) 문안에 Array.length 구하는 함수등을 호출하지 말고, 외부에서 var tot = Array.length를 설정한다.
// 객체를 찾아가는 탐색 경로를 거치게 되므로 응답성능이 느려진다.
 
// for(~) 문안에 arr.length 구하는 함수등을 호출하는 방법 비권장 ==> 객체를 찾아가는 탐색 경로를 거치게 되므로 응답성능이 느려진다.
var i;
for (i=0;i<arr.length;i++) { // for(~) 문안에 arr.length 구하는 함수등을 호출하는 방법 비권장
   if(!arr[i]) continue;  // null , undefined, 빈 원소일 때 건너뜀
   document.write(arr[i] + "<br />");
}
 
 
// 외부에서  배열에 할당된 데이터 갯수 구하는 방법 권장
var i;
var tot = arr.length; // 권장 : 외부에서  배열에 할당된 데이터 갯수 구하기
for (i=0;i<tot;i++) {
   if(!arr[i]) continue;  // null , undefined, 빈 원소일 때 건너뜀
   document.write(arr[i] + "<br />");
}

C.m.A 1
C.m.A 2
C.m.A 3

성능우위 문법

배열 생성시 : var arr = new Array(); 보다 var arr = []; 를 사용한다
배열 접근시 : arr.push(i) 보다 arr[i] = value 를 사용한다
객체 생성시 : var obj = new Object(); 보다 var obj = {}; 를 사용한다
객체 접근시 : obj["a"] = 1 보다 obj.a = 1; 를 사용한다 
문자열 생성시 : var str = new String("aaa"); 보다 var str = "aaa"; 를 사용한다 
문자열 연산시 : loop문에서 문자열 조작시에 str += "test"; 보다 arr=[]; loop{ arr[i]="test"; } arr.join(""); 을 사용한다 (String과 StringBuffer개념과 유사)
정규표현식 : 탐색 대상을 축소한다. loop 문 안에 정규표현식 넣지 말고 밖에 놓아 한번만 컴파일 처리되게 한다. loop문에 있으면 계속 컴파일됨


배열데이타 추가

1. length 속성을 이용하면 배열에 쉽게 데이터를 추가 가능

1
2
3
4
5
6
7
8
9
10
11
<button onclick="arrTest()">클릭</button>
<p id="testArrView"></p>
<script>
var arr = ['C.m.A 1', 'C.m.A 2', 'C.m.A 3']; // 변수 arr 선언 후, 3개의 데이터가 든 배열을 할당
document.getElementById("testArrView").innerHTML = arr;
 
function arrTest() { // arrTest 함수를 실행. 함수 실행 내용은 아래와 같음.
   arr[arr.length] = "C.m.A 4"; // arr3[3] 마지막 즉, 4번째 데이터로 C.m.A 4 정의
   document.getElementById("testArrView").innerHTML = arr;
}
</script>

클릭

C.m.A 1,C.m.A 2,C.m.A 3


2. length 속성을 이용하면 배열에 쉽게 데이터를 추가 가능

1
2
3
4
5
6
7
8
9
10
11
12
<button onclick="arrTest()">클릭</button>
 
<p id="testArrView"></p>
<script>
var arr = ['C.m.A 1', 'C.m.A 2', 'C.m.A 3']; // 변수 arr 선언 후, 3개의 데이터가 든 배열을 할당
document.getElementById("testArrView").innerHTML = arr;
 
function arrTest() { // arrTest 함수를 실행. 함수 실행 내용은 아래와 같음.
   arr[3] = "C.m.A 4"; // 4번째 데이터로 C.m.A 4 정의
   document.getElementById("testArrView").innerHTML = arr;
}
</script>
클릭

C.m.A 1,C.m.A 2,C.m.A 3


변수가 배열인지 아닌지 확인하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3"];
function arrTest() {
    var tmp = isArray(arr); // 함수 isArray에 독립변수 hz 넣어 돌려라.
    if(tmp == true) {
        alert("배열입니다.");
    } else {
        alert("배열이 아닙니다.");
    }
}
function isArray(s) {
    return s.constructor.toString().indexOf("Array") > -1; //  배열이면 true  배열이 아니면  false값을 반환
}
</script>
<button onclick="arrTest()">클릭</button>


s.constructor.toString().indexOf("Array") > -1 식의 의미

s : 매개변수. 즉, isArray(s)에서 받아온 변수값
. : 객체(objects)에서 마침표는 작동법(methods)를 호출하는 용도로 사용 
constructor : 생성자. 즉, s라는 변수(객체)가 생성될 때 처음 호출되는 함수. 
              배열 객체 경우엔 function Array() { [native code] } 함수를 처음 실행함.
toString() : 문자열로 변환, 즉, 생성자 함수인 function Array() { [native code] }를 순수한 문자열로 반환.
indexOf("Array") : Array라는 문자열이 몇 번째에 처음 등장하냐? 순서는 0부터 시작하며, 없으면 -1이 뜸.
                   Array 문자열은 10번째 등장하므로 indexOf("Array")는 9가 됨. 
> -1 : 숫자의 크기를 비교함으로써 참거짓(Boolean)형태로 변환되어 '참(true)' 또는 거짓 (false)값을 반환

Array.join() 메서드 : 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환.
arrayObj.join([separator]) 
매개 변수 : arrayObj
필수 요소. Array 개체입니다.

separator : 선택 사항입니다.
결과 String에서 한 배열 요소와 다음 요소를 구분하는 데 사용되는 문자열입니다. 생략하면 배열 요소들은 쉼표로 구분됩니다.

설명 : 배열의 요소가 undefined 또는 null이면 공백 문자열로 처리됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var ex1, ex2, ex3, ex4;
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3"];
ex1 = arr.join();
ex2 = arr.join('');
ex3 = arr.join('/');
ex4 = arr.join('-');
 
document.write("arr.join() 예제 : " + ex1 + "<br />");
document.write("arr.join('') 예제 : " + ex2 + "<br />");
document.write("arr.join('/') 예제 : " + ex3 + "<br />");
document.write("arr.join('-') 예제 : " + ex4 + "<br />");
</script>
arr.join() 예제 : C.m.A 1,C.m.A 2,C.m.A 3
arr.join('') 예제 : C.m.A 1C.m.A 2C.m.A 3
arr.join('/') 예제 : C.m.A 1/C.m.A 2/C.m.A 3
arr.join('-') 예제 : C.m.A 1-C.m.A 2-C.m.A 3


Array.reverse() 메서드는 배열 안의 원소 순서를 반대로 정렬하여 반환한다.

1
2
3
4
<script>
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3"];
document.write("arr.reverse() 예제 : " + arr.reverse());
</script>
arr.reverse() 예제 : C.m.A 3,C.m.A 2,C.m.A 1


Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환

별도의 전달인자 없이 호출하면, 배열 안의 원소들을 알파벳순으로 정렬.
배열 안의 원소들이 문자열이 아니라면 비교를 위해서 임시로 문자열 변환 작업이 수반됨.
알파벳순이 아니라 다른 순서로 배열을 정렬하려면 전달인자를 통해 비교 함수를 직접 명시.
첫 번째 전달인자가 두 번째보다 먼저 나타나야 한다면 비교 함수는 0보다 작은 숫자를 반환해야 합니다.

1
2
3
4
<script>
var arr = ["C.m.A 3", "C.m.A 1", "C.m.A 2", "C.m.A 5"];
document.write("arr.sort() 예제 : " + arr.sort());
</script>
arr.sort() 예제 : C.m.A 1,C.m.A 2,C.m.A 3,C.m.A 5


Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환.

본래 배열의 모든 원소에 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환.
중복하여 중첩된 배열은, 그 배열에 속한 배열의 원소를 분리해내지 않음.
1
2
3
4
5
6
7
8
9
10
11
12
<script>
var ex1, ex2 , ex3 , ex4;
var arr = ["C.m.A 3", "C.m.A 1", "C.m.A 2", "C.m.A 5"];
ex1 = arr.concat([1,2]);
ex2 = arr.concat(['C.m.A 7', 'C.m.A 8']);
ex3 = arr.concat([4, [5,[6,7]]]);
ex4 = arr.concat(['http://chongmoa.com', 'http://chongmoa.kr']);
document.write("arr.concat([1,2]) 예제 : " + ex1 + "<br />");
document.write("arr.concat(['C.m.A 7', 'C.m.A 8']) 예제 : " + ex2 + "<br />");
document.write("arr.concat([4, [5,[6,7]]]) 예제 : " + ex3 + "<br />");
document.write("arr.concat(['http://chongmoa.com', 'http://chongmoa.kr']) 예제 : " + ex4 + "<br />");
</script>
arr.concat([1,2]) 예제 : C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5,1,2
arr.concat(['C.m.A 7', 'C.m.A 8']) 예제 : C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5,C.m.A 7,C.m.A 8
arr.concat([4, [5,[6,7]]]) 예제 : C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5,4,5,6,7
arr.concat(['http://chongmoa.com', 'http://chongmoa.kr']) 예제 : C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5,http://chongmoa.com,http://chongmoa.kr


Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환

배열의 일부분 혹은 부분 배열을 반환
전달인자 2개 (반환될 부분의 처음과 끝)
반환되는 배열 : 첫 번째 전달인자가 지정하는 위치~두 번째 전달인자가 지정하는 위치를 제외한 그 사이의 모든 원소를 포함.
                        전달인자가 하나면 그 위치에서 배열 끝까지의 모든 원소를 포함.
                        전달인자가 음수라면 배열의 마지막 원소에서 상대적인 위치로 배열 원소들을 지정.(-1은 배열의 마지막 원소)
1
2
3
4
5
6
7
8
9
10
11
12
<script>
var ex1, ex2 , ex3 , ex4;
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3", "C.m.A 4", "C.m.A 4"];
ex1 = arr.slice(0, 3);
ex2 = arr.slice(3);
ex3 = arr.slice(1, -1);
ex4 = arr.slice(-3,-2);
document.write("arr.slice(0, 3) 예제 : " + ex1 + "<br />");
document.write("arr.slice(3) 예제 : " + ex2 + "<br />");
document.write("arr.slice(1, -1) 예제 : " + ex3 + "<br />");
document.write("arr.slice(-3,-2) 예제 : " + ex4 + "<br />");
</script>
arr.slice(0, 3) 예제 : C.m.A 1,C.m.A 2,C.m.A 3
arr.slice(3) 예제 : C.m.A 4,C.m.A 4
arr.slice(1, -1) 예제 : C.m.A 2,C.m.A 3,C.m.A 4
arr.slice(-3,-2) 예제 : C.m.A 3

Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 범용적으로 사용할 수 있는 메서드
배열에 원소를 삽입/제거
배열 안에서 직접 수행
첫 번째 전달인자 : 배열 상에서 삽입/삭제가 시작될 위치
두 번째 전달인자 : 배열에서 삭제할 원소들의 개수. 지정 안하면 시작 위치에서 배열의 마지막 원소까지.
세 번째 전달인자부터: 배열에 새롭게 이어 붙일 원소. 첫 번째 전달인자가 지정하는 시작 위치부터 수행.
concat()와 다른 점 : 배열에서 원소들을 분리해내는 작업을 하지 않음. 배열 그 자체를 통째로 삽입
1
2
3
4
5
6
7
8
<script>
var ex1, ex2;
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3", "C.m.A 4", "C.m.A 5"];
ex1 = arr.splice(1,2);
ex2 = arr.splice('C.m.A 2');
document.write("arr.splice(1,2) 예제 : " + ex1 + "<br />");
document.write("arr.splice('C.m.A 2') 예제 : " + ex2 + "<br />");
</script>
arr.splice(1,2) 예제 : C.m.A 2,C.m.A 3
arr.splice('C.m.A 2') 예제 : C.m.A 1,C.m.A 4,C.m.A 5

Array.pop() 메서드 : 배열에서 마지막 요소를 제거하여 반환
push 및 pop 메서드를 사용하면 LIFO(후입 선출) 원칙을 통해 데이터를 저장하는 스택을 시뮬레이션할 수 있습니다.
필수 arrayObj 참조는 Array 개체입니다.
배열이 비어 있으면 undefined가 반환됩니다
1
2
3
4
5
<script>
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3", "C.m.A 4", "C.m.A 5"];
document.write("arr.pop() 예제 : " + arr.pop()+" <br />");
document.write("arr : " + arr.join()); // 배열 마지막 요소 C.m.A 5가 제거됨
</script>
arr.pop() 예제 : C.m.A 5 
arr : C.m.A 1,C.m.A 2,C.m.A 3,C.m.A 4

Array.pop() 메서드 : 배열에 새 요소를 추가하고 배열의 새 길이를 반환
push 및 pop 메서드를 사용하면 LIFO(후입 선출) 원칙을 통해 데이터를 저장하는 스택을 시뮬레이션할 수 있습니다.
arrayObj.push([item1 [item2 [. . . [itemN ]]]])

매개 변수 : arrayObj 필수 요소. Array 개체입니다.

item, item2,. . ., itemN
선택 사항입니다. Array의 새 요소입니다.

push 및 pop 메서드를 사용하면 LIFO(후입 선출) 스택을 시뮬레이트할 수 있습니다.
push 메서드는 요소를 나타나는 순서에 따라 추가합니다. 인수 중 하나가 배열이면 하나의 요소로 추가됩니다. 
둘 이상의 배열에서 요소를 결합하려면 concat 메서드를 사용합니다.
1
2
3
4
5
6
7
<script>
var arr = ["C.m.A 3", "C.m.A 1", "C.m.A 2", "C.m.A 5"];
arr.push(1,2);
arr.push('C.m.A 7', 'C.m.A 8');
arr.push(4, 5,6,7);
document.write("arr.push 예제 : " + arr + "<br />");
</script>
arr.push 예제 : C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5,1,2,C.m.A 7,C.m.A 8,4,5,6,7
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
<script>
var i, tag="";
// 객체로 데이타 생성
var str1 = { 이름: "C.m.A", 국어: 70, 수학: 50, 영어:60 };
var str2= { 이름: "홍길동", 국어: 30, 수학: 60, 영어:90 };
var str3 = { 이름: "개똥이", 국어: 90, 수학: 100, 영어:20 };
 
var arr = [];
arr.push(str1);
arr.push(str2);
arr.push(str3);
 
for (i=0; i<arr.length;i++) {
    arr[i].sumScore = function () {
    return this.국어 + this.수학 + this.영어;
    };
 
    arr[i].averScore = function () {
        return this.sumScore() / 3;
    };
}
 
for (var i in arr) {
    with (arr[i]) {
        tag += "이름 : " + 이름 + " , " + "총점 : " + sumScore() + " , " + "평균 : " + averScore() + "<br />";
    };
}
document.write(tag);
</script>
이름 : C.m.A , 총점 : 180 , 평균 : 60
이름 : 홍길동 , 총점 : 180 , 평균 : 60
이름 : 개똥이 , 총점 : 210 , 평균 : 70

Array.shift() 메서드 : 배열 첫번째 요소를 제거하여 반환
arrayObj.shift()
매개 변수 : 필수 arrayObj 참조는 Array 개체입니다.
반환 값 : 즉, 배열에서 제거된 요소를 반환합니다.
1
2
3
4
5
<script>
var arr = ["C.m.A 1", "C.m.A 2", "C.m.A 3", "C.m.A 4", "C.m.A 5"];
document.write("arr.shift() 예제 : " + arr.shift()+" <br />");
document.write("arr : " + arr.join()); // 배열 첫번째 요소 C.m.A 1가 제거됨
</script>
arr.shift() 예제 : C.m.A 1 
arr : C.m.A 2,C.m.A 3,C.m.A 4,C.m.A 5

Array.Unshift() 메서드 : 배열 시작에 새 요소를 삽입
arrayObj.unshift([item1[, item2 [, . . . [, itemN]]]])

매개 변수
arrayObj : 필수 요소. Array 개체입니다.

item1, item2,. . ., itemN
선택 사항입니다. Array 의 시작 부분에 삽입할 요소입니다.

unshift 메서드는 배열의 시작 부분에 요소를 삽입하여 인수 목록에 표시되는 순서대로 표시합니다.
1
2
3
4
5
6
7
<script>
var arr = ["C.m.A 3", "C.m.A 1", "C.m.A 2", "C.m.A 5"];
arr.unshift(1,2);
arr.unshift('C.m.A 7', 'C.m.A 8');
arr.unshift(4, 5,6,7);
document.write("arr.unshift 예제 : " + arr + "<br />");
</script>
arr.unshift 예제 : 4,5,6,7,C.m.A 7,C.m.A 8,1,2,C.m.A 3,C.m.A 1,C.m.A 2,C.m.A 5

댓글목록

등록된 댓글이 없습니다.

게시물 검색
Copyright © 서방님.kr All rights reserved.
PC 버전으로 보기