코드로 대화하기

오늘은 padStart와 padEnd에 대해 알아보겠습니다. 날짜를 계산할 때 앞에 0을 붙여야 하거나, 일부 암호화를 해야할 때가 있습니다. 조건문이나 반복문으로 해결할 수도 있지만 오늘은 그 작업을 편리하게 해보겠습니다. String.prototype.padStart() MDN에 예제가 잘나와있어서 가져왔습니다. // 앞에 0 넣기 const str1 = '5'; console.log(str1.padStart(2, '0')); // -> "05" console.log(str1.padStart(2)); // -> " 5" // 앞에 * 넣기 const fullNumber = '2034399002125581'; const last4Digits = fullNumber.slice(-4); console.lo..

안녕하세요! 오늘은 저번 무한스크롤과 measure()에서 정리한 내용을 토대로 역무한스크롤을 구현해 보겠습니다. 역무한스크롤이란 아래에서 시작하여 위로 향하는 무한 스크롤을 의미합니다. 제가 지은 이름이라 정식 명칭은 다를 수도 있습니다. 이 기능은 주로 채팅에서 사용하였습니다. 이 기능의 핵심은 스크롤이 맨 끝에 갔을 때 콘텐츠의 사이즈가 늘어나도 스크롤 값을 기억하는 것입니다. 시작 // reverseInfinityScroll.js import React, { useRef, useState } from 'react'; import { ScrollView, View } from 'react-native'; const R_InfinityScroll = ({children, onScrollEnd}) =>..

개발을 하다 보면 x, y좌표나 콘텐츠의 사이즈를 구해야 할 때가 있습니다. 그럴 때는 measure, measureInWindow, measureLayout을 사용하시면 됩니다. 각 함수들의 정의부터 살펴본 후 코드와 이미지로 설명 이어가겠습니다. measure(callback) boxRef.current.measure((x, y, width, height, pageX, pageY)=> {}) 콜백 함수는 x, y, width, height, pageX, pageY를 인자로 받습니다. x, y -> 자신의 부모 기준으로 x, y 좌표를 가져옵니다. width, height -> 가로, 세로를 길이를 가져옵니다. pageX, pageY -> 화면상의 x , y 절대 좌표를 가져옵니다. measureInW..

React Native에서 무한스크롤을 구현해보겠습니다. const [isUpdateList, setIsUpdateList] = useState(true); const onScrollList = async (e) => { if(!isUpdateList){return} // 현재 스크롤 값 let updateScroll = e.nativeEvent.contentOffset.y; if(updateScroll == 0){return} // 현재 보여지는 화면 높이 let screenHeight = e.nativeEvent.layoutMeasurement.height; // 전체 문서의 높이 let documentHeight = e.nativeEvent.contentSize.height; // 원하는 로직을 시..

attempt to invoke interface method 'boolean com.swmansion... 안드로이드쪽에서 나는 오류입니다. 해결 android / app / build.gradle project.ext.react = [ enableHermes: true //

Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch. git merge를 하다가 에러가 발생하였습니다. 왜 merge를 할 건지 commit 메시지를 남기라고 합니다. i를 누른다. (입력 모드로 넘어갑니다.) merge에 대한 메시지를 입력한다. esc를 누른다. :wq를 입력. (esc와 :를 누르면 마지막행 모드가 됩니다. "wq는 저장 후 종료한다"라는 뜻입니다.) enter를 누른다. 참고 : https://stackoverflow.com/questions/19085807/please-enter-a-commit..

Stage 올리기 // 개별 git add // 전부 git add * Commit // 메시지와 함께 커밋 git commit -m "" // add와 메시지를 동시에 커밋 git commit -am "" Push git push Branch // 브랜치 확인 git branch // 원격 브랜치 확인 git branch -r // 모든 브랜치 확인 git branch -a // 새로운 브랜치 생성 git branch // 브랜치 변경 git checkout Merge // 병합할 브랜치에서 해야 한다. git merge Log & Status // 깃 로그 확인 git log // 깃 상태 확인 git status

React Native로 만든 앱을 실제 핸드폰에 빌드하고싶어 xcode에서 빌드를 하였는데 에러가 났습니다. "signing for requires a development team. Select a development team in the Signing & Capabilities editor." 개발자의 서명이 필요해서 나는 오류입니다. 해결 1. Xcode -> Preferences 접근 2. Accounts - Apple ID 등록 3. Signing & Capabilities 에서 Team 선택 이러면 해결됩니다! 하지만 저는 오류가 하나 더 있었습니다... Failed to register bunle identifier General에 있는 Bundle Identifier를 고유한 문자열로 ..

스크린 간 이동하는 방법과 데이터를 넘기는 방법을 다루겠습니다. 제 내비게이터 구조는 아래와 같습니다. Stack navigator Intro Tab navigator Home List Chat MyPage Intro -> Tab 같은 depths에 있는 intro에서 tab으로 이동하는 방법입니다. // intro.js import { useNavigation } from '@react-navigation/native'; ... const navigation = useNavigation(); // 함수 호출 시 탭으로 이동 const onPressMoveTab = () => { navigation.navigate( "Tab", {userName:"sjh"}, ); } navigate안에 스크린 이름과 ..

안녕하세요! React Native Navigation 사용법을 알아보겠습니다. 보통 React에서는 페이지 이동 시 href 혹은 router로 제어하지만 RN에서는 navigation으로 제어합니다. 설치 npm install @react-navigation/stack @react-navigation/bottom-tabs 설치 후 오류가 난다면 아래 주소를 참고해주세요. https://talkwithcode.tistory.com/category/React%20Native%20Error 'React Native Error' 카테고리의 글 목록 talkwithcode.tistory.com 구조 잡기 저는 주로 Stack Navigator와 Bottom Tab Navigator를 혼합하여 사용하고 있습니다..