React

🚩 크로스 브라우징 어느 브라우저, 기기에서 사이트가 의도된 대로 동작하도록 제작하는 기법 모바일 Firefox에서 구글 로그인이 되지 않는 오류 발생 🚩 로그인 기존 구현 사항 Firebase Authentication을 이용해서 데스크탑에서 접속하면 구글 로그인이 popup 창으로 뜨고, 모바일 기기에서 접속하면 redirect 되도록 구현했었습니다. 데스크탑과 모바일 로그인 방식을 나눈 이유는 popup 방식으로 처리해도 모바일 기기에서 정상적으로 로그인이 되었습니다. 하지만 popup 차단 메시지가 발생하여 불편을 줄이기 위해 redirect 방식으로 변경했었습니다. // 모바일 판별 export default function isMobile() { return /Android|webOS|iPho..

이전 구현 사항 애니메이션 효과를 구현하기 위해 브라우저 가로 크기를 가지고 있는 screenWidth 상태와 form 영역의 높이를 가지고 있는 height 상태를 이용해 inline-style로 변화를 주었습니다. BottomSheet 컴포넌트는 screenWidth 내부 상태를 이용하기 때문에, resize 이벤트 발생 시 리렌더링 되고 있습니다. useRef 이용하여 개선하기 useRef는 .current 프로퍼티에 변경 가능한 값을 담을 수 있고, 이 프로퍼티가 변경되더라도 리렌더링을 발생시키지 않습니다. 그래서 screenWidth 값을 useState가 아닌 useRef를 이용했습니다. const screenWidthRef = useRef(window.innerWidth); useRef는 D..

참고 useMutation의 중복 로직 제거: https://east-star.tistory.com/43 컴포넌트 내부에 선언된 useQuery 기존에는 컴포넌트 내부에 useQuery가 선언되어 있어서 불편한 점이 있었습니다. 데이터 업데이트 후, invalidateQueries를 이용해 데이터 refresh 필요 분산되어 있는 queryKey, queryOption 확인을 위해 useQuery가 선언되어 있는 컴포넌트로 이동하여 확인 모임에 관련된 query들을 모아놓은 useClass 분산되어 있는 queryKey와 queryOption을 쉽게 관리할 수 있도록 useClass라는 커스텀 hook을 만들어서 문제를 해결했습니다. 그런데, 개발을 진행하다보니 useClass가 조금 거대해졌습니다. 그..

🧷 이전 포스트 [Bottom Sheet - 1] 잘못된 추상화 https://presentkey.tistory.com/11 🚩 최종 결과물 결과물 🚩 컴포넌트 구조 합성 컴포넌트를 사용해 화면 구현 이를 통해 컴포넌트 재사용성을 높이는 것에 대한 공부를 할 수 있었고, 이전 게시글의 문제점을 해결할 수 있었습니다. - 추상화가 잘못 되어 발생한 이해할 수 없는 컴포넌트 구조와 로직들 그리고 무수히 많은 props... - button 영역과 form 영역이 분리되어 있는점 - 입출금 form의 경우 input value를 공유하고 있는점 🚩 BottomSheet 컴포넌트 2~ 15번째 줄은 BottomSheet 애니메이션 및 브라우저 resize 이벤트에 관한 로직입니다. resize 이벤트에 thro..

🧷 다음 포스트 [Bottom Sheet - 2] 합성 컴포넌트: https://presentkey.tistory.com/12?category=1339335 🚩 기존 구현 사항 기존 UI 기존 BottomSheet 컴포넌트는 main 페이지에서만 사용했고, 버튼을 클릭하면 해당하는 Form이 렌더링되고 있었습니다. 🚩 변경사항 1. BottomSheet 컴포넌트의 재사용성 높이기 - 기존 detail 페이지의 입출금 Form을 BottomSheet 컴포넌트로 나타내기로 했습니다. 2. 이동 효과주기 - 버튼을 클릭하면 BottomSheet 영역이 올라오고 내려오는 효과를 주고싶었습니다. 🚩 첫 번째 구현 시도 합성 컴포넌트를 통해 구현을 했습니다. 영상의 겉모습을 보면 의도한 대로 구현 된 것 같지만 여..

참고 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/state-reducer https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 ✨ State Reducer Pattern 장점: reducer는 모든 내부 action들에 접근하여 오버라이드할 수 있습니다. 단점: reducer의 액션이 바뀔 수 있기 때문에,..

참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/props-getters https://simsimjae.medium.com/react-design-pattern-props-getter-pattern-5d3cf6f0b495 ✨ Props Getters Pattern 장점: props 오버로딩을 통해서 부모 -> 자식, 자식 -> 부모 양방향 커뮤니케이션이 가능해집니다. 단점: props를 재정의 하기위해선, 노출된 props과 내부 로직을 제대로 이해하고 있어야 합..

참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/custom-hooks https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 ✨ Custom Hook Pattern 장점: Custom Hook은 states, handlers를 노출하여 많은 제어 권한을 가질 수 있습니다. 단점: 로직과 UI가 분리되어 있..