이전에는 배열 메소드가 브라우저에서 자체적으로 지원되지 않던 시절이 있었습니다. 그 당시에 사람들은 보다 나은 방법으로 배열이나 객체를 다루기 위해 라이브러리, 즉 배열이나 객체를 다루기 위한 도구 모음집을 만들었습니다. 이번 스프린트 Underbar는 배열, 객체를 다루는 라이브러리입니다. 여러분이 이 라이브러리를 직접 만들어보면서, 배열 메소드의 작동원리를 보다 더 심도있게 이해할 수 있습니다.
Underbar의 모티브가 되는 라이브러리로는, underscore.js, lodash가 있습니다. 이 라이브러리는 여전히 JavaScript 생태계에서 많이 쓰이는 인기있는 라이브러리입니다. 여러분들도 보다 나은 프로그래밍을 해주는 라이브러리를 만들어서 효율적이고 아름다운 프로그래밍으로 한 발자국 더 나아가봅시다.
이 repository에는 대부분의 함수들에 대한 코드가 누락되었습니다. 여러분들은 함수들을 구현하며 라이브러리를 수정하게 됩니다. 함수들은 두개의 섹션으로 나뉘어져 각각에 대해 별도의 test suite가 있습니다.
spec 디렉토리 안에 test suites 파일이 있습니다. 누락된 함수들을 구현하여 모든 테스트를 통과시키는것이 목표입니다. 브라우저에서 SpecRunner.html을 열어 모든 테스트를 실행하세요.
src 디렉토리 안의 파일에는 함수에 대한 정의 및 설명이 들어 있습니다. 모든 테스트를 통과시켜 각 함수들을 구현하세요.
Part 1의 테스트를 통과합니다.
Part 2의 테스트를 통과합니다.
주의 사항
브라우저는 여러분들이 구현할 일부 기능과 같은 내장 함수들(forEach, map, reduce, filter 등)을 제공합니다. 이번 과제에서 극히 일부를 제외한 모든 내장 함수들은 사용이 금지되어 있습니다.
과제 제출 시, console.log를 모두 제거하셔야 합니다.
Advanced의 테스트를 통과합니다.
여러분이 구현한 코드를 실제 라이브러리에 있는것과 비교해보세요. 이 과제는 원래 라이브러리에서 약간의 복잡성을 제거했습니다. 어디에서 변경된 부분들이 있는지 살펴보시고, 원래 라이브러리는 대응하고 있지만 여러분의 함수에서 대응하지 못하는 edge cases는 어떤 것들이 있는지 이해하려고 해보세요.
많은 함수에서 collections라는 파라미터가 있는 것을 발견할 수 있습니다. 함수의 인자 collections은 배열 혹은 객체가 될 수 있으며. 일부 함수는 두 경우를 모두 처리할 수 있어야 합니다.
얼마나 많은 인자들이 전달될지 미리 알 수 없다면 ... (rest parameter)를 사용해보세요.
functions을 작성하면서, 이 function 이 어떤 인자(arguments)를 받는지 혹은 어떻게 작동하는지 궁금할 때가 있습니다. 만약 주석들이 명쾌하지 않을때는 underscore.js 또는 lodash의 공식 라이브러리의 문서를 참고하세요.
실제 underscore.js 코드와 test suite 를 다운로드하고, 어떻게 작동하는지 이해하려고 노력하세요. 이를 수행하는 가장 좋은 방법은 코드를 부분별로 나눠보고 어떤 테스트가 실패하는지 확인하는 것입니다.
실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분입니다.
대표적으로
동기와 비동기의 개념을 익히고, 다음에 있을 타이머 세션을 준비합시다.
var obj = {
fn: function(a,b) {
return this;
}
};
var obj2 = {
method: obj.fn
};
console.log(obj2.method() === obj2);
console.log(obj.fn() === obj);
아래와 같은 코드가 있다고 가정해봅시다.
let fn = function (one, two) {
console.log(this, one, two);
};
let r = {r:1};
let g = {g:1};
let b = {b:1};
let y = {y:1};
r.method = fn;
다음과 같이 호출할 때 각 케이스에서 this 의 값은 무엇일까요?
// (1)
r.method(g,b);
// (2)
fn(g,b);
// (3)
fn.call(r,g,b);
// (4)
r.method.call(y,g,b)
_.throttle(func, wait)
wait milliseconds 시간 내에 최대 한번 함수 func이 호출될 수 있도록 만들어 주세요. 이 함수는 비싼 APIs에 대한 접근을 제한할때 유용합니다. 사용 방법을 살펴 보겠습니다.
let counter = 0;
let increment = function() {
counter = counter + 1;
return counter;
};
// throttle 함수를 이용해서 throttledIncrement라는 함수를 만듭니다.
// 이 함수는 100ms마다 최대 한 번만 호출 가능합니다.
let throttledIncrement = _.throttle(increment, 100);
// counter는 현재 1입니다.
throttledIncrement(); // return 1
// increment 함수는 100ms 안에 실행되도록 예약되어있습니다.
throttledIncrement(); // return 1
// (아직 100ms가 지나지 않았으므로) 이 함수는 아무일도 하지 않을 것입니다.
throttledIncrement(); // return 1
이 함수의 실행 방식이 이해가 되지 않으면, lodash 사이트에서 개발자 콘솔을 열어 위에 있는 코드를 직접 실행해보시기 바랍니다.