내가 레퍼런스가 되자 내가 레퍼런스가 되자

기존 레거시 프로젝트를 리팩토링하면서  Recoil을 도입하게 되었습니다. 이전에 React 프로젝트에서는 Redux을 사용했기 때문에 팀 내부에도 기술전파가 필요하여 내용을 정리하게 되었습니다. Recoil?Recoil은 Facebook 팀에서 만든 상태 관리 라이브러리로 공식 페이지에서도 확인할 수 있듯이 Recoil을 React를 위한 상태 관리 라이브러리로 표명하고 있습니다. Recoil에서는 atom이라는 상태 단위와 selector라는 파생된 상태를 나타내는 순수 함수를 통해 상태를 나타냅니다. 자세한 내용은 사용 방법에서 알아보겠습니다. Recoil vs ReduxRedux는 Flux 아키텍처를 베이스로 만들어진 상태 관리 라이브러리로 트리 형태의 store 구조를 가집니다. 비동기 처리를 ..

FE 개발 배포 시 따로 웹서버를 띄우지 않고 인프라에 대한 관리 리소스를 줄이기 위해 serverless 인프라 구축을 하여 사용 중입니다. 이번에 개발팀 내에 공유하는 자리와 가이드 역할을 맡게 되어 해당 내용을 정리하게 되었습니다. 인프라 구성도 기술 스텍사용하는 기술 스텍을 간단하게 알아보고 인프라 구축 내용으로 넘어가도록 하겠습니다.AWS S3Amazon S3는 데이터를 버킷 내의 객체로 저장하는 객체 스토리지 서비스객체는 해당 파일을 설명하는 모든 메타데이터버킷은 객체에 대한 컨테이너(디렉토리)⇒ FE에서 build를 통해 만들어내는 산출물(bundle)을 올려두는 용도로 사용합니다.AWS CloudFrontAmazon CloudFront는 CDN 서비스콘텐츠 요청이 발생한 곳과 가까운 Edg..

React 18버전에서 새로 나온 hooks인 useTransition을 이번에 사용하게 되어 팀 내에서도 공유하고 포스팅도 하게 되었습니다. useTransition와 비슷한 역할을 가진 useDeferredValue도 같이 알아보겠습니다. useTransition?React 공식 홈페이지에서 useTransition 설명은 다음과 같습니다.useTransition is a React Hook that lets you update the state without blocking the UI.useTransition 은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다. useTransition은 파라미터를 받지 않고 isPending, startTransition 두 개의 값을 ..

TypeScript를 사용하면서 상수를 지정할 때 enum과 as const의 방식이 있습니다. 팀 단위로 개발을 진행하면서 상수 지정에 대한 컨벤션은 따로 없었고 팀원들의 스타일에 따라 각각 사용 중이었습니다. 상수 지정 방식을 통일하고 해당 내용을 정리할 겸 enum과 as const의 차이를 알아보겠습니다. Enums enum 예시로 enum을 사용하여 상수를 지정합니다. // 숫자 열거형 enum Direction { // 따로 할당된 값이 없을 경우 0부터 차례로 할당 됨. Up, Down, Left, Right, } // 문자열 열거형 enum DirectionString { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT', } 숫자 열거형..

우연히 회사 동료분들과 이야기하면서 event capturing 이슈를 듣게 되었는데 순간 capturing이 위에서 아래로 전달인가? 방향이 헷갈려 제대로 다시 봐야겠다 싶어 정리하게 되었습니다. 이번 기회에 이벤트를 어떻게 전달하고 이러한 전달을 막기 위해 어떻게 처리하는지 알아보겠습니다. Event Bubbling vs Capturing Event Capturing은 특정 element에서 event 발생 시 하위 element로 이벤트가 전달됩니다. | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | E..

기존 프로젝트에서 eslint-plugin-prettier를 사용하여 eslint 설정에서 prettier 설정을 같이 하여 code formatting을 하고 있었습니다. 여러 레퍼런스와 prettier 공식 문서에서도 해당 라이브러리를 사용하여 lint에 묶어서 처리하는 것을 추천하지 않습니다. 그래서 eslint-plugin-prettier를 제거하고 eslint 설정과 prettier 설정을 분리하는 과정을 포스팅하게 되었습니다. eslint-plugin-prettier? or eslint-config-prettier? eslint 설정과 prettier 설정을 분리하기 전에 제거할 eslint-plugin-prettier와 추가할 eslint-config-prettier 두 개의 라이브러리에 대..

최근 팀 내에서 Tailwind CSS Class를 사용할 때 좀 더 효율성 있게 작성하는 방식에 대해 논의하게 되었습니다. 기존 작업 중인 프로젝트에서는 Styled Component와 Tailwind CSS를 같이 쓰는 방식을 채택하여 사용 중인데 새롭게 들어가는 프로젝트에선 clsx, class-variance-authority, tailwind-merge를 조합하여 사용하는 방식을 사용해 보려고 합니다. 필요 라이브러리 ※ React에서 Tailwind CSS 설정이 되어 있는 환경을 가정합니다. clsx는 조건부 className 처리를 위해 사용되며 라이브러리 크기가 매우 작은 장점을 가지고 있습니다. import { clsx } from 'clsx'; clsx('w-full', true &&..

Webpack을 사용할 때 이전에 미리 Webpack과 함께 Babel, 각종 loader들을 설정하여 만들어둔 package를 가져와 사용하고 현재는 Vite를 사용하다 보니 Webpack을 직접 다룬지 오래되어 리프레시 겸 다시 찾아보게 되었습니다. 지난번 Babel 포스팅처럼 간단히 정리하려고 합니다. Webpack? Webpack은 여러 개의 JavaScript module을 하나(또는 여러개)의 파일로 만드는 bundler입니다. 클라이언트 개발에서 module의 개념이 등장한 이후 bundler의 존재도 뗄 수가 없으며 이제는 필수가 되었습니다. 그중 Webpack은 많은 개발자로부터 선택받은 bundler입니다. Webpack Config Webpack의 config 설정을 위해 루트 디렉토..