본문 바로가기
반응형

분류 전체보기151

Flutter GraphQL Code generator with VSC 사용 패키지 - graphql_flutter - graphql_codegen https://pub.dev/packages/graphql_flutter https://pub.dev/packages/graphql_codegen#clients Server로 부터 Schema를 다운받습니다. package.json {YOUR_GRAPHQL_ENDPOINT} 를 실제 endpoint로 설정해줍니다. { "scripts": { "convert-schema": "node convert-schema.js", "download-schema": "apollo schema:download --endpoint={YOUR_GRAPHQL_ENDPOINT} schema.json", "update-schema": "npm run d.. 2024. 4. 13.
React Native Google Login with @react-native-google-signin/google-signin 개발 환경 Firebase 사용 안함 Expo 사용 안함 React Native 0.73 이상 @react-native-google-signin/google-signin 라이브러리 사용 https://react-native-google-signin.github.io/ Installing yarn add @react-native-google-signin/google-signin Google Cloud 설정 https://console.cloud.google.com/ Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 프로젝트 생성 API 선택 동의 화면 작성 필수 입력란 작성 범위 설정 남은 프로세스 입력 없이 진행 사용자 인증 정보 페이지 이동 O.. 2024. 3. 3.
무분별한 useMemo 사용 멈춰! 무분별한 최적화는 코드를 이해하기 어렵게 만듭니다. 코드 컨벤션으로 useMemo, useCallabck 사용을 지향하기도 하지만 memoization 비용도 고려해야합니다. useMemo의 목적 useMemo는 계산된 결과를 캐싱합니다. 컴포넌트가 re-render될 때 useMemo의 depency list가 바뀌지 않았다면 캐싱된 값을 그대로 사용합니다. 하지만, 오직 최적화를 위해서만 사용하지는 않습니다. React.memo, useCallback, debouncing, concurrent rendering 등과도 연관되어 있습니다. 어떤 경우에는 의도적으로 useMemo를 사용하는 것이 아닌 최적화가 되겠지라는 무작위성에 기대 모든 곳에 useMemo를 사용하기도 합니다. 이러한 무분별한 use.. 2023. 9. 19.
Debounce / Throttle을 알아보자 - feat. Lodash Browser Event는 짧은 시간안에 많이 발생될 수 있습니다. 브라우저에서 저희는 Drag and Drop, Draggable, Resize, Infinite Scroll과 같이 다양한 기능을 개발하기 위해 Event를 감지하는 Handler를 등록합니다. document.addEventListener('scroll', function Handler () { // 로직 }) 그렇다면 Handler 또한 짧은 시간안에 많이 호출될 수 있습니다. Handler는 서버와의 API 통신, 위치 계산 등 비교적 시간이 오래걸리는 작업을 포함할 수 있습니다. 이러한 로직이 짧은 시간 동안 많이 실행된다면 사용자는 불편함 UI/UX를 경험하게 될 것입니다. 결국, 성능상 이슈가 발생합니다. 최적화 방법 Brow.. 2023. 9. 18.

티스토리툴바