전체 글

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[3]

1. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치하면 리듀서에서 이를 처리하기 이전에 사전 작업들을 실행합니다. 미들웨어는 이 떄 액션과 리듀서사이의 중간자 역할을 합니다. 리듀서가 액션을 처리하기 전에 미들웨어는 아래의 작업들을 수행할 수 있습니다. 전달받은 액션을 콘솔에 기록 전달받은 액션 정보를 기반으로 액션을 완전히 취소 다른종류의 액션을 추가로 디스패치하기 1.1 미들웨어 만들기 src 디렉토리에 lib 디렉토리를 생성하고, 그 안에 loggerMiddleware.js 파일을 생성합니다. - lib/loggerMiddleware.js 미들웨어는 아래와 같은 구조를 가지고 있습니다. const loggerMiddleware = store => next => action => { //미들웨어 기본..

[프론트엔드] React 동작 구조 (가상 DOM)

React React 는 React.js, ReactJS라고도 불리며, User Interface (UI)를 만드는데 사용하는 오픈 소스 자바스크립트 라이브러리입니다. Facebook에서 만들어졌고 AngularJS, Vuejs와 함께 웹 프론트엔드 3대장 입니다. Single Page Application(SPA)를 전제로 사용하고, Virtual DOM을 활용하여 필요한 부분만 리렌더링이 가능하여 퍼포먼스를 향상시킬 수 있습니다. Virtual DOM Virtual DOM 은 말 그대로 가상에서 사용되는 DOM객체를 말합니다. 그렇기에, Virtual DOM 정리 전에 먼저 기존 DOM에 대해서 알고가야 할 필요가 있습니다. DOM 문서 객체 모델(DOM, Document Object Model)은 ..

[면접] p, div, span 태그의 차이

div vs span vs p 태그 차이 div vs span vs p 각 태그의 차이점은 div와 p는 블록요소 이고, span은 인라인 요소입니다. 또한 p는 문자 단락 용도이고, div는 레이아웃 나누기 목적으로 사용합니다. div vs span vs p 블록과 인라인 차이 , 태그와 태그 사이의 차이점은 블록 요소와 인라인 요소에 있습니다. 아래화면처럼 블록 요소는 , 처럼 태그의 영역이 브라우저의 양 끝을 모두 차지합니다. 인 라인 요소는 그림의 태그의 영역 처럼 태그 안에 적힌 텍스트 길이만큼 영역을 차지합니다. 1. 3개의 태그는 이와같이 블록요소와 인아인으로 구분지어 레이아웃 영역에서 얼만큼의 영역을 차지하는지를 결정합니다. 텍스트를 줄바꿈할 필요가 생기면 , 태그를 사용하고 줄바꿈이 필요..

[면접] 함수형 프로그래밍이란?

함수형 프로그래밍 함수형 프로그래밍은 하나의 프로그래밍 패러다임으로 정의되는 일련의 코딩 접근 방식이며, 자료처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임을 의미한다. 함수형 프로그래밍을 사용하는 이유 함수형 프로그래밍은 기존 절차적 프로그래밍과 객체 지향형 프로그래밍과는 다른 새로운 방식입니다. 함수형 프로그래밍을 배우는 것은 스칼라나 클로저에 관심이 없고 앞으로 쓰지 않을 것 같다고 해도 다른 방식으로 사고하는 법을 배우는 것. 새로운 계산방법을 배우는 것 처럼 사고의 전환을 필요로 하며 다양한 사고방식으로 프로그래밍을 바라보면 유연한 문제해결이 가능하다. 함수형 프로그래밍의 특징 1. 순수함수 (Pure function) 동일한 입력에는 항상 같은 값을 반..