전체 글

위의 이미지가 redux 동작원리의 전부입니다. (미들웨어가 빠졌지만 이는 뒤에서 설명하겠습니다.) 설명하기에 앞서 각각의 요소에 대해서 알아보죠. Action 액션은 type 필드를 가진 자바스크립트 객체입니다. 쉽게 생각해서, 어떤 일이 일어났는지를 설명하는 이벤트라고 생각하셔도 무방합니다. 보통, type과 payload 프로퍼티를 가지며 type은 어떤 액션인지를 나타내며, payload는 데이터를 담습니다. 액션은 dispatch를 통해 reducer 함수로 보내지며 기존의 state를 기반으로 새로운 state를 생성합니다.(불변성을 지키는 것이 redux의 원칙이죠.) Dispatch redux에서 dispatch는 액션을 reducer로 전달합니다. 즉, state를 업데이트하는 유일한 방..

webpack 공식문서에서 guide를 보며 정리해야할 것들을 기록으로 남기려합니다. 삽질하고, 헷갈리고, 중요 컨셉을 중점적으로 정리해보겠습니다. Asset Management 이미지나 폰트같은 자원들은 웹팩에 내장되어있는 로더를 사용합니다. { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource", }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: "asset/resource", } 로더를 정의하는 부분에서 type 을 정의해주는데요. asset/resource는 웹팩의 내장 로더인 file-loader를 사용하겠다는 것입니다. file-loader는 자원들을 output 파일에 생성하며 자원의 url을 expo..

Why Factory Method? 팩토리 메서드의 유스케이스에 대해서는 아직은 정확하게는 잘 모르겠습니다. 아직은 디자인 패턴을 실제 실무 코드에 어떻게 활용하고, 프런트엔드 프레임워크에서 컴포넌트를 개발할때 이 디자인 패턴을 어떻게 활용하는지 모르겠습니다. 이후에 더 정확한 유스케이스에 대해서 알게 되면 포스트를 다시 정리하는 것으로 하고 오늘은 팩토리 메서드의 원리에 대해 알아보죠. Diagram 다이어그램을 보면 추상화된 RocketFactory와 Rocket이 있고 이를 상속하는 FastFactoryRocketFactory, FastRocket 클래스가 있습니다. 즉, 로켓을 어떻게 만드는지와 로켓은 어떤 부품을 가지고 있는지 일반적인 것들은 추상클래스에 정의를 하고 이를 활용해 구체적인 팩토리..

slack을 클론코딩하기 전에 웹소켓의 동작원리와 웹소켓이 해결하는 문제가 무엇인지 알아보겠습니다. 이 포스트는 https://ko.javascript.info/websocket 을 요약한 글입니다. Why WebSocket 웹소켓은 HTTP의 한계를 해결하기 위해서 등장했습니다. HTTP는 단방향 프로토콜이므로 반드시 client에서의 요청이 있어야지만 server로부터 데이터를 응답받을 수 있는 구조이죠. 이에 대한 해결방법으로 long-polling을 전통적으로 사용해왔습니다. 그러나 long-polling방식은 요청이 서버에 묶여있는 timeout동안 그에 대한 response를 서버에 저장해야하므로 서버 리소스를 사용하는 한계점을 가지고 있습니다. 웹소켓은 response를 받은후에도 TCP 커..