키보드가 TextInput을 가린다면? 로그인 페이지에서는 이메일, 비밀번호만 작성하면 돼서 키보드에 TextInput이 가릴일이 없었는데회원가입 페이지에서는 TextInput이 많다보니 키보드에 가려지는 현상이 발생했다. 검색을 해보니 React Native에서 keyboardAvoidingView 컴포넌트를 사용해 해당 문제를 해결해준다고 해서 적용을 해보았다. import { Keyboard } from 'react-native'; {children} 키보드가 TextInput을 가리는 이슈를 해결을 했지만 오히려 문제가 두개가 더 생겼다. ㅋㅋㅋㅋ 1. TextInput 외 영역 선택시 키보드가 내려 가야 하는데 내려가지 않음2. 키보드가 화면에 올라갔을때 화면 스크롤..

출시 모드로 APK 또는 Android App Bundle에 서명해야 합니다. - 해결 방법Google Play Console에서 내부 테스트 배포를 자동화 하려면 최초에 한 번은 수동 배포를 해야한다고 해서 빌드한 결과물을 업로드 했는데 위와 같은 오류가 발생했다.android/app/build.gradle 파일이 잘못된 빌드 설정을 했기 때문이라고 한다. 해결방법아래와 같이 수정하는 이유는 출시용 키로 서명을 합니다. 이는 Google Play Console에 업로드를 할 때 필요한 설정입니다. // 기존 코드buildTypes { debug { signingConfig signingConfigs.release } release { ..

@react-native-picker/picker 값 "?"로 나오는 오류 해결 import { SafeAreaView, View, Platform, StatusBar, Text } from 'react-native';import styled from 'styled-components/native';import { Picker } from '@react-native-picker/picker';export default function App() { return ( Hello ..

욕설(비속어) 필터링 기능 개선 (Aho-Corasick 알고리즘) 사이드 프로젝트를 만들었는데 뭔가 허전함을 느꼈다 문득 생각난게 게임처럼 비속어 필터링 기능을 넣으면 어떨까? 라는 생각이 문득 들었다. import { badWords } from "@/constants/badwords"; // 욕설 모음 zip...export default function badWordsFilter(text: string) { let filteredText = text; badWords.forEach((badWord) => { let index = filteredText.toLowerCase().indexOf(badWord.toLowerCase()); while (index !== -1) { ..

Next.js server action을 공부하면서 요소의 action속성은 기본 FormData(캡처된 데이터가 포함된 개체)를 자동으로 수신한다는 것을 알았다.그리고 이 FormData를 어떤식으로 사용하는지에 대해서 공부하면서 처음보는 Object.fromEntries()를 보게 되어 기록하고자한다. FormData를 사용하려면 기본적으로 아래와 같이 사용한다.'use server';// 데이터 추출하기export async function createInvoice(formData: FormData) { const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), statu..

Zod란 뭘까?TypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리 Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고 Zod 이 정적 TypeScript 유형을 자동으로 추론한다 - Zod - [공식문서] Intro | Zod zod.dev Zod의 장점의존성 없음Node.js 및 모든 최신 브라우저에서 작동작음: 8kb 압축 후 크기불변성 유지: 메서드 (예: .optional())는 새 인스턴스를 반환합니다.기능적 접근: 구문 검사, 유효성 검사하지 않음일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다. Zod 사용방법설치npm install zodyarn add zod tscon..

🚀 useRefuseRef는 React에서 저장공간이나 DOM요소에 접근하기 위해 사용되는 Hook이다. JavaScript에서 DOM에 접근하기 위해 사용한 querySelector 등의 함수와 같은 역할이다. Ref는 reference를 뜻한다. useRef를 사용하면 함수형 컴포넌트에서도 이전에 클래스형 컴포넌트에서만 가능했던 DOM 조작이나 값의 유지가 가능하다. 이 Hook은 함수 컴포넌트 내에서 변수를 선언하고, 해당 변수가 컴포넌트의 생명 주기 동안 유지되도록 한다. useRef 의 첫 번째 매개변수인 initialValue는 ref 객체의 current 프로퍼티의 초기값으로 사용된다. initialValue에는 모든 타입으로 지정가능하다. 초기값이 설정되면 해당 ref 객체의 curren..

🚀 시작 요즘들어 완성도 있는 좋은 프로젝트 코들를 읽는데 취미를 붙여서 읽던 중 프리패칭을 도와주는 핵심 기능인 prefetchQuery를 알아보려고 한다. 🧐 그전에 Tanstack Query로 데이터를 미리 채우는 방법에는 무엇이 있을까? ✅ prefetchQuery가장 핵심 기능인 prefetchQuery는 queryClient의 메서드로, 서버로 부터 받아온 데이터를 캐시에 추가한다. ✅ setQueryDatasetQueryData는 queryClient의 메서드로, prefetchQuery처럼 useQuery를 실행시키지 않고 쿼리 데이터를 캐시에 추가하는 또 다른 방법이다. 단, 클라이언트에서 데이터를 받아오는데, 이 데이터는 서버에서 mutation된 상태의 데이터일 것이다. ✅ pla..

[CS] 네트워크 공부 OSI 7계층 컴퓨터에서 네트워크를 사용해서 통신을 수행하는 과정을 7단계로 나눈 것 왜 나눴냐고? 고장났을 때 해당부분만 고치면되고, 문제가 생겼을 때 빠르게 판단을 할 수가 있기 때문에 기능별로 나눠서 구분 물리 계층- 실제 케이블, 커넥터 및 기타 하드웨어 구성 요소를 포함하여 네트워크를 통해 데이터의 물리적 전송을 처리하는 최하위 계층입니다. 데이터 링크 계층 - 이 계층은 직접 연결된 장치 간에 안정적인 데이터 전송을 담당하며 오류 감지 및 수정과 같은 기능을 포함합니다. 네트워크 계층 - 이 계층은 서로 다른 네트워크 간의 데이터 라우팅을 담당하고 주소 지정 및 라우팅 프로토콜을 사용하여 데이터 패킷이 올바른 목적지로 전달되도록 합니다. 전송 계층 - 이 계..