프론트엔드/React 썸네일형 리스트형 Toast 컴포넌트 구현하기 프로젝트: loplat UI키워드: Toast, class, setTimeout상황기존 loplat UI의 Toast 컴포넌트는 react-hot-toast 라는 라이브러리를 fork 한 후, 사내 디자인에 맞게 변형하여 사용하고 있었다.Toast 컴포넌트의 변경사항이나 버그가 있을 때 코드의 흐름을 이해하기 어려웠고, 필요한 기능에 비해 용량이 매우 컸다.(20Kb)직접 Toast를 구현하는 것이 유지보수, 용량, 성능 모든 면에서 더 좋을 것이다.해결 방법아래의 예시 코드와 같이 Toast 를 App에서 렌더링하고, toast 인스턴스를 통해 함수를 트리거하는 것으로 설계했다.'Toast' 컴포넌트와 'toast' 인스턴스를 연결하는 것이 구현의 핵심이다. ... toast.success('성공').. 더보기 리액트에서 달팽이 모양으로 움직이는 애니메이션 만들기 프로젝트: 채식 지도(가명) 키워드: snail array, transform translate, algorithm 상황 리액트에서 무한 영역 UI 만들기(feat. requestAnimationFrame, useRef) 에서 만들었던 피드백 페이지가 있다. 새로운 피드백을 작성했을 때, 포스트잇 하나가 추가되어야한다. 기존 포스트잇들이 달팽이 모양으로 움직여서 새로운 포스트잇을 위한 공간을 만든다면 재미있는 UI가 될 것이다. 해결 과정 먼저 한 변의 길이가 n인 달팽이 배열을 만드는 함수를 작성한다. 달팽이 배열 문제는 여러 가지 방법으로 풀 수 있을 것인데, 짧지만 어려운 방법 대신 길지만 직관적인 알고리즘으로 작성했다. '-1'로 초기화된 배열의 (0, 0)에서 시작하여, for문을 통해 dire.. 더보기 SVGR id collision issue 해결하기 프로젝트: loplat UI 키워드: svgr, svg, id collision, unique id, sed, regex 상황 loplat UI에서 svgr을 이용하여 Icon 컴포넌트를 만든다. 실제 프로젝트에서 Icon을 사용할 때, 하나의 아이콘을 2번 렌더링하면 이미지가 깨지는 현상을 발견했다. // 2번 렌더링 ... 원인이 무엇인지 고민해보니 svg 속성 중 id가 random값이 아닌 고정값인 것을 확인했다. __a, __b 가 suffix로 붙지만 'infocircle_outline_svg__a' 라는 id값 자체는 고정이라 컴포넌트를 2번 렌더링하면 id 충돌이 일어나는 것이다. loplat UI 코드를 통해 svgr 이 만들어주는 id는 static하는 것을 확인했다. // id 고.. 더보기 Firebase auth 정보를 redux로 관리하기 프로젝트: SNU FESTIVAL 키워드: firebase auth, oauth, redux, redux persist, session storage 상황 로그인 기능은 firebase auth 에서 제공하는 google login을 사용한다.(학교 메일과 Gmail이 연동돼있어 사용하기 쉽다.) 웹사이트 안에서 로그인 정보(email, name, firebase uid)를 이곳저곳에서 사용해야하므로 redux에 저장한다. 로그인을 할 때, 사용자 정보는 firebase auth instance와 redux에 동일하게 저장되어야한다. 로그아웃을 할 때, firebase auth instance와 redux에 저장되어있던 사용자 정보가 사라져야한다. 보안을 위해 브라우저 창을 닫을 때에도 사용자 정보를 제.. 더보기 useSetRecoilState로 렌더링 최적화하기 프로젝트: loplat X mobile 키워드: recoil, 렌더링 최적화 상황 loplat X mobile 은 CRA 에 기반하여 CSR 방식을 사용한다. 로그인이 필요한 '캠페인 목록 페이지'에서 로그아웃 버튼을 누르면, protected router HOC에 의해 자동으로 로그인 페이지로 이동한다. 로그아웃을 시키는 것 외에 side effects 가 발생하면 안되는 상황이지만, 로그인 페이지로 이동하기 전 캠페인 목록 페이지에서 '캠페인 목록 GET API'가 의도치않게 한 번 호출되는 버그가 있다며 팀원분이 도움을 요청하셨다. 해결과정 먼저 API를 어떤 코드에서 호출하는지 살펴보았다. const { ... data: ExampleData, ... } = useInfiniteQuery( ['c.. 더보기 이전 1 2 다음
