Development(54)
-
[React] Redux 직접 만들어보기
Overview 리덕스는 웹 프론트엔드 라이브러리인 리액트(React)에서 상태관리 컨테이너로 사랑받고 있는 라이브러리 입니다. 리액트 앱에서 컴포넌트의 상태관리를 할 수 있게 도와주는 다른 여러 라이브러리 (Flux, MobX)들이 있지만, 현재까지는 그 편리함과 리액트의 Virtual DOM(가상돔)과 가장 잘 어울리는 것 같다는 장점들 때문에 가장 많이 쓰이고 있습니다. 이번 포스팅에서는 이 리덕스를 처음부터 간단하게 구현해보면서 동작원리 및 특징들을 살펴보도록 하겠습니다. How Redux Works 리덕스가 가지고 있는 특징 및 키워드를 간단하게 정리해 보았습니다. 이를 어느정도 이해한 뒤에 리덕스를 살펴보면 실제로 앱에 리덕스를 적용하는 데에도 도움이 될 것이라고 생각합니다. 불변성 (IMMU..
2020.09.04 -
[HTML] iframe 태그란?
Definition iframe이란 Inline Frame 의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다. 검색을 통해 다른 블로그의 게시물이나, 아티클들을 읽다 보면, 글 아래에 유튜브 동영상이 삽입되거나, 지도가 보여진다거나 하는 상황들을 경험해 보신 적이 있을 것입니다. 요즘에는 HTML5 가 차세대 웹표준으로 자리하게 되면서 태그나, 태그등 다양한 태그들이 iframe을 대체하고 있지만 이전의 많은 브라우저들, 그리고 아직 HTML5표준을 공식적으로 지원하고 있지 않은 브라우저들에서는 여전히 iframe이 사용되고 있습니다. (또한 다른 선택의 경우가 없는 경우에도 여전히 iframe..
2020.08.23 -
[Browser] Console 객체
Overview Javascript로 웹 개발을 해 보신 분들이라면, 혹은 브라우저에서 Developer Tools(개발자도구)를 사용해 보신 경험이 있으신 분들이라면 누구나 다음과 같은 명령어를 입력해보셨을 것입니다. React나, Angular 혹은 Vue프레임워크를 통해서 규모가 있는 웹 프로그램을 개발하다보면, 렌더링은 제대로 되는지, 서버와 비동기 통신을 진행할 때 서버에서 response가 제대로 할당이 되었는지 등 프로그램이 실행되는 동안의 내부 과정을 살펴보아야 할 일이 생깁니다. 이때 console.log(변수 이름) 이나, console.log('i'm here')등을 통해 개발자가 설계한 순서대로 프로그램이 제대로 동작하는지를 살펴보는 경우가 많습니다. 이번 포스팅에서는 이 conso..
2020.07.26 -
[OAuth] OAuth 2.0
Overview 스마트폰이나 웹 브라우저를 통해서 회원가입을 할 때 다음과 같은 화면을 보신 적이 있으실 것입니다. 사용자로 하여금 이미 가입되어 있는 페이스북, 로그인, 트위터등을 통해서 클릭 한번에 간편하게 회원가입을 진행할 수 있도록 하는 것입니다. 이렇게 간편하게 회원가입을 할 수 있도록 하는 일련의 과정을 프로토콜로 정의해 놓은 것이 바로 OAuth 2.0 표준입니다. OAuth가 왜 필요할까? 웹 기술이 많이 발전하고, 프레임워크가 점차 사용자 친화적으로 발전해 나가면서 수많은 웹 서비스들이 런칭하고, 문을 닫고 있습니다. 대부분의 웹 서비스가 기본적으로 갖추고 있는 것이 "회원" 시스템이기 때문에 이들 사이트에서 회원가입 및 로그인은 필수적인 요소가 되었습니다. 문제는 다양한 웹 서비스를 사..
2020.07.04 -
펜윅 트리(Fenwick Tree)
Overview 펜윅 트리 (Fenwick Tree)는 구간 합을 빠르게 구하기 위해 고안된 자료구조입니다. 결론부터 말씀을 드리면 구간트리의 진화된 형태라고도 할 수 있습니다. 기존의 배열 자체에서 구간 합을 구하기 위해서는 해당 구간을 모두 순회하면서 값을 더해야 하므로 구간 길이에 비례하는 시간이 소요됩니다. O(N)의 시간복잡도를 갖는다는 의미이죠. 이를 더 빠르게 구현하기 위해 고안된 자료구조가 바로 구간트리이며, 구간트리가 갖는 장점을 살리면서 메모리를 훨씬 더 절약할 수 있도록 고안된 자료구조가 바로 펜윅 트리입니다. (구간 트리에 관한 자세한 내용은 구간 트리를 다룬 포스팅을 참고해주세요) Definition 펜윅 트리가 갖는 중요한 아이디어는 구간 합을 구하기 위해서 부분 합만을 빠르게 ..
2020.06.14 -
HTTPS란
이 포스팅은 HowHttpsWorks를 정리한 글임을 서두에 밝힙니다. HTTP는 HyperText Transfer Protocol의 약어로, 인터넷에서 HTML, JSON, XML 등 텍스트 기반의 데이터를 주고받을 수 있는 프로토콜을 의미합니다. HTTP가 등장하면서 웹도 덩달아서 빠르게 발전하게 되었는데 이에 따라 도청, 중간자 공격 등 여러 보안 문제들이 발생하게 되었습니다. 이를 해결하기 위해 등장한 프로토콜이 이번 포스팅에서 설명할 HTTPS(HTTPS + Secure)입니다. 어떤 사이트에 접속했을 때, 브라우저의 URL표시 줄에 위의 그림처럼 녹색 자물쇠가 나타나는 경우가 있습니다. (브라우저마다 다르지만, 대체로 잠겨있는 자물쇠가 같이 표시됩니다.) 이는 브라우저와 해당 사이트를 호스팅 ..
2020.05.05