Lodash란? 함수형 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능을 제공하는 Javascript 라이브러리(Wikipedia) debounce와 throttle debounce와 throttle은 이벤트가 연속적으로 발생할 때, 콜백함수의 불필요한 실행을 줄여주는 기능을 제공한다. 서버로의 불필요한 요청(Request)을 줄일 수 있고, 불필요한 렌더링을 방지할 수 있어 컴포넌트 성능 개선에 도움이 된다. 또한, 외부 API를 호출해야 하는 경우, 과도한 서버 요청을 막아줄 수 있는 면에서 아주 중요한 기능을 한다고 생각한다. debounce는 이벤트가 종료된 뒤, 일정 시간 뒤에 콜백함수가 실행된다. throttle은 콜백 함수를 일정 주기마다 한 번 실행한다. debounce 적용 예시 beforeDebounce afterDebounce

Webpack(웹팩) 이란? 현대 Javascript Application의 Static Module Bundler 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것을 말한다. Bundle(번들) 이란? 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package Webpack을 사용하는 이유 연관되어 있는 자바스크립트 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 걸리는 시간을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능을 최적화 해준다. 다른 Module Bundler도 많이 존재하지만, performance가 우수하다. Babel(바벨) 이란? ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저 내에서 동작할 수 있도록 하는…

Javscript Closure(클로저)란? 독립적인 변수를 가리키는 함수 클로저의 원리 함수A가 존재하고, 함수 A에서 선언된 1이라는 변수가 존재, 또한 함수 A 내부에 B라는 내부함수가 존재하고 B라는 내부함수에서 A함수에서 선언된 1이라는 변수를 참조, 이때 내부함수 B가 외부로 전달될 경우, A의 실행이 종료되어도 변수 1이 사라지지 않는다. ~~A의 실행이 종료되어도 변수 1이 사라지지 않는다 -> 사이드 이펙트 실행이 종료되어도 사라지지 않는다는 것은 메모리에 계속 남아있음을 뜻하고 이는 메모리 누수 현상이 발생할 수 있음을 뜻함 또한 메모리에 계속 남아있기에 필요에 의해 참조가 가능 메모리 누수란? 프로그램이 필요하지 않은 메모리를 계속 점유하고 있는 현상 클로저를 사용하는 이유 불필요한 전역변수의 선언을 막아준다. private 변수를 사용하고 싶을 때 이용된다. 클로저 사용의 단점 메모리 누수 현상이 발생할 수 있다. 새로운 Scope를 생성하여 내부 함수에 링크…

Javscript Hoisting(호이스팅) 이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것 변수의 경우 var로 선언한 변수만 호이스팅이 적용된다. (let, const 변수는 적용되지 않음) 예시 적용 전 적용 후 또한, 함수에서는 함수 선언문은 호이스팅이 적용되고, 함수 표현식은 적용되지 않는다. 예시 적용 전 적용 후 Hoisting 적용 우선순위 변수 선언문이 함수 선언문보다 위로 끌어올려진다.