eatthefrog

개요MongoDB는 NoSQL 데이터베이스로, 유연한 JSON 형식의 문서(BSON)로 데이터를 저장하는 오픈소스 데이터베이스입니다. 관계형 데이터베이스의 테이블과 행 대신 컬렉션과 문서를 사용하여 데이터를 관리합니다. 확장성과 성능이 뛰어나 현대적인 애플리케이션 개발에 널리 사용됩니다. 스키마가 유연하여 애플리케이션 요구사항 변화에 빠르게 대응할 수 있고, 개발 속도가 향상됩니다. 수평적 확장(샤딩)이 용이하여 대용량 데이터와 높은 트래픽을 효과적으로 처리할 수 있습니다. 강력한 쿼리 언어와 집계 파이프라인을 제공하여 복잡한 데이터 분석 및 처리가 가능합니다. 1. A document database stores data in JSON-like documents(not in tables) which c..

스키마와 Resolver의 타입이 어긋나는 문제는 생각보다 자주 발생합니다. 특히 날짜, 통계 데이터, 복합 구조를 다룰 때 더 빈번합니다. 아래는 동일한 문제를 예방하기 위한 실전 전략들입니다.1. 스키마 설계 시 고려해야 할 기준1) 필드의 최종 형태(Serialized Form)를 먼저 정의하기GraphQL 스키마는 클라이언트가 받게 되는 최종 데이터 형태를 기준으로 설계해야 합니다.예를 들어 날짜 관련 데이터를 API 내부에서는 { year, month } 형태로 계산하더라도,클라이언트가 문자열 "2025-11"을 받는 것이 더 직관적이라면 스키마도 String!으로 정의해야 합니다.반대로 { year: number; month: number } 구조가 더 설명적이라면 스키마도 객체 타입으로 정의..

이번 문제는 GraphQL 스키마에 선언된 타입과 Resolver가 실제로 반환하는 값의 타입이 서로 다를 때 발생하는 전형적인 타입 불일치(Type Mismatch) 이슈였습니다.1. 스키마(Schema) 정의GraphQL SDL에서 특정 필드를 다음과 같이 선언했다고 가정해 보겠습니다.type ExampleType { date: String!}스키마의 의도는 명확합니다.date 필드는 반드시 문자열(String) 이여야 하며, null도 허용하지 않습니다.2. 문제의 원인: Resolver가 다른 타입을 반환문제는 Resolver에서 스키마와 다른 형태의 값을 반환할 때 발생합니다.예를 들어:// ❌ 문제를 일으킨 예시date: { year: 2025, month: 11 }스키마는 String을 기..

1. 왜 1000줄이 되었을까prop drilling 을 피하려다 보니, 모든 상태를 한 파일에 몰빵하게 되었고, 어느새 1000줄이 되어 버렸습니다.. 그 결과, 하나의 컴포넌트가 세상의 모든 책임을 떠안게 되었습니다.로딩 상태, 리스트 데이터, 모달 상태, 필터 값, 서버 응답, 클릭 이벤트, 스크롤 로직, API 호출, 토스트 메시지까지 — 전부 한 곳에.처음엔 “관리 일원화”로 안심했지만, 곧 문제는 터졌습니다.가독성 최악함수 간 의존성이 꼬이며 사이드 이펙트 발생특정 상태의 변경 지점을 추적하기 어려움결국 “prop drilling의 공포를 피하려다 상태 관리의 늪에 빠진 셈”이었습니다.2. 의사결정: 전역 상태 vs 커스텀 훅리팩토링의 핵심 질문은 명확했습니다.“이 상태는 어디서 관리되어야 하..

웹이나 앱을 개발하다 보면 "지금 당장은 결과를 알 수 없지만, 나중에 알 수 있는" 작업들이 많이 있습니다. 서버에서 데이터를 가져오거나, 파일을 읽거나, 사용자의 응답을 기다리는 것들이죠. 이런 작어을 처리하는 방법이 바로 비동기 프로그래밍입니다. 본문에서는 JS/TS에서 비동기 작업을 다루는 핵심 키워드 세 가지를 알아보겠습니다.핵심 개념1. async: " 이 함수는 나중에 결과를 줄게요!" 라고 선언2. Prmoise: 미래에 올 값을 담는 상자3. await: 상자가 열릴 때까지 기다렸다가, 안의 실제 값을 꺼냄 1. async 함수란?async는 함수 앞에 붙이는 키워드로, "이 함수는 비동기 작업을 할 거예요"라고 선언하는 것입니다.핵심 특징async 함수는 항상 Promise를 반환합니다..

개념Goggle의 무료 크로스 플랫폼 푸시 알림 서비스로, 서버에서 클라이언트 (ios,Andoriod, WEB)로 메시지를 안정적으로 전송할 수 있게 해준다. 구현 방법1. Firebase 프로젝트 설정- Firebase Console에서 새 프로젝트 생성- 앱 등록 및 구성 파일 다운로드 (google-services.json / GoogleService-Info.plist) 2. 클라이언트 앱 개발 - React Native 예시//패키지 설치npm install @react-native-firebas/app @react-native-firebase/messaging//패키지 사용하기import messaging from '@react-narive-firebase/messaging';//FCM 토큰..

?? (Nullish Coaslescling Operator)동작 방식 - 왼쪽 값이 null 또는 undefined 일때만 오른 쪽 값 반환 - 유효한 값 : 0, false, ''(빈 문자열), NaN0 ?? 9.7 // → 0 (0은 유효한 값)null ?? 9.7 // → 9.7undefined ?? 9.7 // → 9.7false ?? true // → false (false는 유효한 값)'' ?? 'default' // → '' (빈 문자열은 유효한 값) || (Logical OR Operator)동작 방식- 왼쪽 값이 falsy일 때 오른쪽 값 반환- Falsy 값: false, 0, -0, 0n, ''(빈 문자열), null, undefined, NaN0 || 9.7..

인덱스란?검색 속도를 빠르게 하기 위한 정렬된 목차 같은 것으로 참조와는 별개다. 실제 사용 시나리오// 개발자: 샘플 데이터 중에서 (여성, 30세, 멤버십 active) 리스트를 검색해줘db.smaple.find({ gender: "woman" age: 30 memebrship_status: "ACTIVE"})선택 옵션이 적은 순서로 배치하면 검색이 가장 효율적이다.!성별 -> 나이 -> memership_status성별은 2개나이는 100이하멤버십 상태는 제한적 (5개 이하) 개선된 복합 인덱스 : 성별 -> memebrship_status -> 나이 인덱스 사용 팁복합 인덱스의 경우, 쿼리 할 때 왼쪽 필드부터 순서대로 사용해야 효율적이다. 예를 들어 예를 들어 gender만 쿼리하거나 ..

React Native Permissions란?모바일 앱은 카메라, 사진첩, 위치, 알림 같은 민감한 기능에 접근할 때 반드시 사용자에게 권한을 요청해야 합니다. 그런데 플랫폼별로 권한 요청 방식이 다릅니다.플랫폼권한 요청 방식특징iOSInfo.plist에 이유 문구 표시 + 시스템 팝업 자동 실행“왜 필요해?” 라고 물어보는 걸 매우 중요하게 생각함AndroidAndroidManifest.xml 등록 + 실행 중 요청버전별로 권한 종류가 다르게 존재함 😵React Native는 기본적으로 이런 권한 관리에 대한 통합된 인터페이스를 제공하지 않습니다.그래서 직접 네이티브 코드를 다루기엔 부담스럽죠.여기서 등장하는 게react-native-permissions 입니다.이 라이브러리는:iOS & Andro..

1. 시작 — 콘솔로그 지옥을 탈출하자!React Native로 앱을 개발하다 보면, 웹처럼 Network 탭을 통해 API 요청과 응답을 쉽게 확인할 수 없습니다.GraphQL을 사용하는 제 프로젝트에서는 “요청이 잘갔는지?” “응답은 제대로 오는가?”를 매번 확인하기 위해, console.log()를 이곳저곳에 찍고, 문제 해결 후엔 다시 지우는 비효율적인 방법을 사용하고 있었습니다. 이건 디버깅보다는 단순 반복에 가까웠습니다.2. 원인 — React Native는 브라우저가 아니다가장 큰 이유는 단순합니다. React Native는 브라우저 환경이 아니기 때문이죠. 웹 개발에서는 Chrome DevTools의 Network 탭을 통해 API 요청을 쉽게 추적할 수 있지만, React Native는 ..