개발 창고

Rsbuild 기반 Tistory-react 프레임워크 개발기

들어가며Rsbuild 기반의 tistory-react 프레임워크를 개발하게 된 계기와 기술 스택 선정부터 개발을 하며 겪은 많은 문제들을 소개하려 한다.해당 프레임워크는 아래 깃허브에 오픈소스로 모두 공개되어있다.https://github.com/eunbae0/tistory-react GitHub - eunbae0/tistory-react: Create tistory skin with React.jsCreate tistory skin with React.js. Contribute to eunbae0/tistory-react development by creating an account on GitHub.github.com프레임워크를 개발하게 된 계기우선 필자는 typescript + tailwindcss..

[React] ky로 로그인 유지 구현하기 (with. JWT 인증)

들어가며 ky는 fetch와 ESM을 기반으로 하는 HTTP Client를 제공하는 라이브러리입니다. 주로 사용되는 Axios의 interceptors와 비슷하게 ky는 응답을 intercept 하여 커스텀하게 조작이 가능한 AfterResponse, BeforeRequest와 같은 훅을 제공합니다. 따라서 해당 훅을 이용하여 JWT 인증을 통해 로그인 상태를 처리하는 앱에서, 로그인을 유지하도록 하는 방법을 소개하겠습니다. API 요청 전 Header에 access token 담기 beforeRequest 훅에서는 HTTP request 이전에 수행 할 동작을 지정할 수 있습니다. 따라서 아래와 같이 accessToken을 Authorization Header에 담는 로직을 구현합니다. import {..

[React] 함수의 중복 호출을 막기 위한 throttling 기능 적용기

문제사항 const handleSubmit = async () => { // API 호출... }; API를 호출하는 위와 같은 함수가 있습니다. 이러한 함수는 보통 button, input의 이벤트 함수에서 실행되는데, 예를 들어 유저가 단시간 내에 버튼을 여러번 클릭시 API 통신 오류가 발생하는 경우가 있었습니다. 이에 해당 함수의 클릭 시간을 조절하는 throttle기능이 필요했고, 이를 구현한 방법을 소개하겠습니다. 중복 호출을 막기 위한 useThrottle 훅 구현하기 throttle기능을 구현하는 방법 중에는 여러 방법이 있지만, 저는 slash 라이브러리처럼 함수 전체를 감싸서 throttle기능을 적용하는 방식으로 구현하고 싶었습니다. 이에 throttle의 callback의 시간을 관..

[React] vite와 함께 리액트 컴포넌트 npm에 배포하기

우리가 흔히 사용하는 react, eslint와 같은 패키지를 우리도 npm에 직접 배포할 수 있습니다. react 함수와 컴포넌트 등을 작성한 라이브러리를 추후 프로젝트에 만들어서 사용할 예정이기 때문에, 이를 연습하기 위해 여러 리액트 컴포넌트를 npm에 배포한 과정을 설명하겠습니다. 추가적으로, 개발자 경험과 번들링 사이즈 개선을 위해 여기에 이점이 있는 pnpm과 vite를 사용해서 배포해보겠습니다. vite + pnpm으로 프로젝트 설정하기 pnpm create vite (프로젝트 명) 위 명령어를 실행하면 아래와같이 framework와 언어를 선택할 수 있습니다. react 컴포넌트를 배포하기 위해 React를 선택한 다음, typescript를 지원하기 위해 Typescript를 선택해줍니다..

[React] 메모이제이션 Hook으로 중복연산 피하기 (useCallback, useMemo)

메모이제이션(Memoization)은 프로그램이 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장함으로써 중복되는 연산을 제거해서 프로그램 실행 속도를 빠르게하는 기술입니다. 리액트 함수형 컴포넌트에서는 이러한 메모이제이션을 돕기 위한 두가지 Hook을 제공합니다. 메모이제이션을 하지 않을 때 함수형 컴포넌트에서 상태값이 변경되면 해당 컴포넌트는 다시 렌더링합니다. 이때 컴포넌트 내부에 정의한 함수들도 다시 생성되고 실행되기 때문에 메모이제이션이 필요합니다. 아래와 같은 경우 메모이제이션 훅 useCallback과 useMemo를 사용할 수 있습니다. 렌더링 마다 함수가 새로 생성되어 참조값이 변하는 경우 실행되는 함수가 복잡한 연산을 수행하는 경우 이외에도 훅을 사용하는 다양한 경우가 있지만..