Jiseong's FE Dev blog

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줄이 넘어가는 경우만 더..