맞왜틀

🎭 투두 앱에 Playwright E2E 테스트 추가하기📌 작업 개요레트로 스타일의 투두 앱에 Playwright를 활용한 E2E(End-to-End) 테스트를 추가했습니다. 접근성(Accessibility)과 테스트 가능성을 함께 개선했습니다.🎯 주요 작업 내용2. 접근성(Accessibility) 개선스크린 리더 사용자와 E2E 테스트를 위해 aria-label 속성을 추가했습니다.// TodoInput.tsx ADD// TodoItem.tsx onToggleTodo(todo.id)} aria-label={todo.completed ? '할 일 완료 취소' : '할 일 완료'}> {todo.completed ? '✓' : ''} onRemoveTodo(todo.id)} aria-label..

🔄 React Native와 WebView 양방향 네비게이션 완벽 가이드React Native 앱 안에서 웹 콘텐츠를 보여주고, 서로 자유롭게 화면을 이동하는 방법을 알아봅니다. Expo Router와 Next.js를 사용한 실전 예제로, Native ↔ WebView 간의 완벽한 네비게이션을 구현해보겠습니다.📋 목차 왜 WebView 네비게이션이 필요한가? 전체 아키텍처 Native → WebView 이동 WebView → WebView 이동 WebView → Native 이동 실전 팁 & 주의사항1. 왜 WebView 네비게이션이 필요한가?💡 실무 시나리오 하이브리드 앱: Native 기능 + 웹 콘텐츠 혼합 빠른 업데이트: 앱 배포 없이 웹 페이지만 ..

📱 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는 두 부분으로 나뉘어요: ..