전체 글79 TIL : useCallback()은 내부적으로 useMemo()를 사용한다. useCallback은 메모이제이션 된 콜백을 반환한다. useMemo 메모이제이션된 값을 반환한다. 공식문서에 따르면 useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다. 라고 한다. 값대신 함수를 메모이제이션을 의도 한 것이니, useMemo 를 사용했나보다. export function useCallback( callback: T, deps: Array | void | null, ): T { return useMemo(() => callback, deps); } 추가로 useCallback과 useMemo 를 적절하게 사용하면 렌더링 최적화를 누릴 수 있지만, 무분별 하게 사용했을 때는 메모이제이션 용 메모리를 따로 할당해야 함으로 오히려 불필요한 리소스가.. 2022. 5. 18. React native - custom font 적용과 발생했던 문제를 기록 - IOS react native custom font 를 적용했던 과정과 발생했던 문제를 기록 합니다. 👉🏻 적용 방법 1. assets / fonts 에 폰트 추가 (assets 이라는 폴더를 만들면 된다) 2. 루트 경로에 react-native.config.js 생성 module.exports = { assets: ['./assets/fonts'] }; 3. react-native link 실행 react-native link 4. ios/[프로젝트이름]/Info.plist 에 폰트 추가 되었는지 확인 5. xcode project info 탭에서 font 추가되어 있는지 확인 🧐 재빌드 했는데, 에러 발생 찾고 찾다가 다른 알엔 개발자분들에게 여쭈어 보니 폰트 파일명과 폰트 패밀리는 다른 것이니 폰트 패밀.. 2022. 4. 24. React native - 앱 스킴 만들기 ios ios 만 다룹니다! AppDelegate 설정 ios / [프로젝트 이름] / AppDelegate.m ⭐️맨상단⭐️ 에 아래 코드를 추가한다. #import ⭐️**@end 이전**⭐️ 에 아래 코드를 추가한다. - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary *)options { return [RCTLinkingManager application:application openURL:url options:options]; } universal link를 사용하는 경우 아래 코드도 추가 합니다. 단, 유니버설 링크가 앱에서 작동하도록 하려면 서버에 연결된 도메인 도 설정해야 합니다.. 2022. 4. 18. React native - progress bar 만들기 🧩 아래 처럼 생긴 progress bar 를 만들어보자. progress bar 가 필요했는데, 여러 라이브러리를 살펴봤지만 맘에 드는게 없기도 했고, 이정도는 내가 개발할 수 있는 정도라 그냥 직접 만들었다. 실제로도 별거 없다. 📍준비물 react native react native animation - https://reactnative.dev/docs/animatedvalue#interpolate 🔨구현 해당 컴포넌트를 다양한 곳에서 사용할 수 있도록, step(count) 값은 외부에서 받도록 변경했다. 컨트롤할 ref 정의 하기 ref 와 같이 쓰는 이유는 값이 변경 되었을 때 렌더링 되지 않고 값을 유지시켜, 애니메이션이 되고 원래 위치로 돌아가는 것을 방지하는 데 사용한다. 즉, 리렌더링.. 2022. 4. 16. React native 로 스와이프 애니메이션 install yarn add react-native-swipe-gestures use react-native-swipe-gestures react-native animation event swipe 시에 텍스트 변경하게 하기 react-native-swipe-gestures 라이브러리를 이용하면, 손쉽게 스와이프 액션을 캐치할 수 있습니다. import React, { useState } from 'react' import { SafeAreaView, StyleSheet, Text } from 'react-native'; import GestureRecognizer from 'react-native-swipe-gestures'; function Intro() { // swipe 시에 바꿔줄 텍스트 모음.. 2022. 4. 11. serverless next.js 를 사용해보자! 그리고 자동화까지? 사이드 프로젝트로 앱을 만들면서, 어드민 페이지가 필요했었는데, 자연스럽게 어드민 페이지 배포를 위해 배포방법을 고민을 하게 되었다. 우리가 next 앱을 배포하기 위해서 다양한 방법을 고려해볼 수 있다. Netlify Vercel Github page EC2, Lambda, s3 등을 구축하여 배포 하거나 기타 aws 인프라를 직접 구축 serverless next.js component 이번에 선택한 것은 serverless next.js component package 를 사용해보기로 했다. 사실 s3 에 정적 웹 호스팅 하고 cdn 으로 cloudfront, 도메인 연결로 route53 이용해서 이미 어느정도 구축을 다 해놓은 상태이긴 했으나, serverless 를 써보고 싶기도 했고, gith.. 2022. 3. 23. 이전 1 2 3 4 ··· 14 다음
