Lighthouse of FE biginner

들어가며React 애플리케이션은 컴포넌트 단위로 만들어집니다.다양한 컴포넌트 중에서도 폼(Form) 컴포넌트가 존재합니다. 폼 컴포넌트는 사용자에게 값을 입력 받아 요청을 처리할 수 있는 중요한 역할을 하는 컴포넌트 입니다. React에서 폼 컴포넌트를 다루기 위한 방법은 크게 두 가지가 있습니다. 제어 컴포넌트, 비제어 컴포넌트 입니다.그럼 제어 컴포넌트는 무엇이고, 비제어 컴포넌트는 무엇일까요?이번 게시글에서는 제어 컴포넌트, 비제어 컴포넌트의 차이를 알아보고 react-hook-form 라이브러리를 사용해 비제어 컴포넌트를 살펴보도록 하겠습니다. 잠깐! JavaScript 없이 form을 다루는 법을 아시나요?JavaScript를 사용하지 않고 폼을 다루는 방법을 아시나요? 최근 면접에서 해당 질문..

Overview이번 포스팅에서는 합성 컴포넌트에 대해서 살펴보도록 하겠습니다.합성 컴포넌트는 컴포넌트를 조합하여 UI를 만드는 것으로 컴포넌트의 재사용성을 극대화 시키는 패턴입니다.합성 컴포넌트 패턴을 활용하면 여러가지 이점을 볼 수 있습니다 합성된 컴포넌트들은 독립적으로 유지되지만 서로 상태를 공유하며 긴밀하게 연결된다.비지니스 로직이 섞이지 않으며 비지니스 로직이 컴포넌트 단위로 잘게 쪼개진다.컴포넌트를 잘 쪼개고 상태 관리를 최적화 할 수 있어서 랜더링 최적화가 된다.예제를 살펴보며 합성 컴포넌트를 자세히 살펴봅시다. 예제일반 컴포넌트리스트를 구현해야 하는 상황이 발생 했습니다. 초기에는 단순히 라벨만 노출시키면 되는 단순한 리스트입니다.type Props = { items: Item[];};co..

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

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

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

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..