25.05.27 - se5ri/React GitHub Wiki
- JSP, Servlet, ASP, PHP λ±μΌλ‘ κ°λ°
- λΈλΌμ°μ λ μλ²μ νμ΄μ§ λ¨μλ‘ μμ²μ 보λ΄λ©° μΉμλ²λ μμ±λ νμ΄μ§λ₯Ό(HTML) μλ΅
- νλ©΄(View, UI)μ λ§λλ μν μ λ°±μλμ μΉμλ²κ° λ΄λΉ
- μλ°μ€ν¬λ¦½νΈλ νΌ λ°μ΄ν° κ²μ¦ λ±μ κΈ°λ³Έμ μΈ κΈ°λ₯λ§ λ΄λΉ
- λΈλΌμ°μ νλ©΄μ μΌλΆλ§ κ°±μ μ΄ νμν κ²½μ°μλ νμ΄μ§ μ 체λ₯Ό μλ²μ μμ²ν΄μ λ°μμ€λ―λ‘ λ§€λ² λ¦¬νλμκ° λ°μν΄μ UXμ μ’μ§ μμ
- Ajax, jQuery λ± ν΄λΌμ΄μΈνΈ μλ°μ€ν¬λ¦½νΈ API μ¬μ©
- λΈλΌμ°μ λ μλ²μ νμ΄μ§ λ¨μλ‘ μμ²μ 보λ΄λ©° μΉμλ²λ μμ±λ νμ΄μ§λ₯Ό(HTML) μλ΅
- νλ©΄(View, UI)μ λ§λλ μν μ λ°±μλμ μΉμλ²κ° λ΄λΉ
- νλ©΄ λ‘λ© ν μ¬μ©μμ μνΈμμ©μ μν΄μ λ°μνλ λΆλΆ κ°±μ μ νλ‘ νΈμλμ JSκ° λ΄λΉ
- λΈλΌμ°μ λ μλ²μ νμ΄μ§ λ¨μλ‘ μμ²μ 보λ΄μ§λ§ κ°μ νμ΄μ§ λ΄μμμ 컨ν μΈ κ°±μ μ Ajaxλ₯Ό μ΄μ©ν΄μ μλ²λ‘λΆν° λ°μ΄ν°λ₯Ό λ°μμ¨ ν DOM APIλ‘ νλ©΄ κ°±μ
- λΈλΌμ°μ νλ©΄μ μΌλΆλ§ κ°±μ μ΄ νμν κ²½μ° μ 체 νλ©΄ 리νλμκ° μ€μ΄λ€μ΄μ UXμ μ’μ
- νλμ HTML νμ΄μ§μμ μ ν리μΌμ΄μ μ λͺ¨λ νλ©΄κ³Ό κΈ°λ₯ μ 곡
- μ₯μ
- μ 체 νμ΄μ§λ₯Ό λ€μ λΆλ¬μ€μ§ μκ³ νμν λ°μ΄ν°λ§ λ‘λ©ν΄μ λΉ λ₯Έ νλ©΄ μ ν
- κΉλΉ‘μ μλ νλ©΄ μ ν, μ± κ°μ UX ꡬν
- μλ² λΆλ΄μ΄ κ°μλλ©° ν΄λΌμ΄μΈνΈ μ€μ¬μΌλ‘ κ°λ° κ°λ₯
- λ¨μ
- λͺ¨λ κΈ°λ₯μ ν νμ΄μ§μμ λ€ κ΅¬ννλ€ λ³΄λ μν(λ°μ΄ν°, λ³μ) κ΄λ¦¬κ° μ΄λ €μ
- μλ°μ€ν¬λ¦½νΈμμ HTML μ½λλ₯Ό μμ±ν΄μΌ νλ―λ‘ κ°λ° μμ°μ± μ ν
- λΈλΌμ°μ μ DOMμ μμ£Ό κ°±μ νλ€λ³΄λ©΄ μ±λ₯ μ ν λ°μ
- Angular, React, Vue.js λ±μ΄ λνμ μΌλ‘ SPA κ°λ°μ μ§μνλ νλ μμν¬, λΌμ΄λΈλ¬λ¦¬
- Reactμ νΉμ§
- λ΄μ₯λ μν κ΄λ¦¬ κΈ°λ₯κ³Ό μλνν° λΌμ΄λΈλ¬λ¦¬κ° λ§μ
- JSXλ₯Ό μ΄μ©ν΄μ HTML μμ°μ±μ΄ λμ
- κ°μ DOMμ μ΄μ©ν΄μ μ±λ₯ μ ν μ΅μ
- ν¨μ ννμμ λμμΌλ‘ κ°κ²°νκ² ν¨μ μ μ
- μ΅λͺ ν¨μλ‘λ§ μ μ κ°λ₯
- μ€νν μ½λκ° νλλ§ μλ€λ©΄ ν¨μ λ³Έλ¬Έμ μ€κ΄νΈ μλ΅ κ°λ₯
- ν¨μ λ³Έλ¬Έμ μ€κ΄νΈκ° μλ΅λ κ²½μ° ν¨μμ μ½λκ° μλμΌλ‘ 리ν΄κ°μΌλ‘ μ¬μ©λ¨
- λ§€κ° λ³μκ° νλλ§ μλ€λ©΄ λ§€κ°λ³μμ κ΄νΈ μλ΅ κ°λ₯
- λ§€κ°λ³μκ° μλ ν¨μ
// κΈ°μ‘΄ ν¨μ
const add = function(x, y) {
return x + y;
};
// νμ΄ν ν¨μ
const add = (x, y) => {
return x + y;
}
// νμ΄ν ν¨μ λ³Έλ¬Έμ μ€κ΄νΈ μλ΅
const add = (x, y) => x + y;
- λ§€κ°λ³μκ° μλ ν¨μ
// κΈ°μ‘΄ ν¨μ
const add10 = function(x) {
return x + 10;
};
// νμ΄ν ν¨μ
const add10 = (x) => {
return x + 10;
}
// νμ΄ν ν¨μ λ§€κ°λ³μμ κ΄νΈμ λ³Έλ¬Έμ μ€κ΄νΈ μλ΅
const add10 = x => x + 10;
- λ°°μ΄μ΄λ κ°μ²΄μ μμ±μ ν΄μ²΄νμ¬ κ·Έ κ°μ κ°λ³ λ³μμ λ΄μ μ μλ ννμ
- λ°°μ΄ κ΅¬μ‘° λΆν΄
const foo = ['yellow', 'green', 'blue'];
const [one, two, three] = foo;
console.log(one, two, three); // yellow green blue
- κ°μ²΄ ꡬ쑰 λΆν΄
const kim = { userName: 'ꡬλΆν', userAge: 35 };
const { userName, userAge: age } = kim;
console.log(userName, age); // ꡬλΆν 35
- μ ν΄μ§μ§ μμ μμ λ§€κ°λ³μλ₯Ό λ°°μ΄λ‘ μ λ¬ λ°μ
- ν¨μμ λ§μ§λ§ λ§€κ°λ³μ μμ
...
μ λΆμ
function fn(a, b, ...args) {
console.log(a, b, args);
}
fn(); // undefined undefined []
fn(1); // 1 undefined []
fn(2, 3); // 2 3 []
fn(4, 5, 6); // 4 5 [6]
fn(7, 8, 9, 10, 11); // 7 8 [9, 10, 11]
- λ°°μ΄μ΄λ κ°μ²΄μ μμ, μμ±μ λΆν΄ν΄μ λ°°μ΄, κ°μ²΄, ν¨μμ μ λ¬
- λ°°μ΄, κ°μ²΄μ 리ν°λ΄μ΄λ ν¨μμ μΈμκ° λ³μ μμ
...
μ λΆμ -
λλ¨Έμ§ λ§€κ°λ³μ
λ μ¬λ¬ λ§€κ°λ³μλ₯Ό νλμ λ°°μ΄λ‘ λͺ¨μμ μ²λ¦¬ νλ λ°λ©΄μ κ° μ°μ°μ
λ νλμ λ°°μ΄, κ°μ²΄λ₯Ό μ¬λ¬κ°μ μμ, μμ±μΌλ‘ λΆν΄ν΄μ μ λ¬ - μ΄ν°λ¬λΈ κ°μ²΄(λ°°μ΄, κ°μ²΄ λ±)λ₯Ό μμ½κ² 볡μ¬
const state = [ 'orange', 'yellow', 'green' ];
const newState = [ ...state ]; // 볡μ¬λ λ°°μ΄ ['orange', 'yellow', 'green']
const state = { name: 'μ ꡬν', age: 30 };
const newState = { ...state }; // 볡μ¬λ κ°μ²΄ { name: 'μ ꡬν', age: 30 }
function sum(x, y) {
return x + y;
}
const numbers = [ 1, 2 ];
console.log(sum(...numbers)); // 3
//μ κ°κ΅¬λ¬Έμ μ°μ§ μμ κ²½μ°: sum(number[0] + number[1])
- 쑰건μ λ°λΌ κ°μ μ ννλ μ°μ°μ
- 쑰건 ? μ°ΈμΌ λμ κ° : κ±°μ§μΌ λμ κ°
var num = 10;
var result = num % 2 === 0 ? 'μ§μ' : 'νμ'; (True / False)
console.log(result); // 'μ§μ'
var num = 15;
var result = num % 2 === 0 ? 'μ§μ' : 'νμ';
console.log(result); // 'νμ'
- μ½λλ₯Ό νμΌ λ¨μλ‘ λΆλ¦¬νκ³ , λΆνμν μ μ μ€μΌ μμ΄ μ¬μ¬μ©ν μ μκ² ν΄μ€
- νμΌ μμ²΄κ° λ 립λ μ€μ½νλ₯Ό κ°μ§λ―λ‘ λͺ¨λλ΄μμ μ μΈν λ³μλ μ μλ³μκ° μλ λͺ¨λλ³μλ‘μ¨ λͺ¨λ λ΄λΆμμλ§ μ κ·Ό κ°λ₯
- λͺ¨λ κ΅¬μ± μμ(λ³μ, ν¨μ, ν΄λμ€, νμ λ³μΉ, μΈν°νμ΄μ€ λ±)λ₯Ό λͺ μμ μΌλ‘ λ΄λ³΄λ΄κΈ°(export) νλ©΄ λ€λ₯Έ λͺ¨λμμ μ¬μ© κ°λ₯
- λ€λ₯Έ λͺ¨λμμ
export
ν κ°μ μ°Έμ‘°νλ €λ©΄import
ꡬ문μ μ¬μ© - λΈλΌμ°μ μμ λͺ¨λμ μ¬μ©νλ €λ©΄
<script>
νκ·Έμtype="module"
μμ±μ μΆκ°
- λͺ¨λ κ΅¬μ± μμ(λ³μ, ν¨μ, ν΄λμ€, νμ λ³μΉ, μΈν°νμ΄μ€ λ±)λ₯Ό μΈλΆλ‘ λ΄λ³΄λ΄ λ€λ₯Έ λͺ¨λμμ μ¬μ©ν μ μκ² ν΄μ£Όλ ν€μλ
- λ΄λ³΄λ΄κΈ°ν κ° κ΅¬μ± μμ μμ
export
ν€μλλ₯Ό μ§μ νκ±°λexport { plus, minus }
ννλ‘ μ μΈκ³Ό λΆλ¦¬ν΄μ λ°λ‘ μμ± κ°λ₯ -
export
λ μ¬λ¬λ² μ¬μ© κ°λ₯ -
import
μ μ€κ΄νΈ μμ μ νν κ΅¬μ± μμλͺ μ μ¬μ©
- λ΄λ³΄λ΄κΈ°ν κ΅¬μ± μμ μμ
export default
ν€μλ μ§μ -
export default
λ λͺ¨λ λ΄μμ νλ²λ§ μ¬μ© κ°λ₯ -
import
μ μ΄λ¦μ μμ λ‘κ² μ§μ κ°λ₯
- λ€λ₯Έ λͺ¨λμμ
export
ν κ΅¬μ± μμλ₯Ό κ°μ Έμ¬ λ μ¬μ©νλ ν€μλ
-
export
λ‘ λ΄λ³΄λΈ κ΅¬μ± μμλ₯Ό μ€κ΄νΈλ‘ κ°μΈμ κ°μ Έμ΄ - μ΄λ¦μ΄ μ νν μΌμΉ ν΄μΌ νλ©° νμν κ²λ§ μ νν΄μ
import
κ°λ₯ - λ³μΉ μ¬μ© κ°λ₯
-
export default
λ‘ λ΄λ³΄λΈ κ΅¬μ± μμλ μ€κ΄νΈ μμ΄ μμ λ‘κ² μ΄λ¦μ μ§μ ν΄μimport
κ°λ₯
- Named Importμ Default Importλ₯Ό κ°μ΄ μ¬μ© (μΌκ΄μ±κ³Ό κ°λ μ± μ νλ‘ κΆμ₯νμ§ μμ)
- νμ
λ³μΉμ΄λ μΈν°νμ΄μ€λ₯Ό
export
νμ κ²½μ°import
μtype
ν€μλ μΆκ° (μλ΅ κ°λ₯)
- math.ts
// Named Export
export function plus(a: number, b: number) {
return a + b;
}
// Named Export
export function minus(a: number, b: number) {
return a - b;
}
// Default Export
export default { plus, minus }
- index.ts
// Named Import
import { plus as add, minus } from './math.js';
// Default Import
import MyMath from './math.js'; // { plus, minus }
add(2, 3);
minus(2, 3);
MyMath.plus(2, 3);
MyMath.minus(2, 3);
- index.html
<script type="module" src="index.js"></script>
- λΉλκΈ° μμ μ μ±κ³΅ λλ μ€ν¨ κ²°κ³Όλ₯Ό λμ€μ μ λ¬νκΈ° μν κ°μ²΄(ES2015μ μΆκ°)
- μ΄λ€ ν¨μκ° Promise κ°μ²΄λ₯Ό λ°ννλ€λ©΄ νμ¬ μμ μ μ²λ¦¬ μ€μ΄λ©° μμ μ΄ μ²λ¦¬ μλ£λλ λ―Έλμ μ΄λ€ κ°μ μ€λΉν΄μ μ λ¬ν κ²μ΄λΌλ μ½μ
- Promise κ°μ²΄ μμ±μ μ¬μ©
-
executor
: λΉλκΈ°λ‘ μ²λ¦¬ν μμ μ κ°μ§ ν¨μ -
resolve
: μμ μ΄ μ±κ³΅μ μΌλ‘ μλ£ λμμ λ νΈμΆν ν¨μ. μΈμκ°μ μμ κ²°κ³Όλ₯Ό μ λ¬νλλ° μ¬μ© -
reject
: μμ μ΄ μ€ν¨ νμ λ νΈμΆν ν¨μ. μΈμκ°μ μ€ν¨ μ¬μ λ₯Ό μ λ¬νλλ° μ¬μ©
new Promise<T>(
executor: (
resolve: (value: T) => void,
reject: (reason?: any) => void
) => void
)
- Promise κ°μ²΄λ₯Ό λ°ννλ ν¨μλ λΉλκΈ° ν¨μκ° λ¨
-
executor
ν¨μμμ μ²λ¦¬ν μμ ꡬν - μμ
μ±κ³΅ μ
resolve()
λ₯Ό νΈμΆνκ³ μΈμκ°μΌλ‘ μμ κ²°κ³Ό μ λ¬ - μμ
μ€ν¨ μ
reject()
λ₯Ό νΈμΆνκ³ μΈμκ°μΌλ‘ μ€ν¨ μ¬μ μ λ¬
function f1(){
return new Promise<string>((resolve, reject) => {
const delay = Math.random()*1000*10;
setTimeout(() => {
console.log('f1 μμ
μλ£.', delay);
if(delay < 5000) {
resolve('f1μ μμ
κ²°κ³Ό.');
}else{
reject('f1 μμ
μ€ μλ¬ λ°μ.');
}
}, delay);
});
}
-
then(onfulfilled?: value => (void | Promise), onrejected?: reason => (void | Promise)): Promise
-
onfulfilled
: resolve()κ° νΈμΆλ λ μ€νλλ ν¨μ -
value
: λΉλκΈ° ν¨μμμ μμ μ±κ³΅ μ νΈμΆν resolve()μ μ λ¬ν μΈμκ° -
onrejected
: reject()κ° νΈμΆλ λ μ€νλλ ν¨μ -
reason
: λΉλκΈ° ν¨μμμ μμ μ€ν¨ μ νΈμΆν reject()μ μ λ¬ν μΈμκ° - 리ν΄κ°: μλ‘μ΄ Promiseκ° λ°νλμ΄ μ²΄μΈ λ°©μμΌλ‘ νΈμΆμ΄ κ°λ₯
-
onfulfilled
λonrejected
κ°Promise
λ₯Ό λ°ννλ ν¨μμΌ κ²½μ° μ¬λ¬ λΉλκΈ° ν¨μλ₯Ό μμ°¨μ μΌλ‘ νΈμΆνλλ° μ¬μ©
function test(){ f1().then((result) => { console.log('f1μ μμ μ΄ μλ£λ ν νΈμΆ.', result); }, (reason) => { console.error('f1μ μμ μ΄ μ€ν¨ν ν νΈμΆ.', reason); }).then(()=>{}).then(()=>{}).then(()=>{}); // 체μΈλ°©μμΌλ‘ μ΄μ΄μ Έ μ°λ κ² κ°λ₯ }
-
-
catch(onrejected?: reason => (void | Promise)): Promise
-
onrejected
:then()
μonrejected
μ λμΌ -
then()
μ λλ²μ§Έ μΈμμΈonrejected
μμ μ²λ¦¬νμ§ μμ μλ¬λcatch()
μμ μ²λ¦¬λ¨
-
-
finally(onfinally?: () => void): Promise
-
onfinally
: Promiseμ μ±κ³΅ μ€ν¨μ μκ΄μμ΄ νμ νΈμΆλλ ν¨μ
function test(){ f1().then((result) => { console.log('4. 첫λ²μ§Έ f1μ μμ μ΄ μλ£λ ν νΈμΆ.', result); }).then(f1).then((result) => { console.log('5. λλ²μ§Έ f1μ μμ μ΄ μλ£λ ν νΈμΆ.', result); }).catch((reason) => { console.error('f1μ μμ μ΄ μ€ν¨ν ν νΈμΆ.', reason); }).finally(() => { console.log('f1μ μ±κ³΅, μ€ν¨μ μκ΄μμ΄ νμ νΈμΆ.'); }); }
-
- Promiseλ₯Ό μ½κ² λ€λ£¨κΈ° μν΄ ES2017μ μΆκ°λ λ¬Έλ²
- μ½λ°±ν¬μ΄λ
then()
μ 볡μ‘ν μ²΄μΈ λ°©μμ μ¬μ©νμ§ μκ³ λ λΉλκΈ° ν¨μμ μμ°¨μ μΈ νΈμΆμ΄ κ°λ₯ν΄μ λΉλκΈ° μ½λλ₯Ό λ§μΉ λκΈ° μ½λμ²λΌ μμ±ν μ μμ
- ν¨μ μ μΈλΆμ λΆμ΄λ ν€μλ
-
async
ν€μλκ° λΆμ ν¨μλ μλμΌλ‘ Promise κ°μ²΄λ₯Ό λ°ν -
async
ν¨μκ° λ¦¬ν΄ν κ°μ Promiseμresolve()
μ κ°μ μ λ¬νλ ν¨κ³Ό -
async
ν¨μκ° throwν κ°μ Promiseμreject()
μ κ°μ μ λ¬νλ ν¨κ³Ό
function p1(){ // Promise
return new Promise((resolve) => {
resolve('p1 κ²°κ³Ό');
});
}
async function a1(){ // async
return 'a1 κ²°κ³Ό';
}
- Promise κ°μ²΄ μμ λΆμ¬μ, Promiseκ° μ²λ¦¬λ λκΉμ§(settled) κΈ°λ€λ Έλ€κ°, κ·Έ κ²°κ³Όκ°μ λ°νν΄μ£Όλ ν€μλ
-
async
ν¨μ μμμλ§ μ¬μ© κ°λ₯ - μ½λμ νλ¦μ΄ λκΈ°ν¨μλ₯Ό νΈμΆνλ κ²κ³Ό λΉμ·ν΄μ κ°λ μ±μ΄ μ’μμ§
function test(){
p1().then(result => {
console.log('p1μ μμ
κ²°κ³Ό.', result);
}).then(a1).then(result => {
console.log('a1μ μμ
κ²°κ³Ό.', result);
}).then(p2).then(result => {
console.log('p2μ μμ
κ²°κ³Ό.', result);
}).then(a2).then(result => {
console.log('a2μ μμ
κ²°κ³Ό.', result);
}).catch(error => {
console.log('μλ¬ λ°μ.', error);
});
}
async function test(){
try {
const result1 = await p1();
console.log('p1μ μμ
κ²°κ³Ό.', result1);
const result2 = await a1();
console.log('a1μ μμ
κ²°κ³Ό.', result2);
const result3 = await p2();
console.log('p2μ μμ
κ²°κ³Ό.', result3);
const result4 = await a2();
console.log('a2μ μμ
κ²°κ³Ό.', result4);
} catch(error) {
console.log('μλ¬ λ°μ.', error);
}
}
-
push(...items): number
- λ°°μ΄μ λ§μ§λ§ μμΉμ items μμλ€μ μΆκ°νκ³ μλ‘μ΄ λ°°μ΄ κΈΈμ΄λ₯Ό λ°ν
-
pop(): any | undefined
- λ°°μ΄μ λ§μ§λ§ μμλ₯Ό μ κ±°νκ³ λ°ν
const fruits = ['μ¬κ³Ό', 'λ°λλ'];
const newLength = fruits.push('μ€λ μ§');
console.log(newLength, fruits); // 3 ['μ¬κ³Ό', 'λ°λλ', 'μ€λ μ§']
fruits.push('λΈκΈ°', 'ν¬λ');
console.log(fruits); // ['μ¬κ³Ό', 'λ°λλ', 'μ€λ μ§', 'λΈκΈ°', 'ν¬λ']
let lastFruit = fruits.pop();
console.log(lastFruit, fruits); // ν¬λ ['μ¬κ³Ό', 'λ°λλ', 'μ€λ μ§', 'λΈκΈ°']
lastFruit = fruits.pop();
console.log(lastFruit, fruits); // λΈκΈ° ['μ¬κ³Ό', 'λ°λλ', 'μ€λ μ§']
-
unshift(...items): number
- λ°°μ΄μ 맨μμ items μμλ€μ μ½μ νκ³ μλ‘μ΄ λ°°μ΄ κΈΈμ΄λ₯Ό λ°ν
-
shift(): any | undefined
- λ°°μ΄μ 첫 λ²μ§Έ μμλ₯Ό μ κ±°νκ³ λ°ν
const fruits = ['μ¬κ³Ό', 'λ°λλ'];
const newLength = fruits.unshift('λΈκΈ°');
console.log(newLength, fruits); // 3 ['λΈκΈ°', 'μ¬κ³Ό', 'λ°λλ']
fruits.unshift('λΈκΈ°', 'ν¬λ');
console.log(fruits); // ['λΈκΈ°', 'ν¬λ', 'λΈκΈ°', 'μ¬κ³Ό', 'λ°λλ']
let firstFruit = fruits.shift();
console.log(firstFruit, fruits); // λΈκΈ° ['ν¬λ', 'λΈκΈ°', 'μ¬κ³Ό', 'λ°λλ']
firstFruit = fruits.shift();
console.log(firstFruit, fruits); // ν¬λ ['λΈκΈ°', 'μ¬κ³Ό', 'λ°λλ']
-
indexOf(searchElement, fromIndex?: number): number
- λ°°μ΄μ μμ μ€
searchElement
μ μΌμΉνλ 첫 λ²μ§Έ μμμ μΈλ±μ€λ₯Ό λ°ν. μΌμΉνλ μμκ° μμΌλ©΄ -1 λ°ν -
fromIndex
μ μ§μ ν μΈλ±μ€λΆν° νμμ μμ (κΈ°λ³Έκ° 0)
- λ°°μ΄μ μμ μ€
-
lastIndexOf(searchElement, fromIndex?: number): number
- λ°°μ΄μ μμ μ€
searchElement
μ μΌμΉνλ λ§μ§λ§ μμμ μΈλ±μ€λ₯Ό λ°ν. μΌμΉνλ μμκ° μμΌλ©΄ -1 λ°ν -
fromIndex
μ μ§μ ν μΈλ±μ€λΆν° νμμ μμ (κΈ°λ³Έκ° 0)
- λ°°μ΄μ μμ μ€
const arr = [1, 3, 5, 8, 9, 3, 4, 5];
console.log('첫λ²μ§Έ 3μ μμΉ', arr.indexOf(3)); // 1
console.log('λ§μ§λ§ 3μ μμΉ', arr.lastIndexOf(3)); // 5
-
includes(searchElement, fromIndex?: number): boolean
- λ°°μ΄μ μμ μ€
searchElement
κ°μ΄ μλμ§ μ¬λΆλ₯Ό λ°ν -
fromIndex
μ μ§μ ν μΈλ±μ€λΆν° νμμ μμ (κΈ°λ³Έκ° 0)
- λ°°μ΄μ μμ μ€
-
concat(...items)
- items λ°°μ΄λ€μ λ³ν©ν μλ‘μ΄ λ°°μ΄μ λ°ν
const arr = ['μ€λ μ§', 'λΈκΈ°', 'λ λͺ¬'];
console.log(arr.includes('λ λͺ¬')); // true
console.log(arr.includes('μ¬κ³Ό')); // false
const arr2 = arr.concat(['μ¬κ³Ό', 'λ°λλ'], ['ν¬λ']);
console.log(arr2.includes('μ¬κ³Ό')); // true
console.log(arr); // [ 'μ€λ μ§', 'λΈκΈ°', 'λ λͺ¬' ]
console.log(arr2); // [ 'μ€λ μ§', 'λΈκΈ°', 'λ λͺ¬', 'μ¬κ³Ό', 'λ°λλ', 'ν¬λ' ]
-
splice(start: number, deleteCount?: number, ...items)
- λ°°μ΄μμ μμλ₯Ό μΆκ°, μ κ±° λλ κ΅μ²΄ νλ€.
-
start
: μμ μΈλ±μ€ -
deleteCount
: μ κ±°ν μμ μ -
items
: μ½μ ν μμ λͺ©λ‘
const arr1 = ['νλ', 'λμμ΄', 'μμΌ', 'λꡬ리', 'μ€μ§μ΄', 'μ‘κ°μ₯', 'μΉ λ¨κΈ°'];
let arr2 = arr1.splice(1, 2); // μΈλ±μ€ 1λΆν° 2κ° μΆμΆ
console.log(arr1, arr2); // ['νλ','λꡬ리','μ€μ§μ΄','μ‘κ°μ₯','μΉ λ¨κΈ°'] ['λμμ΄','μμΌ']
arr2 = arr1.splice(2, 2); // μΈλ±μ€ 2λΆν° 2κ° μΆμΆ
console.log(arr1, arr2); // ['νλ', 'λꡬ리', 'μΉ λ¨κΈ°'] ['μ€μ§μ΄', 'μ‘κ°μ₯']
arr2 = arr1.splice(2); // μΈλ±μ€ 2λΆν° λκΉμ§ μΆμΆ
console.log(arr1, arr2); // ['νλ', 'λꡬ리'] ['μΉ λ¨κΈ°']
arr2 = arr1.splice(1, 1, 'λμμ΄', 'μμΌ'); // μΈλ±μ€ 1λΆν° 1κ° μΆμΆνκ³ λμμ΄, μμΌ μΆκ°
console.log(arr1, arr2); // ['νλ', 'λμμ΄', 'μμΌ'] ['λꡬ리']
-
slice(start?: number, end?: number)
- λ°°μ΄μ μ§μ ν λ²μλ₯Ό 볡μ¬ν΄μ μ λ°°μ΄λ‘ λ°ν
-
start
: μμ μΈλ±μ€ (κΈ°λ³Έκ° 0) -
end
: μ’ λ£ μΈλ±μ€ (κΈ°λ³Έκ° length)
const arr1 = ['νλ', 'λμμ΄', 'μμΌ', 'λꡬ리', 'μ€μ§μ΄', 'μ‘κ°μ₯', 'μΉ λ¨κΈ°'];
let arr2 = arr1.slice(1, 3); // μΈλ±μ€ 1λΆν° 3 μκΉμ§ 볡μ¬
console.log(arr2); // ['λμμ΄', 'μμΌ']
arr2 = arr1.slice(2, 2); // μΈλ±μ€ 2λΆν° 2 μκΉμ§ 볡μ¬
console.log(arr2); // []
arr2 = arr1.slice(5); // μΈλ±μ€ 5λΆν° λκΉμ§ 볡μ¬
console.log(arr2); // ['μ‘κ°μ₯', 'μΉ λ¨κΈ°']
arr2 = arr1.slice(-2); // μΈλ±μ€ -2λΆν° λκΉμ§ 볡μ¬
console.log(arr2); // ['μ‘κ°μ₯', 'μΉ λ¨κΈ°']
console.log(arr1); // ['νλ', 'λμμ΄', 'μμΌ', 'λꡬ리', 'μ€μ§μ΄', 'μ‘κ°μ₯', 'μΉ λ¨κΈ°'];
-
forEach(callbackFn: (currentValue, index, array), thisArg?): void
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μλ₯Ό μ€ννλ€. - μ½λ°± ν¨μμ
currentValue
μλ λ°°μ΄μ μμκ°,index
μλ μ λ¬λλ μμμ μΈλ±μ€κ°,array
μλ μλ³Έ λ°°μ΄μ΄ μ λ¬λλ€. -
thisArg
λ μ½λ°± ν¨μμμthis
λ‘ μ¬μ©ν κ°μ²΄λ₯Ό μ λ¬
- λ°°μ΄μ κ° μμμ λν΄
const arr = [10, 20, 30];
let newArr: number[] = [];
// λ°°μ΄μ κ° μμλ₯Ό μννλ©° μ€ν
arr.forEach((elem, i) => {
newArr.push(elem ** 2);
});
console.log('forEach', newArr); // [100, 400, 900]
-
map(callbackfn: (currentValue, index, array), thisArg?): any[]
- forEachμ λμΌ
- forEachλ 리ν΄κ°μ΄ μμ§λ§ mapμ μ½λ°± ν¨μμμ 리ν΄ν κ°μ μλ‘μ΄ λ°°μ΄λ‘ λ§λ€μ΄μ λ°ννλ€.
const arr = [10, 20, 30];
// λ°°μ΄μ κ° μμλ₯Ό μννλ©° λ°νλ°μ κ°μΌλ‘ μλ‘μ΄ λ°°μ΄ μμ±
const newArr = arr.map(function(elem, i) {
// μμμ μ κ³±κ° λ°ν
return elem ** 2;
});
console.log('map', newArr); // [100, 400, 900]
-
find(callbackFn: (currentValue, index, array), thisArg?): any | undefined
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μκ° νΈμΆλλ€. -
true
λ₯Ό λ°νν 첫 μ½λ°± ν¨μμ μ λ¬λ μ리먼νΈκ°find
μ κ²°κ³Όλ‘ λ°νλλ€. -
true
λ₯Ό λ°νν μ½λ°± ν¨μκ° μμ κ²½μ°undefined
κ° λ°νλλ€.
- λ°°μ΄μ κ° μμμ λν΄
-
findIndex(callbackFn: (currentValue, index, array), thisArg?): number
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μκ° νΈμΆλλ€. -
true
λ₯Ό λ°νν 첫 μ½λ°± ν¨μμ μ λ¬λ μΈλ±μ€κ°find
μ κ²°κ³Όλ‘ λ°νλλ€. -
true
λ₯Ό λ°νν μ½λ°± ν¨μκ° μμ κ²½μ°0
μ΄ λ°νλλ€.
- λ°°μ΄μ κ° μμμ λν΄
-
filter(callbackFn: (currentValue, index, array), thisArg?): any | undefined
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μκ° νΈμΆλλ€. -
true
λ₯Ό λ°νν μ½λ°± ν¨μμ μ λ¬λ μμλ§ λͺ¨μμ μλ‘μ΄ λ°°μ΄λ‘ λ°ν -
true
λ₯Ό λ°νν μ½λ°± ν¨μκ° μμ κ²½μ°undefined
κ° λ°νλλ€.
- λ°°μ΄μ κ° μμμ λν΄
const arr = [1, 3, 5, 8, 9, 3, 4, 5];
console.log(arr.find(num => num % 2 === 0)); // 8, λ°°μ΄μ 첫λ²μ§Έ μ§μ μ°ΎκΈ°
console.log(arr.findIndex(num => num % 2 === 0)); // 3, λ°°μ΄μ 첫λ²μ§Έ μ§μμ μΈλ±μ€ μ°ΎκΈ°
console.log(arr.filter(n => n % 2 === 0)); // [8, 4], λ°°μ΄μ λͺ¨λ μ§μλ₯Ό μ°ΎκΈ°
-
some(callbackfn: (currentValue, index, array), thisArg?): boolean
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μκ° νΈμΆλλ€. - μ½λ°± ν¨μ μ€ νλλΌλ
true
λ₯Ό λ°ννλ©΄some
μtrue
λ₯Ό λ°ννλ€. - μ½λ°± ν¨μ μ λΆ
true
λ₯Ό λ°ννμ§ μμΌλ©΄some
μfalse
λ₯Ό λ°ννλ€.
- λ°°μ΄μ κ° μμμ λν΄
-
every(callbackfn: (currentValue, index, array), thisArg?): boolean
- λ°°μ΄μ κ° μμμ λν΄
callbackFn
ν¨μκ° νΈμΆλλ€. - μ½λ°± ν¨μ μ λΆ
true
λ₯Ό λ°ννλ©΄every
λtrue
λ₯Ό λ°ννλ€. - μ½λ°± ν¨μ μ€ νλλΌλ
true
λ₯Ό λ°ννμ§ μμΌλ©΄every
λfalse
λ₯Ό λ°ννλ€.
- λ°°μ΄μ κ° μμμ λν΄
const arr = [1, 2, 3];
const hasEven = arr.some(n => n % 2 === 0); // true, μ§μκ° νλλ‘λ μλκ°?
const isAllEven = arr.every(n => n % 2 === 0); // false, λͺ¨λ μ§μμΈκ°?γ΄
console.log(hasEven, isAllEven);
-
reduce(reducerfn: (previousValue, currentValue, index, array), initialValue?): any
- λ°°μ΄μ κ° μμμ λν΄ μ 곡ν
reducerfn
μ μ€ν - μ΄μ
reducerfn
μ λ°νκ°μ΄ λ€μreducerfn
μ μΈμκ°μΌλ‘ μ λ¬λλ©° μ΅μ’ μ μΌλ‘ νλμ κ²°κ³Όκ°μ λ°ν -
reducerfn
μ΄ μ²μ μ€νλλ©΄ "μ΄μ 리λμμ λ°νκ°"μ΄ μμΌλ―λ‘reduce
ν¨μμ λλ²μ§Έ μΈμλ‘ μ λ¬νλinitialValue
κ°μ μ¬μ©νκ±°λ λλ²μ§Έ μΈμκ° μλ΅λ κ²½μ° λ°°μ΄μ첫λ²μ§Έ index
κ°μ΄ μ§μ λκ³ λ°°μ΄μλλ²μ§Έ μμ
λΆν° 리λμκ° μ€ν - ν¨μν μ€νμΌλ‘ κ°λ°
- λ°°μ΄μ κ° μμμ λν΄ μ 곡ν
-
forEach
ν¨μ μ¬μ©
const arr = [1, 2, 3, 4];
let sum = 0;
arr.forEach(function(value) {
sum += value;
});
console.log(sum); // 0 + 1 + 2 + 3 + 4
-
reduce
ν¨μ μ¬μ©
const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
}, 0);
console.log(sum); // 0 + 1 + 2 + 3 + 4
- μ΄μ μ κ³μ° κ²°κ³Όλ₯Ό κΈ°μ΅νλ κΈ°λ₯μ κ°μΆ ν¨μ
- ν¨μλ κ°μ²΄μ΄κΈ° λλ¬Έμ ν¨μμ μμ±κ°μΌλ‘ κ³μ° κ²°κ³Ό μΊμ
- ν¨μμ μ’ μλ μμ±μ μ΄μ©νκΈ° λλ¬Έμ μΈλΆμ λ ΈμΆνμ§ μκ³ ν¨μ μ체μ μΌλ‘ ꡬν κ°λ₯
- μ΄λ―Έ μνν 볡μ‘ν μ°μ°μ λ°λ³΅νμ§ μλλ‘ ν¨μΌλ‘μ μ±λ₯μ ν₯μ
- μ¬μ©μκ° μ μ μκ² λ΄λΆμ μΌλ‘λ§ λμ
- μΊμμ νμν λ©λͺ¨λ¦¬ μ¬μ©λ μ¦κ°
- λΉμ¦λμ€ λ‘μ§κ³Ό μΊμ± κΈ°λ₯μ νΌμ¬
- λΆν ν μ€νΈ(Load test)λ μκ³ λ¦¬μ¦μ μ±λ₯ ν μ€νΈκ° μ΄λ €μμ§
- ν¨μμμ μ§μ ꡬν
// μ§μ ν μκ° μμμΈμ§ μ¬λΆλ₯Ό λ°ν
const isPrime = function(num){ // num = 5
// μΊμλ₯Ό μν μ½λ
isPrime._cache = isPrime._cache || {};
if(isPrime._cache[num] !== undefined){ // numμ λν΄μ κ³μ°μ΄ λλκ³ μΊμλ κ²½μ°
return isPrime._cache[num];
}
// μμ νλ³ μ½λ
let prime = true;
for(let i=2; i<=Math.sqrt(num); i++){
if(num % i === 0){
prime = false;
break;
}
}
// μΊμλ₯Ό μν μ½λ
isPrime._cache[num] = prime; // isPrime._cache[5] = true;
return prime;
};
console.time('μμμκ°');
console.log('3 -> ', isPrime(3));
console.log('4 -> ', isPrime(4));
console.log('1000000007 -> ', isPrime(1000000007));
console.log('1000000007 -> ', isPrime(1000000007));
console.timeEnd('μμμκ°');
- ν΄λ‘μ νμ©
// λͺ¨λ ν¨μμ λ©λͺ¨μ΄μ μ΄μ
κΈ°λ₯ μΆκ°
Function.prototype.memo = function(key){
this._cache = this._cache || {};
if(this._cache[key] !== undefined){
return this._cache[key];
}else{
return this._cache[key] = this(key);
}
};
// μ§μ ν μκ° μμμΈμ§ μ¬λΆλ₯Ό λ°ν(μμ ν¨μ)
const isPrime = function(num){
// μμ νλ³ μ½λ
let prime = true;
for(let i=2; i<=num; i++){
if(num % i === 0){
prime = false;
break;
}
}
return prime;
};
console.time('μμμκ°');
console.log('3 -> ', isPrime(3));
console.log('4 -> ', isPrime(4));
console.log('1000000007 -> ', isPrime.memo(1000000007));
console.log('1000000007 -> ', isPrime.memo(1000000007));
console.timeEnd('μμμκ°');
π sample
- π» sample
π 01. λͺ©λ‘μ‘°ν
- π» 01. λͺ©λ‘μ‘°ν
π 02. λ±λ‘
- π» 02. λ±λ‘