Development(54)
-
[Javascript] 클로저란?
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What is a closure, and how/why would you use one? + What is Lexical Scoping? A. 클로저란, 함수와 함수가 선언된 정적 환경의 조합을 의미합니다. 이를 제대로 설명하기 위해서는 렉시컬 스코프(Lexical Scope)에 대해 먼저 설명해야 합니다. 자바스크립트에서는 코드의 위치가 정해지는 순간, 그 코드 안에 포함된 변수의 유효 범위(Scope)가 정해지는 정적인 특성을 가지고 있습니다. 이것을 정적 유효 범위, 혹은 렉시컬 스코프(Lexical Scope)라고 말합니다. 간단히 말하자면 함수안에서 정의된 변수는 함수 밖으로 빠져..
2020.09.28 -
[Javascript] 호이스팅이란
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain "Hoisting" A. 호이스팅을 간단하게 정의하자면, 자바스크립트가 코드를 컴파일하는 과정에서 코드 내의 선언문들을 찾아서 해당 선언문들이 속한 스코프의 최상단으로 스코프를 끌어올리는 것을 의미합니다. (값을 할당하는 것이 아닌 선언만 끌어올림.) 호이스팅이 제대로 동작하기 때문에 다음과 같은 코드가 오류를 발생시키지 않고 동작합니다. console.log(hoist); // undefined var hoist = 'hello'; console.log(hoist); // hello 위의 예제는 다음과 같이 컴파일되기 때문에 오류를 일으키지 않고 실행될 수 있습니다. var..
2020.09.28 -
[Javascript] forEach vs map (Array.prototype)
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other? A. 자바스크립트의 Array는 기본적으로 forEach와 map 등의 메서드를 프로토타입을 통해 제공합니다. 둘 다 Array안에 있는 Element들을 순회한다는 특징을 가지고 있지만, 둘은 결과물을 리턴하는 방식에서 차이를 보입니다. Array.prototype.map const arr = [1, 2, 3, 4, 5]; const mapAr..
2020.09.27 -
[Javascript] 이벤트 델리게이션 패턴
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain event delegation (Pattern) A. 이벤트 델리게이션을 언급하기 위해서는 먼저 간단하게 자바스크립트의 이벤트 전파 방식에 대해서 언급해야 합니다. 예를 들어 다음과 같이 이 2개 계층의 부모를 가진 자식 div를 클릭하는 클릭 이벤트가 발생했다고 가정하겠습니다. "me"를 클릭하면 전역 객체인 Window객체부터 Document, html, body 순으로 내려가는 이벤트 캡쳐링 현상을 거쳐 대상 객체 (target)에 도달하게 됩니다. 이후 다시 이벤트 버블링 현상을 거쳐서 다시 전역 객체인 Window로 전파되게 됩니다. 이벤트 델리게이션은 바로 이 이벤..
2020.09.24 -
[React] 클로저와 useState Hooks
Overview React Hooks는 React Functional Component(함수형 컴포넌트)에서 상태관리 및 컴포넌트 생명주기 API(Lifecycle API) 등 클래스 컴포넌트에서만 지원했던 기능들을 사용할 수 있도록 도와줍니다. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 선언하고 사용하기가 편리하며, 코드를 간결하게 사용할 수 있고, 메모리를 비교적 덜 사용하는 등의 여러 장점들이 있기 때문에 최근에 많이 사용되는 추세인데, 여기에 클래스 컴포넌트에서만 사용가능했던 기능들을 Hooks가 지원하면서 함수형 컴포넌트의 효용이 더 높아졌다고 평가되고 있습니다. 이번 포스팅에서는 함수형 컴포넌트에서 상태관리를 할 수 있도록 도와주는 useState 메소드에 대해서 알아보고, 이 메소드가 내부적..
2020.09.20 -
[React] Redux Middleware 직접 구현해보기
Overview 미들웨어 (middleware)란 소프트웨어 공학에서 사용되는 오래된 개념으로, 운영 체제와 운영 체제 사이에서 실행되는 프로그램 사이에 존재하는 소프트웨어를 의미합니다. 말 그대로 운영 체제와 프로그램 '중간에' 끼어서 부가적인 일들을 처리하는 소프트웨어인 셈입니다. 미들웨어는 어떤 특정 소프트웨어를 지칭한다기 보다는 말 그대로 '추상적인 개념'이기 때문에 이 개념을 웹 서비스에서도 받아들여서 웹 서비스를 개발할 때 View와 Logic 을 분리하여 사이드 이펙트(Side effect)를 처리하거나, 중간중간 로그(Log)를 찍거나(Loggin)하는 등의 부가적인 액션들을 이 미들웨어를 통해서 처리합니다. 리액트 서비스를 예로 들자면 대표적으로 사가(Saga)가 있을 것이고, Node...
2020.09.19