Lighthouse of FE biginner

Overview이전 글에서 WebWorker, SharedWorker에 대해서 살펴보고 WebSocket을 얹어서 서버와 통신하는 예제를 구현해봤습니다.해당 코드로 추가적인 리팩토링 작업을 하던 중 로컬의 개발 서버에서는 정상 동작 하지만 빌드 시 worker파일을 빌드에 포함하지 못하는 문제를 확인했습니다. 하여 worker 파일을 빌드하지 않았기 때문에 빌드 결과물을 실행했을 때 worker 스크립트를 찾지 못해서 정상적으로 동작하지 못하는 현상이 발생했습니다. 빌드 디렉토리인 dist를 확인해도 worker 스크립트는 찾아볼 수 없습니다. 해결 과정문제 도출먼저 번들링 과정에서 왜 제외가 된 것일까 곰곰히 생각을 해봤습니다. Vite는 번들러로 rollUp을 사용합니다. rollUp 번들러는 번들링..

Overview저번 글에서 Toss Slash24 세션 중 N개의 탭, 단 하나의 소켓이라는 세션을 공유하며 Web Worker에 대해서 살펴봤습니다.Web Worker 알아보기N개의 탭, 단 하나의 웹소켓: SharedWorker 이번 글에서는 Slash24 세션에서 소개한 SharedWorker을 살펴보고 세션에서 공유해주신 솔루션(SharedWorker에 WebSocket을 얹는)을 예제와 함께 알아보도록 하겠습니다. Socket Server본격적으로 SharedWorker을 살펴보기에 앞서 서버 코드를 공유합니다.해당 예제는 Node.js 환경에서 간단한 소켓 서버를 구현하고 해당 소켓 서버와 통신을 하고 있습니다.Interval을 통해서 8초마다 한번 씩 클라이언트에 메세지를 전송하고, 클라이언..

Overview어제 자기 전 유튜브로 Toss Slash24의 N개의 탭, 단 하나의 웹소켓: SharedWorker 세션을 들었습니다. Web Worker API는 이전에 한번 흝어본 기억이 있어서 알고 있었지만 해당 API를 실제로 사용해본 경험도 없었고 어떤 상황에서 사용하면 좋을지에 대해서 깊게 고민해보지는 못했습니다. 토스 증권에서 WTS를 출시하면서 유저 한명이 여러개의 탭을 띄우고 웹소켓을 통해서 서버와 실시간 데이터 통신을 하는데, 기존의 구조로는 각 탭마다 Web Socket을 가지고 있어서 한 명의 유저가 서버에 여러개의 웹 소켓을 연결해 서버 리소스를 낭비하고 서버에 부하를 줄 수 있는 상황이였습니다. 토스증권의 프론트엔드 박건영 개발자님은 이 상황을 서버측에서 해결할 수 있지만 프론..

Overview해당 포스팅은 MFA 강좌를 수강하고 MFA에 대해서 공부한 내용을 기록하기 위한 포스팅 입니다.MFA가 무엇인지 살펴보고 조직에서 MFA 도입을 고려하면 좋은 시점에 대해서 고민해보도록 하겠습니다.마지막으로는 대표적으로 MFA를 구현하는 방식에 대해서 남겨보도록 하겠습니다.MFA에 대해서 궁금하신 분들은 아래 강의를 통해서 접해보시면 좋을것 같습니다. (관계자 아님, 내돈 내산)> 강의 바로가기 MFAMFA는 Micro Frontend Architecutre의 약자로써 기존의 모놀리식 프론트엔드를 앱 단위로 잘개 쪼개어 하나의 애플리케이션으로 통합하는 현대식 프론트엔드 아키텍처 입니다. 잘개 쪼갠다고 하는데 무엇을 쪼갤 수 있을까요? 당근 플랫폼을 예시로 들어서 살펴보도록 하겠습니다.  ..

지난 7월 21일 MFA 강의 수강을 시작하면서 글을 작성했다.MFA, Monorepo 강의 수강을 시작하며 두 달이 지난 시점에서 강의를 완강했다. 부록 한 파트가 남긴 했는데 레거시 환경에서의 점진적 전환에 관한 파트는 넘어가도 괜찮겠다는 생각이 들어서 수강하지 않았다. 강의를 듣기 전까지는 MFA에 대해서 자세하게 알지 못했다. MSA는 근무한 팀에서도 택하고 있는 아키텍처이고, 화제성이 많은 아키텍처이기 때문에 잘 알고 있었다. MFA도 MSA처럼 프론트엔드 애플리케이션을 서비스 단위로 쪼개는 것에 대해서는 알고 있었지만, 정확히 어떤 방식으로 구현을 할지에 대해서는 생각해보지 못했던 것이다. 회사에서도 MFA에 대한 이야기가 나왔고, 평상시에 MFA와 모노레포에 대한 두려움을 가지고 있었고 요즘..

OverviewReact는 다른 UI 프레임워크에 비해서 상태 관리가 복잡하고 어렵다는 이야기가 종종 들립니다. 이번 글에서는 상태에 대해 알아보고 상태 관리가 왜 복잡한지에 대해서 고민해보도록 하겠습니다. 왜 React의 상태 관리는 어려울까?React의 상태는 랜더링과 직접적인 관계가 있습니다. 상태가 변경이 되면 해당 상태와 연관된 컴포넌트는 랜더링이 발생합니다. 그렇기 때문에 상태를 최적화 하는 것이 중요합니다. React의 상태를 잘 관리하는 것이 곧 컴포넌트 랜더링 최적화이기 때문입니다. (물론 랜더링 최적화 수단은 상태 관리 외 여러가지 것들이 있습니다.) React의 데이터의 흐름React의 데이터는 단방향으로 흐릅니다. 위에서 아래로, 부모 노드에서 자식 노드로 데이터가 흘러갑니다. 이는..

Overview지난 7월 프로젝트의 프론트엔드를 개편하는 과정에서 패키지 매니저를 Yarn berry에서 pnpm으로 교체를 진행했습니다.그 당시 교체를 선택한 이유는 몇 가지가 있었는데, 이번 포스팅에서는 pnpm을 학습했던 내용을 기록하고 교체를 진행했었던 이유를 남겨보려고 합니다. pNpM먼저 pNpM에 대해서 살펴봅시다.왜 pnpm을 pNpM이라고 했는지 간단하게 살펴보자면, 홈페이지에서 새로고침을 할 때 마다 텍스트가 랜덤하게 변하는 것을 확인 했습니다. 딱히 정해져 있지 않은 것인가 해서 어느 순번에 나타난 pNpM을 살펴보려고 합니다. pnpm은 perfomant npm 의 약자로써 말 그대로 향상된 npm입니다. 그럼 어떤 장점이 있길래 향상된 npm 이라고 하는 것 일까요?  전역 스토어..

OverviewReact 프로젝트를 하다보면 DOM을 직접 제어하거나, DOM의 정보를 필요로 하는 시점이 있습니다.또 렌더링을 유발시키지 않는 특정 값이 필요로 하는 경우가 있을수도 있고, 자식 컴포넌트에서 정의된 함수를 상위 컴포넌트에서 사용하고 싶은 경우가 있습니다. 이번 포스팅에서는 위와 같은 케이스를 바탕으로 React의 useRef 훅에 대해서 살펴보겠습니다. useRefReact에서 랜더링을 발생시키지 않는 값을 필요로 한다면, 즉 React에 의해서 제어받지 않는 값을 필요로 한다면 고민해볼 수 있는 것이 useRef를 활용한 ref 객체 입니다. React 프로젝트를 하다보면 변하는 값, 즉 상태를 state로 정의합니다. state는 랜더링을 유발하고 React 재조정 엔진에 제어를 당..

Overview최근 업무에서 구현된 AlertDialog를 Swal 라이브러리와 비슷한 형태로 사용 가능하게 POC가 가능하냐는 요청이 들어왔습니다. Swal 라이브러리는 Sweet Alert의 약자로 Alert 컴포넌트를 Promise 단위로 다루어 선언적이고 쉽게 Alert를 다룰 수 있는 라이브러리입니다. 구현된 Alert Dialog 컴포넌트는 radix-ui/react-alert 라이브러리를 활용해 구현이 됐으며 해당 컴포넌트를 사용하기 위해서는 컴포넌트를 랜더링 시키고 props를 넘겨줘야 합니다. AlertDialog를 사용하는 곳 페이지 혹은 컴포넌트 마다 랜더링 하도록 구현하는 것은 상대적으로 많은 코드 중복이 발생할 뿐더러 개발 경험이 저하됩니다. 하여 Swal 라이브러리 처럼 사용처에..

Overview프론트엔드 프로젝트를 하다보면 테이블 컴포넌트를 활용해야 할 경우가 있습니다.이럴때 다양한 선택지를 놓고 고민할 수 있습니다. 1. HTML table 태그, div 태그를 활용해 테이블 기능 직접 구현2. MUI, antd, chakra-ui 와 같은 UI 라이브러리에서 제공해주는 Table 컴포넌트 사용3. Headless UI 라이브러리를 활용해 Table 컴포넌트 구현 요즘에는 첫 번째 선택지의 table 태그로 직접 테이블을 구현하지 않습니다. 태그의 자유도가 떨어져 div 태그를 활용해 구현하는 편 입니다. 2번의 UI 라이브러리를 사용한다면 테이블 컴포넌트 뿐만 아닌 다양한 컴포넌트를 사용할 수 있어서 장점이 뚜렷합니다.하지만 테이블 컴포넌트만 사용하기엔 라이브러리의 번들 사이..