박스여우 - BoxFox

rx를 사용하며 개발을 하면서 필요한 웬만한 기능들은 rx의 operator로 제공되고 있습니다. 따라서 이 operator 들만 잘 숙지하고 있으면 rx를 사용하며 기능이 부족하다 느끼는 경우는 거의 없을거라 생각합니다. 이번 포스팅에서는 수 많은 rxjs의 operator 중 가장 헷갈리는 map, flatMap, switchMap, concatMap, mergeMap에 대해 정리해보도록 하겠습니다. map map operator는 js의 array나 Java의 Stream과 같은 API를 사용해 보셨다면 이미 알고 있을거라 생각됩니다. map operator는 다른 API들과 동일하게 발생하는 요소들을 다른 값으로 변환해 줍니다. map operator는 아래 예제와 같이 발생하는 값을 다른 값으로..

최근 웹 프론트엔드에대해 더 깊게 학습하다보니 JavaScript 성능 최적화에도 관심을 가지게 되었습니다. 그 중 흥미롭게 공부한 내용을 정리하여 포스팅으로 작성하고자 합니다. 이번 포스팅은 JavaScript가 정적 타입 언어의 성능을 따라잡기 위해 필수적인 개념인 Hidden Class 에 대해 알아보도록 하겠습니다. Hidden Class 자바와 같은 정적 타입 언어의 경우 객체의 속성이 고정되어 있기 때문에 객체를 생성할때부터 메모리를 얼마나 할당해야 하는지 정확하게 파악할 수 있습니다. 따라서 객체의 속성을 저장하는 메모리를 연속되기 할당한 뒤 offset기반으로 빠르게 접근하여 사용할 수 있습니다. 하지만 JavaScript는 동적 타입 언어이기 때문에 객체를 생성할때에 메모리를 얼마나 할당..

이전포스팅에서 브라우저의 렌더링 과정과 Reflow, Repaint를 어떻게 최적화 할 수 있는지 대략적으로 알아보았습니다. 그중 Repaint가 일어나지 않는 CSS 속성이 있다고 간단히 언급을 했는데요, Repaint가 일어나지 않는 CSS 속성과 그 원리에 대해 알아보도록 하겠습니다. Composite 우선 Repaint가 일어나지 않는 속성들에 대해 알아보기 전에 Composite 단계부터 짚고 넘어가야 합니다. 아래 그림은 초기 렌더링이 완료된 이후에 애니메이션이나 요소에 변화를 주어 발생하는 렌더링 흐름 입니다. 요소의 스타일을 변경하기 위해 JavaScript가 실행되고 Style변경, 계산이 다시일어납니다. 그 후 Reflow(Layout) 와 Repaint(Paint) 단계를 거치게 됩니..

렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개발을 해야 좋은 성능을 내는지, 성능 최적화를 어떻게 해야하는지를 정확하게 판단할 수 있다고 생각합니다. 이번 포스팅을 통해 그 내용에 대해 알아보도록 하겠습니다. 렌더링 엔진 대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진(Rendering Engine)을 가지고 있습니다. 다만 모든 브라우저가 같은 렌더링 엔진을 사용하지는 않습니다. 파이어폭스는 게코(Gecko)를 사용하고 있고 사파리는 웹킷(Webkit)을 사용하고 있습니다. 크롬의 경우 웹킷을 사용하다가 웹킷을 Fork하여 블링크(Blink) ..

올해는 GDG - Google Developer Groups의 대전 챕터 Organizer로 활동한지 1년째가 된 해입니다. 첫 GDG 활동을 시작한 하면서 진행했던 행사가 I/O 인데 올해도 역시나 I/O를 진행하게 되어 이를 기념하고 기록하고자 후기를 작성합니다. 스태프 모집 운영진 3명이서 행사를 기획하기에 참가자들이 무엇을 바라는지, 어떻게하면 유익한 행사를 만들 수 있는지 아이디어에 한계가 있었습니다. 그래서 저희를 도와줄 수 있는 스태프분들을 모집했습니다. 먼저 스태프 모집홍보를 해야했습니다. 방법은 여러가지가 있겠지만 고민끝에 저희의 문제에 공감을 많이 이끌어낼 수 있는 방향으로 스토리텔링(?)을 하고 카드뉴스 형태로 만들었습니다.현재 대전 챕터에는 디자이너나 기획자가 없어서 제가 도맡아서 ..

Redux를 다룰때 주의해야 할 점은 Reducer는 반드시 순수함수여야 한다는 점 입니다. 하지만 순수함수가 정확히 무엇이고 왜 순수함수여야만 하는지를 잘 모르는 경우가 많습니다. 이번 포스팅에서는 해당 내용에 대해 다뤄보도록 하겠습니다. 순수함수 순수함수를 한마디로 정의해보자면 동일한 인자가 주어졌을 때 항상 동일한 결과를 반환해야 하며 외부의 상태를 변경하지 않는 함수입니다. 쉽게 말하면 함수 내 변수 외에 외부의 값을 참조, 의존하거나 변경하지 않아야 합니다. 아래 예제의 함수들은 모두 순수함수가 아닙니다. let value = '123'; function func1(abc) { value = '1234'; return abc + 1; } function func2(abc) { return abc..

회사 프로젝트를 하면서 한번의 request에 여러개의 response를 반환해야하는 기능을 구현하는 이슈가 있었습니다. 처음에는 웹소켓을 생각했지만, 웹소켓은 무겁고, 무엇보다 양방향 데이터 통신이 아닌 클라이언트가 한번 요청하면 서버에서 일방적으로 데이터를 보내주는 형태이기 때문에 웹소켓은 적합하지 않다고 판단되었습니다. 그러던 중 Server Sent Event - SSE를 발견하게 되어 포스팅을 하고자 합니다. SSE - Server Sent Event 란? SSE는 Server Sent Event의 약어로 서버의 데이터를 실시간으로, 지속적으로 Streaming 하는 기술 입니다. SSE는 웹 표준으로써 IE를 제외한 모든 브라우저에서 지원되며, IE역시 polyfill을 통해 지원이 가능합니다..

javascript에는 비교연산자가 2종류가 있습니다. 하나는 다른 언어에서도 일반적으로 사용되는 동등 연산자 두개짜리(==) 연산자와 javascript에만 존재하는 동등 연산자 세개짜리(===) 연산자가 있습니다. 이 두 연산자는 각각 다른 역할을 하지만 javascript를 처음 접하거나 제대로 익히지 못한 초보자분들이 많이 헷갈려 하는 경우가 많습니다. 이번 포스팅에서는 이 두 연산자의 차이점에 대해 소개하도록 하겠습니다. Loose Equality - 느슨한 비교 대부분의 다른 언어에서 흔히 볼 수 있는 동등 연산자 두개짜리(==)는 느슨한 비교를 하는 연산자 입니다. 따라서 == 연산자를 이해하려면 느슨한 비교가 무엇이고 어떻게 사용되는지에 대해 알아야 합니다. console.log(false..

Component와 Module은 개발을 하다보면 매우 흔하게 사용되는 용어입니다. 하지만 이러한 Component라는 용어를 한 마디로 정의하자면 매우 어려울 것입니다. 그래서 이번 포스팅을 통해 Component와 Module에 대해 한 마디로 정의할 수 있도록 정리해보고자 합니다. 개인적으로 가지고 있던 컴포넌트의 정의는 "재사용 할 수 있는 단위"라고 생각하고 있었습니다. 사실 Component의 등장 배경 중 일부는 코드를 재사용 하고 반복을 줄이기 위함이였기 때문에 완전히 틀린 정의는 아니였습니다. 하지만 단순한 이 정의는 일반적인 함수나 클래스와 같이 다른 재사용 가능한 것들과 차별점이 없다는 것을 깨닳게 되었습니다. 그래서 보다 더 정확한 정의를 내리기 위해 자료를 찾아보게 되었고, 크게 ..

MVC, MVP, MVVM 패턴은 소프트웨어를 개발할 때의 디자인 패턴 입니다. 디자인 패턴은 소프트웨어를 개발할 때의 문제점들을 개선하기 위해 소프트웨어의 구조와 규약을 정리하여 패턴처럼 쉽게 사용할 수 있도록 정리된 방법을 말합니다. 디자인패턴, 그리고 그중 MVC, MVP, MVVM은 면접 질문에서 가장 많이 등장할 정도로 유명하고 기초적인 패턴입니다. 이번 포스팅에서는 이 3가지 디자인 패턴을 소개하겠습니다. ■ MVC - Model View Controller MVC 패턴은 소프트웨어를 개발할때 Model, View, Controller 세 가지 형태로 역할을 나누어 개발하는 디자인 패턴 입니다. Model 모델은 데이터+상태+비즈니스 로직을 말합니다. Model에는 단순히 데이터를 담고 정의하..