Overview 리덕스는 웹 프론트엔드 라이브러리인 리액트(React)에서 상태관리 컨테이너로 사랑받고 있는 라이브러리 입니다. 리액트 앱에서 컴포넌트의 상태관리를 할 수 있게 도와주는 다른 여러 라이브러리 (Flux, MobX)들이 있지만, 현재까지는 그 편리함과 리액트의 Virtual DOM(가상돔)과 가장 잘 어울리는 것 같다는 장점들 때문에 가장 많이 쓰이고 있습니다. 이번 포스팅에서는 이 리덕스를 처음부터 간단하게 구현해보면서 동작원리 및 특징들을 살펴보도록 하겠습니다. How Redux Works 리덕스가 가지고 있는 특징 및 키워드를 간단하게 정리해 보았습니다. 이를 어느정도 이해한 뒤에 리덕스를 살펴보면 실제로 앱에 리덕스를 적용하는 데에도 도움이 될 것이라고 생각합니다. 불변성 (IMMU..

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

Overview Javascript로 웹 개발을 해 보신 분들이라면, 혹은 브라우저에서 Developer Tools(개발자도구)를 사용해 보신 경험이 있으신 분들이라면 누구나 다음과 같은 명령어를 입력해보셨을 것입니다. React나, Angular 혹은 Vue프레임워크를 통해서 규모가 있는 웹 프로그램을 개발하다보면, 렌더링은 제대로 되는지, 서버와 비동기 통신을 진행할 때 서버에서 response가 제대로 할당이 되었는지 등 프로그램이 실행되는 동안의 내부 과정을 살펴보아야 할 일이 생깁니다. 이때 console.log(변수 이름) 이나, console.log('i'm here')등을 통해 개발자가 설계한 순서대로 프로그램이 제대로 동작하는지를 살펴보는 경우가 많습니다. 이번 포스팅에서는 이 conso..

풀이 소와 축사와의 관계를 네트워크 그래프로 정의하는 것이 핵심이 되는 문제였습니다. 가장 많은 축사가 채워지는 것을 Source와 Dest간의 최대 유량을 결정하는 문제로 바꾸어주면 포드-풀커슨 알고리즘을 통해 이 문제를 쉽게 해결할 수 있습니다. 아래 그림과 같이 Source에서 모든 Cow로 가는 간선이 있다고 하겠습니다. (아래 그림에서의 모든 간선의 가중치는 1이 됩니다.) Cow는 선호하는 Cage로 간선을 그릴 수 있으며 Source로부터 들어오는 Cow의 유량은 1이 되므로 여러 Cage로 가는 간선이 있다고 해도 결국에는 하나의 Cage밖에 선택할 수 없게 됩니다. 모든 Cage는 각각 Dest로 가는 가중치 1짜리 간선이 있습니다. 이 그래프에 따르면 가장 많은 우리가 채워지는 경우 =..

풀이 네트워크 유량과 관련된 기본적인 문제로, BFS를 사용하는 포드-풀커슨 알고리즘을 사용하여 구현하였습니다. 포드-풀커슨 알고리즘을 사용하여 이 문제를 해결 할 때의 주의점은, 파이프가 양쪽 모두로 물을 흘려보낼 수 있으므로, 파이프 하나를 양방향 간선으로 취급해야 한다는 점과, 동일한 파이프가 2개 이상 주어질 수 있다는 점입니다. 즉, A->B로 가는 용량 5짜리 파이프와 용량 2짜리 파이프가 동시에 입력될 수 있는데, 둘 중 어느 하나를 선택하는 것이 아니라 두 용량 모두를 더한 것이 A->B로 가는 파이프의 최종 용량이라는 것입니다. 소스 코드 (JAVA) import java.util.*; import java.io.*; /* @sckimynwa */ public class BOJ_6086 ..

지난 포스팅에서 OAuth 표준이 무엇인지에 대해서 설명했습니다. 이번 포스팅에서는 직접 Expressjs에서 페이스북 로그인을 구현하는 과정을 설명하도록 하겠습니다. 간단하게 OAuth2.0 표준에 대해서 정리하고 넘어가자면, OAuth 2.0 표준이란 새로운 서비스(예를 들면 쇼핑몰)에서 사용자에게 간편한 회원가입 기능을 제공하면서 제한된 용도로만 사용자를 식별하고, 사용자의 정보를 사용할 수 있도록 하기 위한 프로토콜입니다. ID/PASSWORD를 사용자로부터 직접 입력받는 대신, Facebook, Google등의 사용자가 이미 가입한 인증 서비스로부터 AccessToken을 받아 사용자를 식별하도록 하는 것입니다. Process https://developers.facebook.com/ Faceb..