Lennon FE

Array를 순회하는 방법엔 여러가지 방법이 있다. 고전적이라면 const arr = [1,2,3,4,5] for(let i = 0; i { console.log(v); }) forEach를 사용할 것이다. 또는, 이터러블, 이터레이터의 개념을 알거나, 뭔가 이렇게 쓰는 게 좋다고 들으셨다면 const arr = [1,2,3,4,5] for(const a of arr) { console.log(a); } for of..

고차함수는 함수를 값으로 다루는 함수이다. 함수를 인자로 받아서 실행하는 함수들을 살펴보자. const funcAdd = f => f(1); const add10 = a => a + 10; console.log(funcAdd(add10)); 위 funcAdd 함수는 console.log에서 인자로 add10함수를 받는다. 당연하게 결과는 11로 예상할 수 있다. 함수를 만들어 리턴하는 경우도 있다. 이런 경우를 클로저를 만들어 리턴하는 함수라고 말한다. 함수가 함수를 만들어서 리턴할때는 결국은 클로저를 만들어서 리턴하기 위해 사용한다. 아래 예시를 확인해보자, 우리가 써보지 못한 느낌의 arrow Func 로 적혀있다. const add = a => b => a + b; const add10 = add(..

react, javascript에서는 보통 sort를 이용해 정렬을 많이한다. 그러나 sort를 사용하면 모두가 알다시피 코드 가독성이 많이 떨어질 수 밖에 없다. 또한 sort는 이상한 문제점이 있다. const arr = [1,3,20,5]; const sortedArr = arr.sort(); console.log(sortedArr) // [1,20,3,5] sort를 그냥 사용하면 위처럼 우리가 예상한대로 동작하지 않는다...(자바스크립트... ㅠ.ㅠ🥲) 그로인해 자바스크립트를 사용하는 개발자라면 보통 기본 sort를 바로 사용하지 않고 (a,b) 두 인자를 비교하는 함수를 만들어 sort를 사용한다. const arr = [1,3,20,5]; const sortedArr = arr.sort((a..

자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다. 아래 함수가 어떻게 실행될 지 예상해보자. const obj = { name: 'minho', intro: function() { console.log(this.name) setTimeout(function() { console.log(this.name) }, 1000) } } obj.intro() 논리적으로 생각해보면 당연히 minho가 두 번 뜰거라 생각한다. 그러나 두 번째 console.log는 undefined가 뜨는 걸 확인할 수 있다. 이유는 무엇일까? setTimeout 내부의 this는 window를 가르키기 때문이다. 해당 문제를 아래 코드와 같이 bind, call, apply를 통해 어디에 ..

모두 API 키를 숨기기 위해. env 파일에 api키를 입력하고. gitignore에 지정해 많이 사용할 것이다. const dotenv = require('dotenv'); dotenv.config(); 그리고 dotenv를 작성하고 각각 API키를 process.env.0000를 사용해 호출할 것이다. const port = process.env.PORT || 3000; mongoose.connect( process.env.MONGO_KEY, { useNewUrlParser: true, useUnifiedTopology: true }, function (err) { if (err) { console.error('mongoDB Connection Error!', err); } console.log('..

billboard.js 란? C3.js를 네이버에서 변형하여 불편한 부분을 편리하게 만들어서 오픈소스로 배포한 것이다. 차트를 쉽게 구현할 수 있고, 내부 메서드를 사용해 쉽게 차트를 조작할 수 있다. https://naver.github.io/billboard.js/ billboard.js billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides the easiest way to create a 'chart' instantly. Quick Start Guide Step 1. Load billboard.js and..

자바스크립트를 사용하다가 2차원 배열을 깊은 복사해야할 상황이 올 수도 있다. 아래처럼 우리가 아는대로 진행하면 원본 배열의 값이 계속 바뀌는 걸 확인할 수 있다. let arr1 = [[1,2,3],[2,3,4]] let arr2 = [...arr1]; arr2[0][0] = 0; console.log(arr1); // [[0,2,3],[2,3,4]] console.log(arr2); // [[0,2,3],[2,3,4]] 이는 큰틀인 arr1만 깊은 복사가 되고 가장 중요한 안의 배열 각 행들은 동일한 값을 참조하고 있다는 걸(얕은 복사) 의미한다. 2중 배열을 깊은 복사하려면 각 행마다 동일하게 깊은 복사 해주면 된다. let arr1 = [[1,2,3],[2,3,4]] let arr2 = arr1...