전체글 89

개발을 하면서 항상 생각했던 문구

코딩을 처음 시작할 때 생활코딩 유튜브를 보고 기초를 다졌습니다. 그때 생활코딩님이 한 말이 있습니다. 모든 지식을 총동원하지 말자 복잡해지지 말자 최소한의 지식으로 현실의 문제를 해결하자 한계가 오면 개념들 간의 관계에 익숙해지고 활용하자 다시 한계가 오면 프로젝트를 잠깐 멈추고 다시 공부하자 시간이 지나 취업을 하고 실무에서 일을 할때도 항상 이 문구를 생각하며 개발하고있습니다.

개발일지 2022.02.12

문자열 앞/뒤에 원하는 문자 채우기 padStart, padEnd

오늘은 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..

Front-end/JS tip 2022.02.12

React Native 역무한스크롤 구현하기 (채팅)

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

React Native 좌표, 사이즈 구하기 (measure, measureInWindow , measureLayout)

개발을 하다 보면 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 무한스크롤 구현하기

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; // 원하는 로직을 시..

[Git] Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch

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

Others/Git 2022.02.05

Git 기본적인 명령어 간단 정리

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

Others/Git 2022.02.04

[Xcode] signing for requires a development team... / Failed to register bundle identifier

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를 고유한 문자열로 ..

React Native Navigation 스크린 이동

스크린 간 이동하는 방법과 데이터를 넘기는 방법을 다루겠습니다. 제 내비게이터 구조는 아래와 같습니다. 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안에 스크린 이름과 ..