flatten, unflatten 자바스크립트에서는 flatten은 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다. unflatten unflatten은 중첩된 배열 구조를 의미한다. └ 위와 같은 배열안에 배열이 중첩되어 있는 구조를 unflatten이라고 생각하면 된다. flatten flatten은 중첩 배열을 평탄화 하는 것을 의미한다. ※ 평탄화 ? → 중첩 배열을 하나의 배열로 만드는 것을 의미한다. flatten의 방법 Array.prototype.flat() 자바스크립트에는 flat이라는 메서드가 존재한다. flat 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열을 생성한다. └ 사용할 때 평탄화 할 깊이를 지정해 주어야 한다. (default 값은 ..

Recursive Functions (재귀 함수) 어떤 함수 내부에서 다시 자기 자신을 부르는 함수를 의미한다. 마치 반복문을 돌리듯 자기 자신을 끊임없이 부르다가 특정 조건이 되면 빠져나오는 함수를 재귀 함수라고 한다. Recursive Function (재귀 함수)의 생성과 사용법 재귀함수는 다음과 같이 만들 수 있다. 나와 같은 이름의 함수를 내부에서 실행해 준다. 내가 만든 함수 내부에서 다시 나를 부르는 형태이기 때문에 무한히 계속 반복되는 함수가 된다. 따라서, 재귀함수를 만들 때에는 반드시 함수를 종료하는 조건을 만들어 주어야 한다. 이 부분은 특히 재귀 함수를 만들 때 가장 주의해야 할 부분이다. Recursive Function (재귀 함수)의 예 └ 결과로 5! = 120이 나온다. 위..

ES6의 특징let과 const전통적으로 자바스크립트는 함수스코프와 전역스코프만을 지원하여 변수의 생명주기 및 접근을 제어한다.하지만 ES6에서부터는 블록스코프도 지원하게 됐다.이를 가능하게 해주는 것이 let과 const ┌ 위의 코드는 블록 스코프를 따르는 다른 언어들에서는 에러를 발생시켰지만,├ 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다.└ 그러나, 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유였다. ┌ let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다.├ 따라서, 블록 밖에서 접근했더니 ReferenceError를 발생시킨다.├ const 역시 마찬가지로 블록스코프를 따른다.├ const와 let의 차이점은 const는 상수로 값을 ..

==, === 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원함 따라서, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요함 ===는 변수 유형을 고려함 └ 엄격한 비교를 함 ([값 & 자료형] -> true) ==는 변수 값을 기반으로 유형을 수정함 └ 서로 다른 유형의 두 변수의 [값] 비교 예시 └ 0값은 false와 동일하므로 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 └ 자동 유형변화 비교하기 때문에 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 └ 자동 유형변화 비교하기 때문에 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 !=와 !== 비교연산자의 차이는 ? └ 값이 다르지 않으므로(자료형 비교 안하므로) fals..

React Currying Currying(커링) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법 인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법 └ word와 name이라는 두 개의 인자를 받아서 출력해주는 단순한 형태의 함수 ┌ 위의 함수에 커링을 적용함 ├ n(2)개의 인자를 받던 함수가 n(2)개로 쪼개진 것을 볼 수 있음 ├ 또한, 첫 번째로 받던 인자인 word를 hello라는 값으로 고정하고 name만 변경하면서 사용 가능한 것 또한 볼 수 있음 ├ 즉, 커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때 └ 그 반복되는 인자를 고정함으로써 중복을 최소화 하기에 적합한 기법 └ 위는 인자가 4개나 되는 함수 ┌ 위 함수에 커링을 적용함 └ 커..

HOC vs HOF HOC (Higher Order Component) 특정 컴포넌트를 실행하기 전에 상위 컴포넌트를 먼저 실행시켜주는 방식 JavaScript의 클로저 함수를 이용함 HOC을 하나 만들어서 로그인이 필요한 컴포넌트 앞에 HOC만 붙여주면 간단하게 권한처리를 완료함 다른 컴포넌트와 함께 실행되는 고차 컴포넌트이므로 이름 앞에 with를 붙여줌 ex) withAuth, withApollo HOC 장점 event.target.id를 사용하지 않아 코드가 간략해짐 material-ui, ant-desing 등의 컴포넌트를 이용하면 id 값이 날라가는 현상을 막을 수 있음 id는 전체 태그에서 고유해야하기 때문에, id가 남용되면 대규모 서비스에서 문제가 야기될 수 있지만 이를 방지할 수 있음 ..