Lighthouse of FE beginner

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 라이브러리를 사용한다면 테이블 컴포넌트 뿐만 아닌 다양한 컴포넌트를 사용할 수 있어서 장점이 뚜렷합니다.하지만 테이블 컴포넌트만 사용하기엔 라이브러리의 번들 사이..

Overview프론트엔드에서 프로젝트를 진행하다보면 반복되는 문자열 형식의 값이 존재합니다.보통 반복되는 값은 다음과 같은 경우입니다. 1. 반복되는 문구로 사용자에게 노출할 텍스트2. 서버와 약속을 해 프로젝트 자체에서 사용하는 텍스트3. 프론트엔드 프로젝트에서만 사용하는 상수 값 2번의 경우 보통 코드라는 단어로 부르게 되고, 3번의 경우 프로젝트에서 상수라고 부르게 됩니다. 반복되는 값, 리터럴반복 되는 값은 리터럴 그 자체를 매번 사용하는 것이 아닌 특정 변수에 담아서 사용해야 합니다. 예를 들면 다음과 같은 코드가 있습니다.예시를 들기위해 서버에서 특정 에러 케이스를 200 응답에 status라는 필드를 통해 알려주고 있다고 가정합니다. fetch('api').then((res) => { co..

Overview클로저는 자바스크립트의 고유 개념이 아닙니다.함수가 일급 객체로 여겨지는 함수형 프로그래밍 언어에서도 클로저의 개념이 있습니다.자바스크립트는 멀티 패러다임 언어로써 객체지향, 함수형 프로그래밍 모두 지원하며 함수는 일급객체로써 활용됩니다.자바스크립트는 함수를 일급객체로 여깁니다. 그렇기에 함수를 변수에 담거나 매개변수로 넘겨주거나 어떤 함수의 리턴 객체로 사용할 수 있습니다. 클로저란?MDN 의 정의에 따르면 클로저는 "함수와 함수가 선언된 렉시컬 환경의 조합" 이라고 합니다.문자 그대로 본다면 난해합니다. 외우기도 어렵습니다. 그렇기 때문에 이해하는 과정이 필요합니다. 함수 정의의 평가먼저 클로저를 이해하기 위해선 자바스크립트의 실행 컨텍스트에 대해 이해하고 있어야합니다. 자바스크립트는 ..

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

Overview작업중인 백오피스에서 알림을 구현했습니다.아직 백오피스에 Role 기능이 없기 때문에 알림받는 타겟은 전체로 설정했고,소켓을 열어 새로운 업무가 발생하면 메세지를 받아서 알림 컴포넌트에 뿌려주는 식으로 구현했습니다.그럼 구현했던 과정을 알아보겠습니다! 기술먼저 실시간 서비스는 단순 REST 아키텍쳐에서 구현이 불가능합니다. 정확히 말하면 폴링으로 구현은 가능하지만 비효율적 입니다.HTTP/HTTPS 프로토콜은 상태가 유지되지 않습니다.그렇기 때문에 실시간 서비스를 구현하려면 폴링 혹은 소켓을 이용해야합니다.저는 알림 서비스에서 가장 보편적으로 사용되는 소켓을 열기로 했고 프로토콜로 STOMP를 사용했습니다.STOMPSTMOP 프로토콜이랑 Simple Text Oriented Messagin..

OverviewVite는 웹 애플리케이션을 빠르게 만들수 있도록 도와주는 프론트엔드 개발 툴 입니다. 내부적으로 ESM을 사용하며 ESBuild를 활용해 디펜던시를 빠르게 사전 번들링을 수행하고, rollUp을 사용해 빌드를 효율적으로 진행합니다. 오늘 포스팅에서는 Vite 템플릿을 활용해 라이브러리를 제작할 수 있도록 초기 셋팅 진행 과정을 소개해드리겠습니다.아래 과정을 천천히 따라와주세요!https://ko.vitejs.dev/guide/build.html#library-mode 환경 구축먼저 Vite 환경을 구축해주세요. 환경 구축은 일반적인 Vite 템플릿 생성 과정과 동일합니다.pnpm create vite my-react-lib --template react-ts 라이브러리를 구축하며 Stor..

Overview이전 프로젝트 진행 중 고민했던 내용입니다. 기획된 화면에서 작업하기 번거로운 기획이 있었습니다. 컴포넌트 분기로 처리하는 것이 아닌 물리적으로 주소를 가진채 클라이언트 라우팅이 되어야 하는데 화면 기획 상 컴포넌트 분기로 처리할 수 밖에 없는 상황이였습니다.현상백오피스에서 서비스를 관리하는 리스트 메뉴가 있습니다.해당 메뉴는 서비스 > 돌봄 > 게시물 > 구인/구직/업체 계층으로 구조화 되어 있습니다.최초 작업을 했을 때 서비스 > 돌봄 > 게시물 까지만 페이지 라우팅을 시키고 게시물 페이지 내부에서 분기처리를 통해 컴포넌트를 라우팅하자 (url path 가 붙지 않습니다.) 생각했습니다.아래는 그렇게 작성한 게시물 컴포넌트 입니다.const Posting = () => { const ..

Overview프론트엔드에서 상태관리는 중요합니다. 핵심적으로 상태를 통해서 변하는 값에 따라서 UI 를 동적으로 다룰수 있기 때문입니다.React 에서는 기본적으로 useState 라는 훅을 사용해 상태를 관리하고 있지만 프로젝트를 진행하다보면 컴포넌트에 계층이 생기고 상위 컴포넌트에 담겨 있는 상태 값을 하위 컴포넌트에서 사용해야 하는 경우가 발생합니다.이때 컴포넌트에 props 을 통해서 상태를 전달해주고 여러 컴포넌트를 거치다보면 props drilling 이라는 현상이 발생하는데, 이를 해결하기 위해 전역 상태관리 라는 개념이 생겼고 이를 구현한 라이브러리인 Redux, MobX, Recoil, Zustand 들이 세상에 나오게 됐습니다.상태 관리 라이브러리이전의 프로젝트에서 Redux 와 Re..

들어가며이번 포스팅에서는 @radix-ui/react-select 패키지를 활용해 Multiple Select 컴포넌트를 구현해보도록 하겠습니다. Radix UIRadix UI는 Headless UI 라이브러리 입니다.Headless UI 라이브러리란 다른 UI 라이브러리와 다르게 디자인이 입혀진 컴포넌트를 제공하는 것이 아닌 디자인 없이 해당 컴포넌트의 기능만을 제공하는 라이브러리 입니다. 디자인을 제공하는 라이브러리는 MUI, antd, Chakra UI 와 같은 라이브러리가 있습니다.위 라이브러리 모두 컴포넌트와 기본 디자인을 제공해 디자이너가 없는 프로젝트의 경우 프로젝트를 빠르게 구현할 수 있다는 장점이 있습니다.하지만 위 라이브러리의 디자인을 커스텀 하려면 공수가 상당히 많이 들어가는 편이고 ..