Jiseong's Web Dev blog

IntroReact는 왜 RSC(React Server Component) 방식을 사용할까? RSC가 해결하려고하는 문제는 무엇일까? Server Side Rendering과 RSC는 다른 것일까? Next.js에서 RSC를 렌더링하는 과정, RCC(React Client Component)를 렌더링하는 과정에 대해 자세히 살펴보자.SSR? RSC?먼저 SSR과 RSC의 개념에 대해 정확히 짚어보자. SSR은 요청 시점에 서버에서 HTML을 생성해 클라이언트로 전달하는 렌더링 방식이다. 서버가 데이터를 fetch하고 HTML을 완성해서 클라이언트로 전달한다. 이후 클라이언트는 JS 번들을 다운로드 받아 실행하고 Hydration 과정을 거쳐 인터렉션을 더한다.RSC는 서버에서 실행되는 컴포넌트이다. 서버..

개요, 쉬워 보이지만 너무 어려운 자동로그인자동 로그인 구현은 단순해 보이지만, Fullstack Framework(Next.js, SvelteKit 등) 환경으로 넘어오면 이야기가 달라진다. 특히 보안을 위해 RTR(Refresh Token Rotation) 방식을 채택했을 때 발생하는 '병렬 요청에 의한 토큰 무효화' 문제는 굉장히 까다롭다. Fullstack Framework는 서버 사이드가 있다. 서버사이드에서는 이를 어떻게 관리할 것인지, 보안적인 관점에서도 살펴볼 것이다.RTR 방식의 문제점백엔드는 보안을 위해 RTR(Refresh Token Rotation) 방식을 사용하고있다. 프론트에서 병렬 요청이 발생할 때 문제가 발생한다. 단 시간에 여러 refresh 요청이 들어오면 첫 요청만 성공..

Intro최근 Shadcn은 BaseUI를 도입했다.BaseUI의 멤버는 Radix, Floating UI, Material UI 의 creator 들이다.BaseUI는 RadixUI보다 더 복잡한 컴포넌트를 제공한다. (ComboBox, Autocomplete, etc..)7명의 멤버가 full-time으로 관리하고 있다는 점도 강조한다.RadixUI와 BaseUI 사이 가장 눈에 띈 차이점은 컴포넌트를 composition하는 방식이 다르다는 점이었다.RadixUI는 asChild 패턴을 대중화시켰다.많은 라이브러리가 이 패턴을 도입하였다.BaseUI는 비교적 최근 개발된 라이브러리이고 왜 asChild 방식을 채택하지 않았는지 궁금증이 생겼다.BaseUI Issue 게시판에 이와 관련된 흥미로운 주..

useEffect 남용의 문제React는 useEffect를 남용하게 쉽게 만들어뒀다는 생각이 들었다.일반적으로 잘 못 사용하는 패턴이다.react의 상태에 반응해서 실행시키고싶다.서로다른 내부 상태를 동기화 하고싶다.왜 잘 못 되었는지, 왜 사용하면 안 되는지 이해해보자.🙃 useEffect란?위 문제를 해결하기 위해서는 근본적으로 useEffect가 무엇인지 알아야한다.React useEffectuseEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다.공식 문서에 따르면 외부 시스템과 연동하는 용도라고 첫 줄에 나와있다.예를 들면소켓 연결DOM 제어전역 이벤트 리스너 등록/해제서드파티 라이브러리와 연동등이 있다.여기서 DOM 제어는 한 번 더 생각해야할 요소이다.가능하면 re..

🙃 Introclass CustomError extends Error { public code: string; constructor({ message, code }: { message: string; code: string }) { super(message); this.code = code; } } export default APIError;error.tsx 는 왜 Error를 상속한 CustomError을 받을 수 없는걸까?error.tsx 에다가 백엔드에서 정의한 code 값을 넘겨서, 그 값에 따라 정교하게 처리하고싶은데...에러 처리는 위임하여 역할을 분리하는게 좋다했는데...📜 error.tsx먼저, 공식문서를 통해 error.tsx에 대해 정확히 알아보..

🧐 Intro웹뷰에서 소셜로그인을 구현하는게 이렇게 어려울줄이야!웹뷰 환경에서 소셜로그인에 대한 레퍼런스도 적어서 힘들었다.🏞️ Environment개발 환경은 다음과 같다.web: next.jsapp: react-natvie, expoRN 앱에서 웹뷰 브라우저를 사용해 web을 띄운 애플리케이션이다.👿 문제개발 환경 문제기존 소셜로그인의 redirect_url은 localhost, 배포된 도메인을 등록해두었다.실제 모바일 기기에서는 localhost로 접속할 수 없고 내부 IP(192.0.140.1 등)로 접속해야한다.그러면 redirect_url missmatch 에러가 뜰 것이다. 내부 IP가 등록되어 있지 않으니까!개발자 개개인의 내부 IP를 등록하는 것은 말이 안된다.내부 IP는 자동으로 ..

😙 Intro우리 프로젝트에는 찜 기능이있다.찜하기 기능 수행 후, react-query의 queryClient.invalidateQueries를 사용해 페이지를 재요청하는 로직이 있다.찜 버튼 상태를 업데이트 하기 위해서이다.하지만, 백엔드에서, 겨우 찜하기 하나 한다고 페이지 전체를 재요청하는건 비효율적이고, 서버에 부하가 올 수 있다고 피드백을 받았다.😕 기존 로직의 문제점[ { id: 1, name: 사과, price: 5000, isWished: false // -> 찜하기 수행후 true 로 업데이트 예정 }, { id: 2, name: 사과, price: 5000, isWished: false ..

😗 Intro최근 Shadcn, NextUI, MUI 등등 UI 라이브러리를 많이 사용해 보고 있다.사용하다보니, 확실히 내가 직접 구현한 컴포넌트보다 사용성이 좋다고 느껴졌다.라이브러리들의 사용성과 비슷하게 구현해보고 싶었다.💻 라이브러리를 살펴보자Shadcn - Dropdown Open My Account Profile Billing Team Subscription DropdownDropdownMenuTriggerDropdownMenuLabelDropdwonMenuItem네 가지의 컴포넌트로 구성 되어 있다.NextUI - Dropdown Open Menu New file Copy link Edit file..