Callback (콜백 함수) Callback (콜백 함수)란 ? JS에서 콜백함수는 매우 중요한 개념이다. Node.js 환경에서 프로그래밍 시 반드시 필요한 개념이기도 하다. 콜백 함수란 어떤 이벤트가 발생한 후, 수행될 함수를 의미한다. JS에서 함수는 1급객체이므로, 인자 전달 시 함수를 전달할 수 있기 때문에 콜백함수가 가능하다. ┌ 위의 코드는 submitBtn 클래스를 가진 요소를 클릭했을 때, 콜백 함수가 실행되는 jQuery 코드이다. ├ 즉, 비동기 이벤트인 click에 대한 이벤트 리스너로 콜백 함수가 작성된 것이며, 그 내용은 alert()를 호출한다. └ click의 콜백 함수는 네이밍을 할 필요가 없는 익명함수이고, 대부분의 콜백 함수는 이렇게 익명함수로 작성된다. Callbac..

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

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

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가 남용되면 대규모 서비스에서 문제가 야기될 수 있지만 이를 방지할 수 있음 ..

JS Closure 내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미 전역변수 해당 페이지 안이라면 어디서든 사용 가능 지역변수 함수 안에서 정의된 변수로써, 해당 함수 안에서만 사용 가능 JS Closure 예시 ┌ 스코프 체인에 의해 Func02() 함수 안의 apple은 함수 바깥에 있는 apple을 의미함 └ 따라서, 결과로 "사과", "바나나" 가 나옴 ┌ 마지막 줄의 Func01("사과")는 가장 윗줄에 있는 apple에 "사과"가 들어가게 되고, ├ 마지막 줄의 Func01(" ")("바나나")의 "바나나"는 Func02()의 banana에 들어가게 됨 └ 결과로 "안녕 ?", "사과", "바나나" 가 나옴