전체 글

React Native 이미지/동영상 갤러리(스와이프) 구현 삽질기

RN에서 핀치 줌(pinch zoom)이 지원되는 이미지/동영상 갤러리(스와이프)를 구현할일이 생겨 라이브러리를 서칭해보았다. 1. ascoders/react-native-image-viewer (star 2.1k) ascoders/react-native-image-viewer 🚀 tiny & fast lib for react native image viewer pan and zoom - ascoders/react-native-image-viewer github.com 이 라이브러리가 가장 많은 star를 보유하고 있었고, zoom과 swipe이벤트간 간섭에 대해 훌륭하게 처리해주고 있었다. 보통 스와이프 기능에는 FlatList를 쓰는데, 이 라이브러리는 transform으로 처리하였다. renderH..

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..

컴퓨터교실 원격제어 & 모니터링 - Veyon 4.3 설치하기(구 Italc)

Veyon은 리눅스와 윈도우를 지원하는 무료 컴퓨터 모니터링 & 원격제어 도구이다. (Mac은 아직 미지원) 홈페이지 : https://veyon.io/ Veyon은 Italc이라는 오픈소스 프로젝트를 기반으로 만들어진 업그레이드 버전이라서 Veyon역시 오픈소스로 운영되고 있어 누구나 무료로 사용할 수 있다. Veyon 4.3버전부터 설치과정에 약간의 변화가 있어 설치방법을 적어두려 한다. 설치는 공통, 관리자용, 학생용으로 나누어 설명할것이다. 설치방법(공통) 1. https://veyon.io/ 에 접속하여 Download 버튼 클릭 2. 각자 운영체제에 맞는 버전으로 다운로드 (내 컴퓨터가 32비트인지 64비트인지 모르겠다면 아래 링크 참조) 내 컴퓨터가 32비트인지 64비트인지 확인하는 방법 (..

내 컴퓨터 주소 또는 IP 확인하는 방법

내 컴퓨터 주소 (네트워크 이름) 찾기 1. 윈도우 하단의 검색버튼을 눌러 검색창을 연다음 '시스템' 이라고 입력한다. 2. 나오는 결과중 'PC 정보'라는 항목을 선택한다 3. 열리는 화면에서 '디바이스 이름'이 내 컴퓨터의 네트워크 주소이다. PS. 참고로 공유폴더에 접근하려면 윈도우 탐색기(폴더창)를 열고 주소창에 \\DESKTOP-XXXX 이런식으로 입력해주면 된다. 내 컴퓨터 IP 찾기 1. 윈도우 검색창에 cmd 라고 입력한뒤, 검색된 '명령 프롬프트'를 클릭 2. 열리는 창에서 ipconfig를 입력하고 엔터를 친다. 나오는 결과중 무선LAN 또는 이더넷(유선)중 자신의 연결에 맞게 확인하면 된다. 끗