Lighthouse of FE beginner

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 와 같은 라이브러리가 있습니다.위 라이브러리 모두 컴포넌트와 기본 디자인을 제공해 디자이너가 없는 프로젝트의 경우 프로젝트를 빠르게 구현할 수 있다는 장점이 있습니다.하지만 위 라이브러리의 디자인을 커스텀 하려면 공수가 상당히 많이 들어가는 편이고 ..

들어가며저번 포스팅에서 사례로 살펴보는 커스텀 훅이라는 글로 여러 케이스의 커스텀 훅을 소개드렸습니다. 이번 포스팅에서는 소개하지 못했던 사례인 특정 훅을 사용하면서도 여러 컴포넌트에서 사용 가능해 추상화가 가능할 경우를 실제로 구현했던 과정에서 왜 이런 설계를 했는지 고민했던 과정을 남겨보겠습니다. 과정문제 제기먼저 이번 사례는 프로젝트 개선 과정에서 도출된 사례입니다. 진행중인 프로젝트의 대시보드에서는 툴팁을 직접 구현해서 사용하고 있습니다.툴팁의 위치를 계산하기 위해 마우스 커서의 위치를 반환하고 해당 x, y축의 좌표값을 컴포넌트의 top, left로 사용하고 있습니다.이 과정에서 툴팁 컴포넌트가 Viewport의 끝단에 마주칠경우 툴팁이 화면에 보이지 않는 영역에 위치해버려 스크롤이 생기는 케이..

들어가며리액트로 프론트엔드 개발을 하다보면 여러 컴포넌트에서 공통으로 사용하는 로직과 아주 동일한 코드는 아니지만 비슷한 비즈니스 로직을 여러 컴포넌트에서 사용하는 케이스가 있습니다. 단순한 순수 함수로써 리액트의 생명주기와 관련이 없는 로직이라면 유틸성 함수로 분리할 수 있지만, 해당 로직에 리액트 컴포넌트의 생명주기 혹은 리액트 API가 포함되어 있다면 일반 함수로 분리할 수 없습니다. 그 이유는 리액트의 훅(Hook)은 반드시 훅이나 컴포넌트 내부에서 사용해야 하기 때문입니다. 커스텀 훅(Custom Hook)이란?커스텀 훅이란 말 그대로 리액트의 API를 사용하는 사용자 정의 훅입니다. 요즘의 리액트는 대부분 함수 컴포넌트로 개발을 합니다. 주류였던 클래스형 컴포넌트를 비주류로 내려오게 만든 업데..

들어가며프론트엔드 작업을 하다보면 동적으로 레이아웃이 변화하는 컴포넌트를 감지해야 할 경우가 있습니다.변화하는 Viewport의 크기는 window 객체에 resize 이벤트를 바인딩해 감지를 할 수 있지만 특정 엘리먼트를 감지하는 것은 window 객체로 할 수 없습니다.이번 포스팅에서는 React 프로젝트에서 특정 엘리먼트의 변화를 감지하는 방법을 알아보겠습니다. ResizeObserverResizeObserver은 JavaScript의 API입니다.내장된 API로써 ResizeObserver 객체(인스턴스)를 생성해 파라미터로 이벤트 핸들러 함수를 넣어주고 해당 객체의 observe 메서드를 활용해 특정 엘리먼트를 감지할 수 있습니다. 예제코드아래 상황은 특정 엘리먼트에 스크롤이 생겼는지 여부를 체..

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

들어가며오늘은 GPT API를 사용해 서비스를 만드는 과정을 남겨보겠습니다. 요즘이라고 하기에는 GPT가 화제가 되기 시작한지가 벌써 3년이 넘었지만 가장 핫하고 뜨거운 주제는 GPT, AI가 아닐까 싶습니다. 실무 레벨에서는 이젠 GPT를 멀리 하는 것이 어려운 세상이 됐습니다. 저도 코딩을 할 때, 글의 초안이 필요할 때 GPT에게 부탁하고는 합니다. 최근 어떤 프론트엔드 개발자분께서 원영적 사고라는 아이디어로 GPT API를 활용해 재미있는 서비스를 만들었더라구요. 저도 GPT API가 궁금하기도 했고 어떻게 활용할 수 있을까 생각을 하던 중 가장 간단한 서비스를 만들어보자! 하며 무엇인가를 만들어봤습니다. 간단하게 나의 상황과, 기분, MBTI를 클릭하면 GPT가 명언과 함께 조언을 보내주는 서비..