Jiseong's FE Dev blog

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 게시판에 이와 관련된 흥미로운 주..

Intro로그인은 거의 모든 서비스에 들어간다.로그인은 아주 쉬워보이면서도 구현할 때 마다 어렵다고 느낀다.JWT 기반의 두 가지 자동로그인 방식의 비교, 예외 상황 처리, 최적화 등 여러가지 측면을 다뤄본다.특히 병렬요청의 상황, Socket 통신등 API 통신 외의 통신이 도입 되었을 때의 처리를 다룬다.자동로그인 방식 비교커뮤니티에서는 크게 두가지 방식이 언급되는 것 같다.Timer(setTimeout, setInterval) 기반의 로그인 연장 처리401 응답에 대해 retry 방식결론부터 말하면 내가 생각하는 best practice는 401 응답에 대해 retry 방식이다.Timer 방식의 자동로그인Timer 방식은 setTimeout, setInterval API를 사용하여 구현할 수 있다...

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

😀 Intro디자인 요구사항을 모두 만족하면서 구현하기가 생각보다 까다로웠다.3분이면 될줄 알았지만 며칠동안.. 구현했다.ㅠㅠ🎨 디자인 요구사항3줄이 넘어가면 말줄임 처리더보기 버튼이 오른쪽 아래에 위치요구사항도 정말 간단하다.😆 3줄 이상일 경우 말줄임 처리 {comment} 끝. ㅋㅋtailwind를 사용하기 때문에 line-clamp-3 클래스로 간단하게 구현가능하다.css를 자세히 들여다보면 아래와 같다..line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}🔍 3줄이 넘어가는지 어떻게 판단할까?3줄이 넘어가는 경우만 더..