스포주의! 위코드 차트문제 아직 안 푼사람은 이 글을 읽지 마씨오!
지금 상콤한게 무지 땡겨서 썸네일은 딸기로!(tmi 사진 고르는데만 5분이 넘게 소요됨)
wecode repl.it문제들이 계속 업데이트 되고 있는 요즘..
새로 업뎃된 문제를 풀려면 지난번 안 풀었던 문제를 다시 풀어야하는데…
보니까 차트문제부터 막혀있어서 차트부터 뚫기 도전!!!
요 문제는 하이차트 라이브러리를 쓸 때 진짜 유용할 것 같다.
일찍 알았으면 프로젝트 때 하드코딩 안 해도 됐던건데 아쉽 ㅠㅠ
문제는 차트 xAxis에 들어가는 categories와 series 데이터에 들어갈 배열을 만드는 것이었다.
categories는 그냥 연도를 뽑아내서 빈 배열에 담는 거라서 쉬웠고
문제는 series였다.
요구하는 데이터의 구조는 요렇게
[{
name: 'react',
data: [ 43934, 52503, 57177, 69658, 97031, 119931 ]
}, {
name: 'angular',
data: [ 24916, 24064, 29742, 29851, 29742, 32490 ]
}, {
name: 'vue',
data: [ null, null, 9988, 22169, 35112, 42452 ]
}]배열 안에 객체 안에 name과 data를 분류하는 것이었다. 어디서?
// data.js
const data = {
result: {
ok: true,
data: [{
year: 2014,
react: 43934,
angular: 24916
}, {
year: 2015,
react: 52503,
angular: 24064
}, {
year: 2016,
react: 57177,
angular: 29742,
vue: 9988
}, {
year: 2017,
react: 69658,
angular: 29851,
vue: 22169
}, {
year: 2018,
react: 97031,
angular: 29742,
vue: 35112
}, {
year: 2019,
react: 119931,
angular: 32490,
vue: 42452
}]
}
}바로 요기서!
문제를 풀고있자니 넘나 집중이 안 되는 것.. 딴 짓도 엄청 많이 했다.
문제에 집중하는 시간보다 딴 짓에 투자한 시간이 더 많았을 듯..? ㅠㅠ
결국 논리적인 사색을 즐겨하는 누군가의 도움을 받았다 ㅋㅋㅋㅋ ㅠㅠ
데이터 배열 뽑아내기
먼저 data.js에서 값을 뽑아 내야 하는데, 우리가 원하는 정보는 data.result.data에 담겨있다.
이 배열의 길이만큼 for문을 돌리고
const series = (years => {
const react = [];
const angular = [];
const vue = [];
for (let i = 0; i < years.length; i++) {
const year = years[i];
react.push(year.react || null)
angular.push(year.angular || null)
vue.push(year.vue || null)
}
// 요 밑에서부턴 아래의 코드에...나였다면 if문을 일일히 썼을텐데 스마트한 누군가는 push 괄호 안에 || null을 추가해서
해당하는 연도에 데이터가 없다면 null값을 추가해주었다. 와.. 완전 똑똑쓰!
객체와 배열 method의 활용
위에서 for문을 돌려서 빈 배열이었던 프론트엔드 삼대장들은 값을 가지게 되었다.
코드만 있으면 심심하니까 가끔씩 컬러풀한 runJS 캡쳐도 써먹기 ㅋㅋ
또 한 가지 배운 점! console 찍을 때 객체를 활용하면 눈에 보기 좋다
// 위의 코드와 이어집니다.
return Object
.entries({react, angular, vue})
.map(([name, data]) => ({
name, data
}))
})(data.result.data);Object.entries
위에서 콘솔을 객체로 찍은 것처럼 프론트엔드 삼대장들을 객체에 넣어준다음에 entries를 써먹는다. 그러면 객체였던 값들이 이중배열 형태로 나타나게 된다.
[
[ 'react', [ 43934, 52503, 57177, 69658, 97031, 119931 ] ],
[ 'angular', [ 24916, 24064, 29742, 29851, 29742, 32490 ] ],
[ 'vue', [ null, null, 9988, 22169, 35112, 42452 ] ]
]바로 요렇게!! 여기서 우리는 또 map을 돌려줄거다.
map을 돌릴건데.. 신박한 형태로 돌리기
평소에 map돌릴땐 그냥 el, i로 주는데 배열 형태로 넣어볼거다.
근데 같은 값이면 비구조화 하면 생략 가능하니까 고대로…
name : name 이런식으로 쓸 필요 없이 걍 name 써준다.
와.. 이렇게 풀리는걸 난 몇 시간동안 끙끙 앓았던가 ㅠㅠ
코드를 다시 보자면..!
const series = (years => {
const react = [];
const angular = [];
const vue = [];
for (let i = 0; i < years.length; i++) {
const year = years[i];
react.push(year.react || null)
angular.push(year.angular || null)
vue.push(year.vue || null)
}
return Object
.entries({react, angular, vue})
.map(([name, data]) => ({
name, data
}))
})(data.result.data);
결과는 요로코롬 잘 나오고 있다!
물론 데이터는 실제와 상이하니 믿지마시오~
나도 array와 object method를 가지고 노는 사람이 되고 싶다~~~
열심히 알고리즘 문제를 풀어봐야 할 것 같다…
Reference
- 익명의 천사의 도움