자바스크립트 팁과 요령
설명 😋
This is a collection of JavaScript tips and tricks. you can refer to it and apply it to make your code more concise. But don't overdo it, it can make your code difficult to read and maintain. Hope everyone contributes, thanks.
목차 📃
This is a collection of JavaScript tips and tricks. you can refer to it and apply it to make your code more concise. But don't overdo it, it can make your code difficult to read and maintain. Hope everyone contributes, thanks.
정렬
1. Generate an Array
1. Generate an Array
n. var arr = new Array(3);
// result: arr = [undefined, undefined, undefined]
n 및 채우기 값x의 빈 배열을 만듭니다. var arr = [...Array(3).fill(1)];
var arr2 = [...Array(5).fill(1, 0, 3)];
/*
result: arr = [1, 1, 1]
arr2 = [1, 1, 1, undefined, undefined]
*/
0...n를 포함하는 어레이를 생성합니다. var arr = [...Array.keys(5)];
// result: arr = [0, 1, 2, 3, 4]
1...n를 포함하는 어레이를 생성합니다. var arr = [];
for (let i = 0; arr.push(++i) < 4; );
var arr2 = Array.from({ length: 4 }, (_, i) => i + 1);
var arr3 = Array.from({ length: 4 }, (_, i) => i * 2);
var arr4 = Array.from({ length: 4 }, () => Math.random());
/*
result: arr = [1, 2, 3, 4]
arr2 = [1, 2, 3, 4]
arr3 = [0, 2, 4, 6]
arr4 = [0.211, 0.5123, 0.612, 0.8921]
*/
2. Extract Unique Values of Array
var arr = [1, 2, 2, 3, 5, 5, 4];
var newArr = [...new Set(arr)];
// result: newArr = [1, 2, 3, 5, 4]
3. Shuffle Elements from Array
var arr = [1, 2, 3, 4, 5];
var newArr = arr.sort(() => Math.random() - 0.5);
// result: newArr = [3, 1, 2, 4, 5]
4. Flatten a Multidimensional Array
var arr = [1, [2, 3], [4, 5, 6], 7];
var newArr = [].concat(...arr);
// result: [1, 2, 3, 4, 5, 6, 7]
5. Resize an Array
> 길이 배열은 읽기 전용 속성이 아닙니다.
var arr = [1, 2, 3, 4, 5];
arr.length = 2;
var arr2 = [1, 2, 3, 4, 5];
arr2.length = 0;
var arr3 = [1, 2, 3, 4, 5];
arr3.length = 7;
/*
result: arr = [1, 2]
arr2 = []
arr3 = [1, 2, 3, 4, 5, undefined, undefined]
*/
6. Random an Item in Array
var arr = [2, 4, 5];
var item = arr[Math.floor(Math.random() * arr.length)];
7. Remove an Item from Array
var arr = [1, 2, 3];
// Not Recommended
delete arr[1]; // arr = [1, undefined, 3], length = 3
// Recommended
arr.splice(1, 1); // arr = [1, 3], length = 2
물체
1. Dynamic Property Name
const dynamic = 'age',
dynamicValue = 18;
var obj = {
name: 'Dyno',
[dynamic]: dynamicValue,
};
// result: obj = { name: 'Dyno', age: 18 }
2. Clone an Object
1. Dynamic Property Name
const dynamic = 'age',
dynamicValue = 18;
var obj = {
name: 'Dyno',
[dynamic]: dynamicValue,
};
// result: obj = { name: 'Dyno', age: 18 }
2. Clone an Object
(Not Recommended) >
= 연산자를 사용하여 개체 1을 개체 2에 복사합니다. 이 두 개체는 동일한 메모리 영역(reference)을 가리킵니다. 따라서 객체 1을 변경하면 객체 2도 변경됩니다. var obj1 = { a: 1, b: 2 };
var obj2 = obj1; // obj2 = { a: 1, b: 2 }
obj1.a = 3; // change value of a property
console.log(obj1); // { a: 3, b: 2 }
console.log(obj2); // { a: 3, b: 2 } => property a of obj2 changed 🙂❗
console.log(obj3); // { a: 3, b: 2 } => property a of obj2 changed 🙂❗
> 방법 1: 스프레드 연산자
{...} 또는 Object.assign()를 사용하여 "얕은 복사"를 수정합니다. 문제: Nested objects 여전히 얕은 복사 문제가 있습니다. var obj1 = { a: 1, b: 2, c: { nested: 3 } };
var obj2 = { ...obj1 }; // obj2 = { a: 1, b: 2, c: { nested: 3 } }
var obj3 = Object.assign({}, obj1); // obj3 = { a: 1, b: 2, c: { nested: 3 } }
obj1.b = 3;
obj1.c.nested = 4;
console.log(obj1); // { a: 1, b: 3, c: { nested: 4 } }
console.log(obj2); // { a: 1, b: 2, c: { nested: 4 } } 🙂
console.log(obj3); // { a: 1, b: 2, c: { nested: 4 } } 🙂
> 방법 2
(Recommended) : JSON.stringify() & JSON.parse()를 사용하여 위의 문제를 해결합니다. var obj1 = { a: 1, b: 2, c: { nested: 3 } };
var obj2 = JSON.parse(JSON.stringify(obj1)); // obj2 = { a: 1, b: 2, c: { nested: 3 } }
obj1.b = 3;
obj1.c.nested = 4;
console.log(obj1); // { a: 1, b: 3, c: { nested: 4 } }
console.log(obj2); // { a: 1, b: 2, c: { nested: 3 } } 😉😘
구조화(ES6+)
1. With Array
var [a, b] = [1, 2];
// same: var a = 1, b = 2;
var [a, b, c] = [1, 2, 3, 4, 5];
// same: var a = 1, b = 2, c = 3;
var [a, , c] = [1, 2, 3, 4, 5];
// same: var a = 1, c = 3
// ignore values
var [a, b, ...rest] = [1, 2, 3, 4, 5];
// same: var a = 1, b = 2, rest = [4, 5]
// use "rest params ES6"
var [a, b, c] = [1, 2];
// same: var a = 1, b = 2, c = undefined;
var [a, b = 0, c = 0] = [1, 2];
// same: var a = 1, b = 2, c = 0;
// declare and set default value
var [a, b, [c, d], e] = [1, 2, [3, 4], 5];
// same: var a = 1, b = 2, c = 3, d = 4, e = 5
// nested array destructuring
2. With Object
var person = { name: 'Dyno', age: 18 };
var { name, age } = person;
// same: var name = person.name, age = person.age;
var { name = 'Anonymous', age = 1, address = 'HCM city' } = person;
// same: var name = person.name, age = person.age, address: 'HCM city'
// declare and set default value
var { name: personName, age: personAge } = person;
// same: var personName = person.name, personAge = person.age
// decleare and change variable name
console.log({ name, age });
// same: console.log({ name: name, age: age })
var person = { name: 'Dyno', age: 18, infor: { address: 'HCM', phone: '123' } };
var {
name,
age,
infor: { address, phone },
} = person;
// same: name = person.name, age = person.agem, address = person.infor.address, phone = person.infor.phone
// nested object destructuring
운영자
1. Optional chaining (?.)
> "선택적 연결 연산자?.를 사용하면 체인의 각 참조가 유효한지 확인하지 않고도 연결된 객체 체인 내부 깊숙이 위치한 속성 값을 읽을 수 있습니다."MDN
const person = {
name: 'Dyno',
age: 18,
sayHello: function () {
console.log('Hello');
},
};
// ❗ Wrong way
console.log(person.infor.address); // ❌ Uncaught TypeError: Cannot read property 'address' of undefined
// ✅ Right way (check condition)
if (person.infor) console.log(person.infor.address); // Not log
// ✅ Right way (use ?.)
console.log(person.infor?.address); // undefined
// Optional chaining with function calls
console.log(person.sayHello?.()); // Hello
console.log(person.callPhone?.()); // undefined
// A chain Optional chaining
console.log(person.infor?.address?.province?.name); // undefined
// syntax
obj.val?.prop;
obj.val?.[expr];
obj.arr?.[index];
obj.func?.(args);
2. Nullish coalescing operator (??)
> "nullish 병합 연산자??는 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다."MDN
var a = null ?? 'Default'; // a = 'Default'
var a = false ?? 'Default'; // a = false
3. Logical OR (||)
var a = 1,
b = 2;
if (a > 2 || b > 1) console.log('Dyno');
// result: Dyno
> OR 연산자||는 왼쪽 피연산자가 falsy일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.
var a = null || 'Default'; // a = 'Default'
var a = false || 'Default'; // a = 'Default'
4. Logical AND (&&)
let a = true,
b = true,
c = false;
if (a && b) console.log('Hello'); // Hello (a, b = true)
if (a && c) console.log('Dyno'); // not log (c = false)
// other usage
function sayHi() {
console.log('Hi');
}
a && sayHi(); // Hi
c && sayHi(); // false
5. Double tilde operator (~~)
let num = 2.6;
console.log(~~num); // 2 = Math.floor(2)
6. Logical Assignment Operator ES12 (||=, ??=)
a ||= b; // same a = a || b;
a ??= b; // same a = a ?? b;
7. Numeric separator ES12 (_)
const n = 1_000_000_000; // same: n = 1000000000;
비교
1. Use === instead of ==
> 연산자== (!=)는 2개의 변수가 동일한 유형이 아닌 경우 자동으로 변환한 다음 비교합니다. === (!==) 연산자는 === 보다 빠르게 값과 유형 => == 을 비교합니다.
1 == '1' // true
1 === '1' // false
0 == false // true
0 === false // false
'' == false // true
'' === false // false
[] == 0 // true
[] === 0 // false
2. The difference between isNaN() and Number.isNaN()
> isNaN() 메서드(숫자가 아님 ?)는 변수가 숫자인지 확인하는 데 사용합니다. Number.isNaN() (NaN ?) 메서드는 변수가 NaN인지 확인하는 데 사용합니다.
isNaN('string');
// true, 'string' is not Number
isNaN([]);
// true, [] is not Number
isNaN(0 / 0);
// true, 0/0 is not Number
isNaN(1);
// false, 1 is Number
Number.isNaN('string');
// false, 'string' is not NaN
Number.isNaN([]);
// false, [] is not NaN
Number.isNaN(0 / 0);
// true, 0/0 is NaN
Number.isNaN(NaN);
// true
기타
1. Swapping use Destructuring
let a = 1,
b = 2;
[a, b] = [b, a];
// result: a = 2, b = 1;
2. Create function that returns only 1 object
const fn = () => ({ obj: 1 });
/*
same: const fn = () => {
return { obj: 1 }
}
*/
3. Immediately Invoked Function Expression (IIFE)
> 함수를 생성하면 함수가 자동으로 실행됩니다.
// Way 1:
var res = ()(function(){
// do something...
console.log("Hello");
return true;
})();
// result: Hello, res = true;
// Way 2:
var res = (() => {
console.log('Hello');
return true;
})();
// result: Hello, res = true;
4. typeof vs instanceof
> typeof : 변수의 기본 유형을 나타내는 문자열을 반환합니다.
> instanceof: 생성자를 연결하는 모든 프로토타입을 확인합니다. 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다.
var arr = [1, 2, 3];
console.log(typeof arr); // "object"
console.log(arr instanceof Array); // true
typeof 1; // "number"
typeof NaN; // "number"
typeof 'str'; // "string"
typeof true; // "boolean"
typeof {}; // "object"
typeof []; // "object"
typeof null; // "object"
typeof undefined; // "undefined"
typeof function name() {}; // "function"
5. Falsy
> AFalsy value는 부울 컨텍스트에서 발견될 때 거짓으로 간주되는 값입니다. MDN
> JavaScript 허위 값의 전체 목록false, 0, -0, 0n, "", '',, NaN, null, undefined, document.all
> 잘못된 값은 if 블록을 우회합니다. 전:
if (null) {
} else {
console.log('Falsy');
}
const a = undefined || 'Falsy';
// result: Falsy, a = "Falsy"
> 거짓 값 필터링
const arr = [1, 'Dyno', false, 0, true, NaN, 2000];
var filteredArr = arr.filter(Boolean);
// result: filteredArr = [1, "Dyno", true, 2000]
6. Template string `${}`
const name = 'Dyno';
const hello1 = 'Hello ' + name + ', how are you?';
const hello2 = `Hello ${name}, how are you?`; // template string.
7. Rounding number to n decimal place
var num = 25.0420001;
console.log(typeof num); // "number"
num = num.toFixed(2); // num = "25.04"
console.log(typeof num); // ❗ "string"
8. Check variable - convert a variable to Boolean (!! operator)
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!1); // true
Reference
이 문제에 관하여(자바스크립트 팁과 요령), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/amnaabd/javascript-tips-tricks-5fjk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. With Array
var [a, b] = [1, 2];
// same: var a = 1, b = 2;
var [a, b, c] = [1, 2, 3, 4, 5];
// same: var a = 1, b = 2, c = 3;
var [a, , c] = [1, 2, 3, 4, 5];
// same: var a = 1, c = 3
// ignore values
var [a, b, ...rest] = [1, 2, 3, 4, 5];
// same: var a = 1, b = 2, rest = [4, 5]
// use "rest params ES6"
var [a, b, c] = [1, 2];
// same: var a = 1, b = 2, c = undefined;
var [a, b = 0, c = 0] = [1, 2];
// same: var a = 1, b = 2, c = 0;
// declare and set default value
var [a, b, [c, d], e] = [1, 2, [3, 4], 5];
// same: var a = 1, b = 2, c = 3, d = 4, e = 5
// nested array destructuring
2. With Object
var person = { name: 'Dyno', age: 18 };
var { name, age } = person;
// same: var name = person.name, age = person.age;
var { name = 'Anonymous', age = 1, address = 'HCM city' } = person;
// same: var name = person.name, age = person.age, address: 'HCM city'
// declare and set default value
var { name: personName, age: personAge } = person;
// same: var personName = person.name, personAge = person.age
// decleare and change variable name
console.log({ name, age });
// same: console.log({ name: name, age: age })
var person = { name: 'Dyno', age: 18, infor: { address: 'HCM', phone: '123' } };
var {
name,
age,
infor: { address, phone },
} = person;
// same: name = person.name, age = person.agem, address = person.infor.address, phone = person.infor.phone
// nested object destructuring
1. Optional chaining (?.)
> "선택적 연결 연산자
?.를 사용하면 체인의 각 참조가 유효한지 확인하지 않고도 연결된 객체 체인 내부 깊숙이 위치한 속성 값을 읽을 수 있습니다."MDNconst person = {
name: 'Dyno',
age: 18,
sayHello: function () {
console.log('Hello');
},
};
// ❗ Wrong way
console.log(person.infor.address); // ❌ Uncaught TypeError: Cannot read property 'address' of undefined
// ✅ Right way (check condition)
if (person.infor) console.log(person.infor.address); // Not log
// ✅ Right way (use ?.)
console.log(person.infor?.address); // undefined
// Optional chaining with function calls
console.log(person.sayHello?.()); // Hello
console.log(person.callPhone?.()); // undefined
// A chain Optional chaining
console.log(person.infor?.address?.province?.name); // undefined
// syntax
obj.val?.prop;
obj.val?.[expr];
obj.arr?.[index];
obj.func?.(args);
2. Nullish coalescing operator (??)
> "nullish 병합 연산자
??는 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다."MDNvar a = null ?? 'Default'; // a = 'Default'
var a = false ?? 'Default'; // a = false
3. Logical OR (||)
var a = 1,
b = 2;
if (a > 2 || b > 1) console.log('Dyno');
// result: Dyno
> OR 연산자
||는 왼쪽 피연산자가 falsy일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.var a = null || 'Default'; // a = 'Default'
var a = false || 'Default'; // a = 'Default'
4. Logical AND (&&)
let a = true,
b = true,
c = false;
if (a && b) console.log('Hello'); // Hello (a, b = true)
if (a && c) console.log('Dyno'); // not log (c = false)
// other usage
function sayHi() {
console.log('Hi');
}
a && sayHi(); // Hi
c && sayHi(); // false
5. Double tilde operator (~~)
let num = 2.6;
console.log(~~num); // 2 = Math.floor(2)
6. Logical Assignment Operator ES12 (||=, ??=)
a ||= b; // same a = a || b;
a ??= b; // same a = a ?? b;
7. Numeric separator ES12 (_)
const n = 1_000_000_000; // same: n = 1000000000;
비교
1. Use === instead of ==
> 연산자== (!=)는 2개의 변수가 동일한 유형이 아닌 경우 자동으로 변환한 다음 비교합니다. === (!==) 연산자는 === 보다 빠르게 값과 유형 => == 을 비교합니다.
1 == '1' // true
1 === '1' // false
0 == false // true
0 === false // false
'' == false // true
'' === false // false
[] == 0 // true
[] === 0 // false
2. The difference between isNaN() and Number.isNaN()
> isNaN() 메서드(숫자가 아님 ?)는 변수가 숫자인지 확인하는 데 사용합니다. Number.isNaN() (NaN ?) 메서드는 변수가 NaN인지 확인하는 데 사용합니다.
isNaN('string');
// true, 'string' is not Number
isNaN([]);
// true, [] is not Number
isNaN(0 / 0);
// true, 0/0 is not Number
isNaN(1);
// false, 1 is Number
Number.isNaN('string');
// false, 'string' is not NaN
Number.isNaN([]);
// false, [] is not NaN
Number.isNaN(0 / 0);
// true, 0/0 is NaN
Number.isNaN(NaN);
// true
기타
1. Swapping use Destructuring
let a = 1,
b = 2;
[a, b] = [b, a];
// result: a = 2, b = 1;
2. Create function that returns only 1 object
const fn = () => ({ obj: 1 });
/*
same: const fn = () => {
return { obj: 1 }
}
*/
3. Immediately Invoked Function Expression (IIFE)
> 함수를 생성하면 함수가 자동으로 실행됩니다.
// Way 1:
var res = ()(function(){
// do something...
console.log("Hello");
return true;
})();
// result: Hello, res = true;
// Way 2:
var res = (() => {
console.log('Hello');
return true;
})();
// result: Hello, res = true;
4. typeof vs instanceof
> typeof : 변수의 기본 유형을 나타내는 문자열을 반환합니다.
> instanceof: 생성자를 연결하는 모든 프로토타입을 확인합니다. 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다.
var arr = [1, 2, 3];
console.log(typeof arr); // "object"
console.log(arr instanceof Array); // true
typeof 1; // "number"
typeof NaN; // "number"
typeof 'str'; // "string"
typeof true; // "boolean"
typeof {}; // "object"
typeof []; // "object"
typeof null; // "object"
typeof undefined; // "undefined"
typeof function name() {}; // "function"
5. Falsy
> AFalsy value는 부울 컨텍스트에서 발견될 때 거짓으로 간주되는 값입니다. MDN
> JavaScript 허위 값의 전체 목록false, 0, -0, 0n, "", '',, NaN, null, undefined, document.all
> 잘못된 값은 if 블록을 우회합니다. 전:
if (null) {
} else {
console.log('Falsy');
}
const a = undefined || 'Falsy';
// result: Falsy, a = "Falsy"
> 거짓 값 필터링
const arr = [1, 'Dyno', false, 0, true, NaN, 2000];
var filteredArr = arr.filter(Boolean);
// result: filteredArr = [1, "Dyno", true, 2000]
6. Template string `${}`
const name = 'Dyno';
const hello1 = 'Hello ' + name + ', how are you?';
const hello2 = `Hello ${name}, how are you?`; // template string.
7. Rounding number to n decimal place
var num = 25.0420001;
console.log(typeof num); // "number"
num = num.toFixed(2); // num = "25.04"
console.log(typeof num); // ❗ "string"
8. Check variable - convert a variable to Boolean (!! operator)
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!1); // true
Reference
이 문제에 관하여(자바스크립트 팁과 요령), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/amnaabd/javascript-tips-tricks-5fjk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. Use === instead of ==
1 == '1' // true
1 === '1' // false
0 == false // true
0 === false // false
'' == false // true
'' === false // false
[] == 0 // true
[] === 0 // false
2. The difference between isNaN() and Number.isNaN()
isNaN('string');
// true, 'string' is not Number
isNaN([]);
// true, [] is not Number
isNaN(0 / 0);
// true, 0/0 is not Number
isNaN(1);
// false, 1 is Number
Number.isNaN('string');
// false, 'string' is not NaN
Number.isNaN([]);
// false, [] is not NaN
Number.isNaN(0 / 0);
// true, 0/0 is NaN
Number.isNaN(NaN);
// true
1. Swapping use Destructuring
let a = 1,
b = 2;
[a, b] = [b, a];
// result: a = 2, b = 1;
2. Create function that returns only 1 object
const fn = () => ({ obj: 1 });
/*
same: const fn = () => {
return { obj: 1 }
}
*/
3. Immediately Invoked Function Expression (IIFE)
> 함수를 생성하면 함수가 자동으로 실행됩니다.
// Way 1:
var res = ()(function(){
// do something...
console.log("Hello");
return true;
})();
// result: Hello, res = true;
// Way 2:
var res = (() => {
console.log('Hello');
return true;
})();
// result: Hello, res = true;
4. typeof vs instanceof
>
typeof : 변수의 기본 유형을 나타내는 문자열을 반환합니다.>
instanceof: 생성자를 연결하는 모든 프로토타입을 확인합니다. 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다.var arr = [1, 2, 3];
console.log(typeof arr); // "object"
console.log(arr instanceof Array); // true
typeof 1; // "number"
typeof NaN; // "number"
typeof 'str'; // "string"
typeof true; // "boolean"
typeof {}; // "object"
typeof []; // "object"
typeof null; // "object"
typeof undefined; // "undefined"
typeof function name() {}; // "function"
5. Falsy
> A
Falsy value는 부울 컨텍스트에서 발견될 때 거짓으로 간주되는 값입니다. MDN> JavaScript 허위 값의 전체 목록
false, 0, -0, 0n, "", '',, NaN, null, undefined, document.all> 잘못된 값은 if 블록을 우회합니다. 전:
if (null) {
} else {
console.log('Falsy');
}
const a = undefined || 'Falsy';
// result: Falsy, a = "Falsy"
> 거짓 값 필터링
const arr = [1, 'Dyno', false, 0, true, NaN, 2000];
var filteredArr = arr.filter(Boolean);
// result: filteredArr = [1, "Dyno", true, 2000]
6. Template string `${}`
const name = 'Dyno';
const hello1 = 'Hello ' + name + ', how are you?';
const hello2 = `Hello ${name}, how are you?`; // template string.
7. Rounding number to n decimal place
var num = 25.0420001;
console.log(typeof num); // "number"
num = num.toFixed(2); // num = "25.04"
console.log(typeof num); // ❗ "string"
8. Check variable - convert a variable to Boolean (!! operator)
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!1); // true
Reference
이 문제에 관하여(자바스크립트 팁과 요령), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/amnaabd/javascript-tips-tricks-5fjk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
