Frontend(75)
-
[Javascript] 자바스크립트에서의 This
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain how 'this' works in JavaScript. A. 자바스크립트에서 사용되는 this는 확실히 자바와 같은 다른 OOP 언어들과는 다른 감이 있습니다. 일반적인 OOP 언어와는 다르게 자바스크립트의 this는 해당 this가 어떤 맥락(Context)에서 호출되었는지에 따라 바인딩되는 대상이 다릅니다. 그리고 이것은 자바스크립트 인터프리터가 자바스크립트 코드를 실행시키면서 만드는 실행 컨텍스트(Execution Context)와 밀접한 관련이 있습니다. 자바스크립트의 실행컨텍스트는 특정한 함수가 호출될 때 해당 함수가 실행되는 환경을 객체 형태로 저장합니다. 이때 ..
2020.09.24 -
[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 -
[React] Virtual DOM & Diffing 알고리즘
Overview React는 프론트엔드 웹 애플리케이션을 개발자의 입장에서 조금더 편하고 직관적으로 개발할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 처음 React로 개발을 시작하게 되면 아마도 가장 먼저 듣게 되는 정보가 바로 가상돔(Virtual DOM)에 관한 내용입니다. 그만큼 React에서 핵심적인 기능을 담당하고 있는 것이 바로 Virtual DOM인데, 이번 포스팅에서는 이 Virtual DOM에 대한 간단한 개념을 살펴보고 왜 Virtual DOM이 필요한지, 그리고 Virtual DOM은 어떻게 동작하는지를 간단하게 살펴보도록 하겠습니다. Virtual DOM & DOM DOM은 Document Object Model의 약자로 간단하게 말하면, 브라우저가 HTML문서를 해석하는 ..
2020.09.13 -
[React] Redux 직접 만들어보기
Overview 리덕스는 웹 프론트엔드 라이브러리인 리액트(React)에서 상태관리 컨테이너로 사랑받고 있는 라이브러리 입니다. 리액트 앱에서 컴포넌트의 상태관리를 할 수 있게 도와주는 다른 여러 라이브러리 (Flux, MobX)들이 있지만, 현재까지는 그 편리함과 리액트의 Virtual DOM(가상돔)과 가장 잘 어울리는 것 같다는 장점들 때문에 가장 많이 쓰이고 있습니다. 이번 포스팅에서는 이 리덕스를 처음부터 간단하게 구현해보면서 동작원리 및 특징들을 살펴보도록 하겠습니다. How Redux Works 리덕스가 가지고 있는 특징 및 키워드를 간단하게 정리해 보았습니다. 이를 어느정도 이해한 뒤에 리덕스를 살펴보면 실제로 앱에 리덕스를 적용하는 데에도 도움이 될 것이라고 생각합니다. 불변성 (IMMU..
2020.09.04