Lighthouse of FE biginner

모던 자바스크립트 Deep Dive 스터디 3회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다. 객체자바스크립트에서는 원시 값을 제외한 모든 값이 객체이다. 배열, 함수, 정규식 등 모든 것들이 객체이다. 원시 값은 변경 불가능하다. 메모리에 한번 선언이 되고 원시 값의 값을 변경한다면 해당 주소의 값이 변경 되는 것이 아닌 새로운 공간에 메모리를 할당하고 해당 주소에 값을 매핑한다. 반면에 객체는 메모리에 선언된 후 해당 주소의 값을 변경할 수 있다. 이 말은 새로운 객체를 변수에 할당하는 것이 아닌 해당 객체의 프로퍼티 값을 변경해도 메모리의 주소가 달라지지 않는다는 것이다. 프로퍼티객체는 프로퍼티의 집합이고 프로퍼티는 문자열 또는..

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의 약자로써 기존의 모놀리식 프론트엔드를 앱 단위로 잘개 쪼개어 하나의 애플리케이션으로 통합하는 현대식 프론트엔드 아키텍처 입니다. 잘개 쪼갠다고 하는데 무엇을 쪼갤 수 있을까요? 당근 플랫폼을 예시로 들어서 살펴보도록 하겠습니다.  ..

Overview오늘은 TypeScript any에 대해서 다뤄볼 예정입니다.4월 새로운 팀에서 근무를 시작하고 프로젝트를 받아서 코드 파악을 하는 도중 any 타입이 너무 남발되어 있어서 당황한 적이 있습니다.최근에 회사에 좋지 않은 바람이 불어서 다른 팀 인원이 부족한 상황에 도움을 주러 팀이 이동됐습니다.또 다시 프로젝트를 클론 받아서 코드를 파악하려는데 이번 프로젝트는 대부분의 타입이 any로 되어있더군요.. 사실 이 글은 그 분노로 인해서 탄생된 글입니다. TypeScript타입스크립트란 무엇인가요?자바스크립트에 정적인 타입을 올려놓은 자바스크립트 슈퍼셋 언어입니다. 자바스크립트(JavaScript)는 동적인(Dynamic한) 언어입니다. 컴파일 단계에서 타입이 정해지지 않고 런타임 시점에 타입이..

들어가며프론트엔드에 있어서 테이블 컴포넌트는 중요한 컴포넌트 입니다.모든 프로덕트에 테이블 컴포넌트가 들어가지는 않지만, 데이터를 다루는 프로덕트에서는 대부분 테이블 컴포넌트를 구현해서 사용하고 있습니다.리액트에서 테이블을 다룰수 있는 방법은 여러가지 방법이 있습니다.1. table 태그를 사용해 직접 구현하기2. UI 라이브러리의 힘을 빌려 구현하기3. headless UI 라이브러리의 힘을 빌려 구현하기 이 중 저는 headless UI 라이브러리의 힘을 빌려 테이블 컴포넌트를 구현했습니다. 테이블 컴포넌트를 구현하는 포스팅은 다음 포스팅에서 작성할 예정이고, 오늘은 작업한 컴포넌트에 가상 리스트를 도입했던 과정을 남겨보도록 하겠습니다. 가상 리스트란?가상 리스트란 가상화 기술을 활용해 테이블의 로우..

들어가며보통의 리팩토링 작업은 그다지 큰 단위의 작업이 아니기에 회고를 작성하지는 않지만 이번 Vite 마이그레이션 작업은 정말 크고 중요한 리팩토링이자 리팩토링의 최종 목표였기 때문에 회고 글을 작성한다. 4월 중순에 팀에 합류하고 프로젝트를 살펴보고 Vite로 마이그레이션 하면 좋겠다 라는 생각을 했다. 더불어 React와 TypeScript 버전도 최신 버전으로 버전 관리를 해야겠다는 생각도 들었다. 그 이유는 다음과 같았다.너무 오래 걸리는 개발 서버 구동시간오래 걸리는 빌드 시간그 당시 최적화는 됐지만 eject된 CRA는 버전 관리가 어렵고 프로젝트의 복잡도만 늘어난다.메인 라이브러리인 React와 TypeScript의 버전 관리가 안돼서 서드 파티 라이브러리의 버전 관리 또한 안됨. 이럴수록..