이번 시간에는 목 데이터와 우리가 흔히 사용하는 맵 메서드의 고찰을 한 번 해볼까 합니다. 저 역시 이번 프로젝트에서 미션 0번까지 마친 후에 다시 미션 1을 진행하면서 이 부분에 대한 어려움과 여러 가지 시도와 실패가 있었기에 그에 대해 한 번 적어보고자 한다.
그 전에 먼저 우리는 목 데이터와 맵 메서드에 대해 한 번 알아봐야 할 필요가 있겠다.
01. 목 데이터
01) 정의
실제 API가 아닌 프론트 개발자가 만든 샘플 데이터를 말한다. 목 데이터는 백엔드 API의 샘플 데이터이기 때문에 실제 응답값의 형태인 JSON 파일로 만들어 줘야 한다. 또한, 목 데이터의 경우 public 폴더에 만들어 준다. 우리가 CRA를 통해서 만든 프로젝트를 배포했을 때 실제 서버에 배포되는 폴더가 public 폴더이다.
그렇다면 이 샘플 데이터를 사용하는 이유가 뭘까?
02) 목 데이터를 사용하는 이유
우리가 현재 프로젝트로 하고 있는 위벅스의 경우, 실제 서버가 있는 서비스가 아닌 연습용 클론 코딩이기때문에 실제 운용하는 api가 없는 상태다. 따라서 아래와 같이 목데이터를 통해 api의 역할을 해 주는 것이 필요하다. 그때 구축용 샘플 데이터가 목데이터다.
물론, 현업에서도 역시 이런 목데이터는 아닐지라도 쓰이긴 쓰인다고 한다.
- 프론트엔드 개발 중 API에서 불러오는 데이터가 필요하지만 아직 API가 개발 중인 경우가 있는데 이럴 때 목 데이터를 만들어 프론트엔드 개발자가 의도한 대로 기능이 구현되는지 확인 할 때 쓰이는 샘플 데이터가 목데이터이다.
- 백엔드 API의 response가 어떤 형태인지 key-value를 확인 후에 목 데이터를 만들어 개발을 진행한다면 나중에 백엔드와의 API 연결이 한결 수월해질 수 있다.
02. 맵 매서드
#자바스크립트 map()은?
built-in 메소드인 map() 메소드는 배열에 사용하는 메소드로 배열의 모든 값들을 순환 후 새로운 배열을 반환하기 위해 사용된다. 즉 모든 배열 값들을 순환할 수 있다는 장점을 가지고 있다. 배열의 값을 순차적으로 가져와 동작하는 루프문과는 다른 방법으로 사용할 수 있다.
자바스크립트의 map() 함수는 기본적으로 아래와 같은 특징이 있다.
- 배열을 사용하여 모든 값을 순환하는 방법 중 가장 간단하다
- Higher Order Function이다
다음으로 map()의 문법은 아래와 같다.
myArray.map(callback(current value, index, array), this)
여기서 콜백함수는 세 가지 인자를 전달하고 두 번째로 this값을 인자로 받을 수 있다. 각각 다음과 같이 사용된다.
- current value // 현재 반환할 값
- index // <옵션> 현재 해당하는 인덱스의 값
- array // <옵션> 배열에 접근 가능
- this // <옵션> 사용할 this 키워드의 값
예제1.
const nums = [1, 2, 3]; const newNums = nums.map(x => 2 * x); console.log(newNums); // Result [2, 4, 6]
이처럼 기존 배열의 값들을 특정 값으로 변경하기 위해서 map()이 많이 쓰인다. 단순하게 반복을 위해 사용하기도 한다. 참고로 위 예제는 아래와 같이 for 문으로 사용할 수 있다. 물론 출력 결과는 동일.
const nums = [1, 2, 3]; let newNums = []; for (var i = 0; i < nums.length; i++) { newNums.push(nums[i] * 2); }; console.log(newNums); // Result [2, 4, 6]
위 두 코드의 결과는 동일하지만 첫 번째 코드가 훨씬 간결하고 보기 쉽다. 아래는 두 번째 예제.
#### this를 변경하는 방법
위에서 본 것처럼 map()에서 콜백 이 외에 this의 값을 다른 값으로 매핑할 수 있도록 설정할 수 있다. 예를들어 아래와 같이 this의 값으로 'test'라는 문자열을 넘겨주는 것도 가능하다.
> ```
myArray = [1, 2, 3];
myArray.map(function(x) {
console.log(this);
return x;
}, 'test');
// Result
String {"test"}
String {"test"}
String {"test"}출력된 결과를 보면 문자열 test가 this로 출력된 것을 알 수 있다.
주의할 점은 이 경우 Block scope를 사용하는 ES 6의 화살표 함수를 사용하면 안된다. 이 경우 머리 객체에 해당하는 window객체를 반환하니 주의!!!
> myArray.map((x) => ( console.log(this)), 'test');
// 문자열 test가 아닌 window 객체를 반환일단 여기 까지로 해서 조금 길어졌지만, 간단하게 목 데이터와 맵 매서드에 대해 알아보았다. 다음 회차에서는 이 부분이 프로젝트에서 특히 두 개념이 결합하는 경우를 자세히 살펴보겠다~
---------------------------To be continued----------------
