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..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain event delegation (Pattern) A. 이벤트 델리게이션을 언급하기 위해서는 먼저 간단하게 자바스크립트의 이벤트 전파 방식에 대해서 언급해야 합니다. 예를 들어 다음과 같이 이 2개 계층의 부모를 가진 자식 div를 클릭하는 클릭 이벤트가 발생했다고 가정하겠습니다. "me"를 클릭하면 전역 객체인 Window객체부터 Document, html, body 순으로 내려가는 이벤트 캡쳐링 현상을 거쳐 대상 객체 (target)에 도달하게 됩니다. 이후 다시 이벤트 버블링 현상을 거쳐서 다시 전역 객체인 Window로 전파되게 됩니다. 이벤트 델리게이션은 바로 이 이벤..

Overview React Hooks는 React Functional Component(함수형 컴포넌트)에서 상태관리 및 컴포넌트 생명주기 API(Lifecycle API) 등 클래스 컴포넌트에서만 지원했던 기능들을 사용할 수 있도록 도와줍니다. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 선언하고 사용하기가 편리하며, 코드를 간결하게 사용할 수 있고, 메모리를 비교적 덜 사용하는 등의 여러 장점들이 있기 때문에 최근에 많이 사용되는 추세인데, 여기에 클래스 컴포넌트에서만 사용가능했던 기능들을 Hooks가 지원하면서 함수형 컴포넌트의 효용이 더 높아졌다고 평가되고 있습니다. 이번 포스팅에서는 함수형 컴포넌트에서 상태관리를 할 수 있도록 도와주는 useState 메소드에 대해서 알아보고, 이 메소드가 내부적..

Overview 미들웨어 (middleware)란 소프트웨어 공학에서 사용되는 오래된 개념으로, 운영 체제와 운영 체제 사이에서 실행되는 프로그램 사이에 존재하는 소프트웨어를 의미합니다. 말 그대로 운영 체제와 프로그램 '중간에' 끼어서 부가적인 일들을 처리하는 소프트웨어인 셈입니다. 미들웨어는 어떤 특정 소프트웨어를 지칭한다기 보다는 말 그대로 '추상적인 개념'이기 때문에 이 개념을 웹 서비스에서도 받아들여서 웹 서비스를 개발할 때 View와 Logic 을 분리하여 사이드 이펙트(Side effect)를 처리하거나, 중간중간 로그(Log)를 찍거나(Loggin)하는 등의 부가적인 액션들을 이 미들웨어를 통해서 처리합니다. 리액트 서비스를 예로 들자면 대표적으로 사가(Saga)가 있을 것이고, Node...

Definition iframe이란 Inline Frame 의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다. 검색을 통해 다른 블로그의 게시물이나, 아티클들을 읽다 보면, 글 아래에 유튜브 동영상이 삽입되거나, 지도가 보여진다거나 하는 상황들을 경험해 보신 적이 있을 것입니다. 요즘에는 HTML5 가 차세대 웹표준으로 자리하게 되면서 태그나, 태그등 다양한 태그들이 iframe을 대체하고 있지만 이전의 많은 브라우저들, 그리고 아직 HTML5표준을 공식적으로 지원하고 있지 않은 브라우저들에서는 여전히 iframe이 사용되고 있습니다. (또한 다른 선택의 경우가 없는 경우에도 여전히 iframe..