2. React Native CLI - Navigation

React Native CLI 앱에서의 네비게이션 설계기: "내멍냥봐" 프로젝트 중심이번 글에서는 React Native CLI 기반으로 개발 중인 반려동물 숏폼 SNS 앱 "내멍냥봐" 프로젝트에서 어떻게 네비게이션 구조를 설계하고 적용했는지 코드와 함께 소개하려 합니다.📌 네비게이션 종류React Native에서 대표적으로 사용할 수 있는 네비게이션 종류 중 '내멍냥봐'에서 사용한 네비게이션들은 다음과 같습니다:1. Stack Navigation가장 기본적인 네비게이션 방식으로, 화면이 쌓이고(pop) 빠지는(push) 구조입니다.iOS의 UINavigationController와 Android의 back stack과 비슷한 개념입니다.2. Bottom Tab Navigation하단에 탭 바를 만들어..

• format_list_bulleted React Native
• · 2025. 7. 13.

로그아웃 처리와 블랙리스트 도입, Redis Lock 기반 성능 개선기

🔹들어가며..이번 글에서는 로그아웃 기능을 구현하면서 겪었던 경험들을 공유하려 합니다.블랙리스트를 적용하며 기존 인증 로직에 기능을 추가해야 했고, 토큰 관리 방식에 대해 공부하고 실제로 적용해보았습니다.작성한 코드를 바탕으로 동시성 테스트를 진행했으며, Redis의 원자적 명령어인 SETNX를 활용해 중복 호출을 방지하는 분산 락 적용 방법도 다뤄보겠습니다! 🔹로그아웃 기능🔸Controller - 커스텀 어노테이션 분리@Operation(summary = "로그아웃 API", description = "로그아웃을 수행하고, 전달받은 AccessToken을 블랙리스트에 등록하여 해당 토큰의 재사용을 막습니다._숙희")@ApiResponses( ApiResponse(responseCode = ..

• format_list_bulleted spring
• · 2025. 7. 6.

[Kotlin Spring Boot] 소셜 로그인 API 동시성 테스트하기

들어가며동시성... 여러 명이 동시에 접근하는 것...동기적으로 작성한 소셜 로그인 API로 동시성 테스트를 해보며 트랜잭션의 비관적 락, 낙관적 락을 공부해보려고 합니다.지피티니의 도움을 많이 받은 글이고,, 엉성하지만공부하면서 작성하는 글이니 자유롭게 피드백해주세요!동시성 문제가 발생하는 부분을 어떻게 알 수 있을까?1. 공유 자원(Shared Resource) 확인하기동시성 문제의 대부분은 여러 스레드가 동시에 하나의 데이터를 수정하려고 할 때 발생합니다.대표적인 공유자원은 다음과 같습니다.전역 변수 또는 static 필드싱글톤 객체의 상태값DB의 특정 레코드캐시(Redis 등)의 키값파일, 세션, 큐 등2. 무상태(Stateless) vs 유상태(Stateful)서비스 또는 메서드가 무상태(sta..

• format_list_bulleted spring
• · 2025. 6. 29.

Spring WebFlux + Coroutine으로 구현한 비동기 영상 업로드 기능

🔸들어가며…기존의 Spring Boot 애플리케이션은 Spring MVC 기반으로 구성되어 있었고, 내장 톰캣(Tomcat) 서버를 사용하고 있었습니다.하지만 영상 업로드와 같은 대용량 데이터를 효율적으로 처리하기 위해서는 비동기 방식의 서버(Netty 기반 WebFlux)가 필요했고, Spring Boot에서는 WebMVC와 WebFlux를 동시에 사용하는 것이 어렵기 때문에, 각 서버를 분리하기 위해 멀티모듈 구조를 도입하게 되었습니다! 현재 저희 서비스의 멀티모듈 구조는 다음과 같습니다. 📁 domain : 핵심 도메인 로직(엔티티, 인터페이스 기반 repository)📁 application : Service 계층📁 application-bootstrap : Application 모듈을..

• format_list_bulleted spring
• · 2025. 6. 24.

1. React Native CLI로 앱 개발 시작하기 - 세팅편

React Native CLI로 iOS/Android 앱 개발을 시작하는 방법을 정리했습니다.처음 React Native CLI를 세팅하면서 필요했던 부분을 중심으로 작성했습니다.✅ 이 글은 React Native 공식문서 기준으로 작성되었습니다:👉 https://reactnative.dev/docs/set-up-your-environment📌 프로젝트 기본 구조 이해하기React Native CLI로 프로젝트를 생성하면 다음과 같은 기본 디렉토리 구조가 만들어집니다.프로젝트명/├── android/ # Android native 코드├── ios/ # iOS native 코드 (Mac에서만 빌드 가능)├── node_modules/ # 설치된 라이브러리..

• format_list_bulleted React Native
• · 2025. 6. 15.

영상 랜덤 조회 기능 구현기: Seed 기반 랜덤 + 캐시로 성능 개선하기

🔹들어가며….이번에는 구현한 기능은 인스타 릴스나 유튜브 쇼츠처럼 사용자별 랜덤으로 영상을 보여주는 기능입니다! 랜덤 정렬을 어떻게 효율적으로 처리할 것인지, 그리고 성능은 어떻게 유지할 것인지에 대한 고민이 필요했습니다.이번 포스팅에서는 이 고민들을 어떻게 해결했는지 랜덤 조회 방식부터 캐시를 활용한 성능 개선까지의 과정을 공유해보려 합니다일단 조건을 정리해봅시다.🔸조건한 페이지당 7개의 데이터 응답중복 없게 랜덤으로 조회해서 넘기기 🔸 어떤 방법이 있을까...처음 떠오른 방법은 ORDER BY RAND() 를 사용하는 방법이었습니다. SQL에서 ORDER BY RAND()를 쓰면 전체 데이터를 한 번 다 읽은 다음, 메모리에서 섞어서 필요한 만큼만 가져올 수 있습니다. 간단하고 편하긴 한데 문제..

• format_list_bulleted spring
• · 2025. 6. 4.