fullfish의 개발자 도전기

FlatList로 요소들을 나열할때 그냥 justifyContent: 'space-between'를 준다면 화면의 좌우끝은 안떨어져있지만 요소들이 서로 붙어있어서 margin을 주면 화면을 넘어가버린다 그래서 이쁘게 정렬하려면 화면 너비, margin값, numColumns를 가지고 계산해야한다 예시코드 index.toString() + 'memo'} numColumns={numColumns} scrollEnabled={false} renderItem={({item: memoData, index}) => { const isFirstColumn = index % numColumns === 0; const isLastColumn = (index + 1) % numColumns === 0; const widt..

1. 스타일 계산 함수 const greyPartItemStyle = ( isFirstColumn: boolean, isLastColumn: boolean, width: number, height: number, ) => ({ backgroundColor: '#282727', marginLeft: isFirstColumn ? 0 : marginLeftOrRight, marginRight: isLastColumn ? 0 : marginLeftOrRight, marginVertical: 5, width, height, borderRadius: 12, padding: 5, }); 2. 커스텀 훅 사용 const useDynamicStyle = (isFirstColumn, isLastColumn, width, ..

라이브러리 다운 react-native-sqlite-storage android/settions.gradle에 추가 include ':react-native-sqlite-storage' project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/platforms/android') android/app/build.gradle에 추가 implementation project(':react-native-sqlite-storage') app/src/main/java/{package}/MainApplication.java에 추가 그런데 공식..

앞서 구글 로그인이 되어있다는 가정하에 공식문서 https://github.com/RobinBobin/react-native-google-drive-api-wrapper/blob/master/src/README.md 예제 https://github.com/RobinBobin/gdrivetest/blob/master/src/Files.tsx 라이브러리 다운 npm i @robinbobin/react-native-google-drive-api-wrapper 설정해줘야함 const gdrive = new GDrive(); gdrive.accessToken = accessToken; 백업 예시 await gdrive.files .newMultipartUploader() .setData(JSON.stringify..

23.12.01자 내용 라이브러리 설치 npm i react-native-firebase/auth npm i react-native-firebase/app npm i react-native-google-signin/google-signin SHA-1 인증서 가져오기 android 폴더에서 ./gradlew signingReport Firebase 설정 프로젝트 생성 후 빌드 -> Authentication -> Sign-in method에서 구글 로그인 활성화 후 SHA-1키를 집어넣음 google-services.json을 다운받고 (SHA-1키를 집어넣으면 새로 받아야함) android > app에 집어넣음 구글 클라우드 콘솔 -> 대시보드 -> 사용자 인증 정보 -> 사용자 인증 정보 만들기 -> ..

app.json에 "plugins": [ [ "expo-build-properties", { "android": { "compileSdkVersion": 33, // 안드로이드 버전 13이상으로 맞춰줘야함 시스템버전 33이 안드로이드 13임 "targetSdkVersion": 33, "minSdkVersion": 33, "buildToolsVersion": "31.0.0" }, "ios": { "deploymentTarget": "13.0" } } ] ] 추가 해줘야함 scheme(패키지 네임과 같아야함)과 slug(expo이름과 같아야함)도 잊지 말고 추가 해줘야함 app.json 예시 { "expo": { "scheme": "koback-coach", "name": "코백 코치", "icon": "...

특정 페이지가 에뮬레이터에서는 잘 나오는데 실기기에서 안나올 때가 있다 여러 이유가 있겠지만 주로 ssl인증 문제인것 같다 node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebviewManager.java 해당 파일에서 onReceivedSslError 함수 부분의 handler.cancle() 부분을 handler.proceed() 로 변경하면 ssl을 무시할 수 있다 참고로 최신 react-native-webview 버전이 12버전인데 12버전에서는 RNCWebviewManager.java가 없어서 npm i react-native-webview@11로 다운그레이드 했다

team테이블의 정보를 받아올떄 team.id가 주어진다면 해당되는 team테이블의 row정보에다가 user.team_id 테이블이 배열인데 해당 배열에서 team.id가 일치하는 row중 해당 row들에서 type 칼럼의 데이터 string에 따라 count한 값을 처음 team table에 추가해줌 create or replace function get_team_with_user_type_count(team_id2 uuid) returns table ( team_id uuid, team_name text, team_image text, team_approval text[], player_count integer, coach_count integer ) language sql as $$ SELECT t..

.sort(({ properties: { name: a = 0 } } = {}, { properties: { name: b = 0 } } = {}) => (a.match(/\d+/) ?? [0])[0] - (b.match(/\d+/) ?? [0])[0]) .sort(({ properties: { name: a = '가' } } = {}, { properties: { name: b = '가' } } = {}) => (a.match(/[가-힣]/) ?? ['가'])[0] > (b.match(/[가-힣]/) ?? ['가'])[0] ? 1 : (a.match(/[가-힣]/) ?? ['가'])[0] < (b.match(/[가-힣]/) ?? ['가'])[0] ? -1 : 0 )

aa bb #c { display: flex; } #a, #b { width: 300px; height: 200px; border: 3px solid white; box-sizing: border-box; position: relative; } .selected-bottom-white::after { content: ''; position: absolute; bottom: -3px; left: 0px; width: 100%; height: 3px; background: white; } .selected-bottom-black::after { content: ''; position: absolute; bottom: -3px; left: -3px; width: calc(100% + 6px);; height:..