Front-end

React Native 컴포넌트에서 children 스타일 덮어쓰는 방법

export const CustomButton: FC = ({ children, ...props }) => { const childStyle = {color: '#fff'}; const childrenWithProps = React.Children.map(children, (child) => { const childProps = { ...child.props, style: StyleSheet.flatten([childStyle, child.props.style]), }; if (React.isValidElement(child)) { return React.cloneElement(child, childProps); } return child; }); return ( {childrenWithProps} );..

[React] ApolloClient 캐시 비우는 간단한 방법

client.cache.evict({ id: "ROOT_QUERY", fieldName: "posts" })

[Strapi + React] ApolloClient로 초간단 pagination 구현하기

Strapi는 기본적으로 GraphQL을 지원한다. Strapi - Open source Node.js Headless CMS 🚀 Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device. strapi.io React의 ApolloClient를 활용하여 API를 연동하고 있었기 때문에, pagniation도 내장기능을 사용하려 했다. 찾아보니 offset과 limit를 활용한 `offsetLimitPagination`이라는 헬퍼가 있었고, 적용해봤는데 생각대로 잘 되지 않았다... www.a..

React Native 안드로이드 스크롤 끝 이펙트(edge effect) 설정

android/app/src/main/res/values/styles.xml 파일을 열고 AppTheme 태그안에 이 한줄을 추가해준다 (색상값은 원하는대로 설정) #1C76D6 최종적으로 아래와 같이 된다

React Native 파일 다운로드 구현 (rn-fetch-blob VS react-native-fs)

React Native에서 간단한 파일 다운로드를 구현할 일이 있어 패키지를 검색하던중 가장 star가 많은 두 패키지를 비교하였다. npm trend 비교 www.npmtrends.com/react-native-fs-vs-rn-fetch-blob react-native-fs (star 3.8k, 오래됨) import RNFS from 'react-native-fs'; const download = async (file: File) => { const downloadDest = `${RNFS.DocumentDirectoryPath}/${file.name}`; const {promise} = RNFS.downloadFile({ fromUrl: BACKEND_URL + file.url, toFile: dow..