맞왜틀

📱 Expo Router로 Stack Navigation 마스터하기React Native와 Expo로 모바일 앱을 개발하면서 Stack Navigation을 구현해봤습니다. 특히 Expo Router의 파일 기반 라우팅과 네비게이션 메서드들(push, replace, back)의 차이를 실습하며 많은 것을 배웠는데요, 그 경험을 공유합니다! 🚀🎯 목표 Expo Router로 Stack Navigator 구현하기 목록 → 상세 → 편집 3단계 화면 구조 만들기 push, replace, back 차이 이해하기 크로스 탭 네비게이션 구현하기📂 파일 구조Expo Router는 파일 시스템 기반 라우팅을 사용합니다. _layout.tsx 파일로 네비게이터를 정의하고, 폴더 구조가 곧..

쿠키 기반 인증 vs JWT, 그리고 CSRF까지 완벽 정리요즘 프론트엔드 개발을 하다 보면, JWT 인증과 쿠키 기반 인증을 모두 접하게 됩니다. 처음에는 “JWT는 토큰이라서 안전하고, 세션은 옛날 방식 아닌가?” 하는 오해가 생기기 쉬운데요. 이번 글에서는 두 방식의 차이부터, 실제 서비스에서 고려해야 하는 보안 이슈(CSRF, HttpOnly, SameSite)까지 정리해보려 합니다.1. 쿠키, 세션, JWT 기본 개념1-1. 세션 기반 인증서버가 로그인 요청을 받으면, 해당 유저 정보를 세션 저장소(메모리, Redis 등)에 저장하고 세션 ID를 브라우저 쿠키로 내려줍니다.Set-Cookie: sessionId=abc123; HttpOnly; Secure;이후 요청마다 브라우저는 자동으로 ..

🚀 Expo Router 업데이트 Bottom Tab Navigation 구현 완료! 2025-10-26 | React Native + Expo + Nx 📱 개요 Expo Router를 사용하여 파일 시스템 기반 라우팅과 Bottom Tab Navigation을 구현했습니다. 전통적인 React Native 구조에서 Next.js 스타일의 라우팅으로 마이그레이션하며, ..

📌 이 글의 목표: React Native 앱에 WebView를 추가해서 웹앱을 모바일 앱 안에서 띄워보겠습니다. 삽질 포함! 🎯 왜 WebView가 필요할까? Next.js로 웹 앱을 만들었는데, 이걸 모바일 앱에서도 보여주고 싶었어요. 완전히 새로 네이티브 UI를 만들 수도 있지만, 일단 웹을 앱 안에 넣어보자! 📦 1. react-native-webview 설치 JavaScript 패키지 설치 cd apps/mobilenpm install react-native-webview ✅ 설치 완료! 2개 패키지 추가됨 🍎 2. iOS 네이티브 설정 (CocoaPods) React Native는 두 부분으로 나뉘어요: ..

Nx 모노레포에 Expo React Native 앱 추가하고 Xcode에서 실행하기 📱 개요: Next.js 웹 앱이 있는 Nx 모노레포에 Expo를 사용한 React Native 모바일 앱을 추가하고, Xcode에서 네이티브로 실행하는 전체 과정을 정리했습니다. 1. 프로젝트 초기 상태 🏁 시작 시점의 프로젝트 구조: naemamdaero/ ├── apps/ │ ├── web/ # Next.js 15 + Emotion │ └── web-e2e/ # Playwright E2E 테스트 ├── package.json ├── nx.json └── tsconfig.base.json 2. Expo 플러그인..

Next.js 15 App Router에서 Emotion 사용 시 createContext 에러 해결하기문제 상황Next.js 15 App Router 환경에서 @emotion/styled를 사용하여 개발 서버를 실행했더니 다음과 같은 에러가 발생했습니다.⨯ TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-componentat eval (webpack-internal:///(rsc)/../../node_modules/@emot..