맞왜틀

Playwright E2E 테스트 추가하기

deo2kim — Sun, 9 Nov 2025 00:51:54 +0900

투두 앱에 Playwright E2E 테스트 추가하기

작업 개요

레트로 스타일의 투두 앱에 Playwright를 활용한 E2E(End-to-End) 테스트를 추가했습니다. 접근성(Accessibility)과 테스트 가능성을 함께 개선했습니다.

주요 작업 내용

2. 접근성(Accessibility) 개선

스크린 리더 사용자와 E2E 테스트를 위해 aria-label 속성을 추가했습니다.

// TodoInput.tsx
<Input
  placeholder="오늘 할 일을 입력하세요..."
  aria-label="할 일 입력"
/>

<Button onClick={handleSubmit} aria-label="할 일 추가">
  ADD
</Button>

// TodoItem.tsx
<Checkbox
  onClick={() => onToggleTodo(todo.id)}
  aria-label={todo.completed ? '할 일 완료 취소' : '할 일 완료'}
>
  {todo.completed ? '✓' : ''}
</Checkbox>

<Button
  onClick={() => onRemoveTodo(todo.id)}
  aria-label={`${todo.title} 삭제`}
>
  DEL
</Button>

  핵심 포인트:

삭제 버튼의 aria-label에 투두 제목을 포함시켜 "아침 운동하기 삭제"처럼 
어떤 항목을 삭제하는지 명확하게 표현했습니다. 이는 접근성뿐만 아니라 
테스트에서 특정 항목을 정확히 선택할 수 있게 해줍니다.

3. Playwright E2E 테스트 작성

총 17개의 테스트 케이스를 작성했습니다.

테스트 카테고리

카테고리	테스트 수	주요 테스트
초기 화면	4개	제목, 빈 상태, 입력창, 통계 표시
투두 추가	5개	버튼 클릭, Enter 키, 입력창 초기화, 여러 개 추가, 빈 문자열 검증
투두 완료	3개	완료 처리, 완료 취소, 일부만 완료
투두 삭제	3개	삭제, 특정 항목만 삭제, 완료된 항목 삭제
통계	3개	추가/완료/삭제 시 통계 업데이트
통합 시나리오	1개	추가 → 완료 → 삭제 전체 플로우

테스트 코드 구조

test.describe('Todo App', () => {
  // 헬퍼 함수로 중복 제거
  const getTodoInput = (page: Page) =>
    page.getByRole('textbox', { name: '할 일 입력' });

  const addTodo = async (page: Page, todoText: string) => {
    const input = getTodoInput(page);
    await input.fill(todoText);
    await page.getByRole('button', { name: '할 일 추가' }).click();
  };

  test.beforeEach(async ({ page }) => {
    await page.goto('/todos');
  });

  // 테스트는 카테고리별로 그룹화
  test.describe('초기 화면', () => { ... });
  test.describe('투두 추가', () => { ... });
  test.describe('투두 완료', () => { ... });
  test.describe('투두 삭제', () => { ... });
  test.describe('통계', () => { ... });
  test.describe('통합 시나리오', () => { ... });
});

테스트 작성 시 학습한 Best Practices

✅ 헬퍼 함수 활용
중복되는 "투두 추가" 로직을 addTodo() 헬퍼 함수로 분리했습니다. 단, 헬퍼 함수에는 검증(assertion)을 넣지 않고 각 테스트에서 명시적으로 검증합니다.

✅ 접근성 기반 선택자 사용
getByRole(), getByLabel() 같은 접근성 기반 선택자를 우선 사용했습니다. CSS 선택자보다 더 의미론적이고 리팩토링에 강합니다.

✅ 명확한 aria-label
모든 버튼에 고유한 aria-label을 부여해서 테스트에서 정확한 요소를 선택할 수 있게 했습니다. 예: "아침 운동하기 삭제"

4. Playwright 타임아웃 최적화

빠른 피드백을 위해 타임아웃을 대폭 단축했습니다.

// playwright.config.ts
export default defineConfig({
  timeout: 10000,              // 전체 테스트: 10초 (기본 30초)
  use: {
    actionTimeout: 3000,       // 클릭, fill 등: 3초
    navigationTimeout: 5000,   // 페이지 이동: 5초
  },
  expect: {
    timeout: 3000,             // assertion: 3초
  },
});

⚡ 효과: 테스트 실패 시 30초 대기 → 3초 만에 빠르게 실패하여 개발 속도가 10배 향상되었습니다.

커밋 내역

2293f49 config: Playwright 타임아웃 3초로 최적화

5e120b1 test: 투두 앱 Playwright e2e 테스트 추가

96fdeca feat: 투두 컴포넌트에 aria-label 접근성 속성 추가

b08ac20 refactor: 투두 앱 포켓몬 테마 제거 및 일반 텍스트로 변경

배운 점

1. Playwright 선택자 전략

getByRole('button', { name: '할 일 추가' }) - 접근성 기반, 가장 권장
getByLabel('할 일 입력') - label 요소와 연결된 input 선택
getByPlaceholder('...') - placeholder로 선택 (보조적으로 사용)
getByText('아침 운동하기') - 텍스트로 선택 (간단할 때 유용)

2. 테스트 구조화

헬퍼 함수: Setup 용도로만 사용 (assertion 없이)
테스트: 명시적인 검증 포함 필수
그룹화: test.describe()로 카테고리별 정리

3. 접근성과 테스트의 시너지

접근성을 위해 추가한 aria-label이 테스트 작성을 훨씬 쉽게 만듦
고유한 레이블은 스크린 리더와 자동화 테스트 모두에게 유용
좋은 접근성 = 좋은 테스트 가능성

다음 단계

CI/CD 통합
GitHub Actions에 Playwright 테스트를 추가하여 PR 생성 시 자동으로 테스트가 실행되도록 설정할 예정입니다.

// .github/workflows/ci.yml (예정)
jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx nx e2e web-e2e

테스트 실행 방법

# 전체 테스트 실행
npx nx e2e web-e2e

# UI 모드로 실행 (디버깅)
npx nx e2e web-e2e --ui

# 특정 브라우저만 실행
npx nx e2e web-e2e --project=chromium

결론

처음 Playwright를 도입하면서 E2E 테스트 작성 방법과 접근성의 중요성을 함께 배울 수 있었습니다. 특히 aria-label을 제대로 활용하면 접근성과 테스트 가능성을 동시에 향상시킬 수 있다는 점이 가장 큰 수확이었습니다.

타임아웃을 3초로 줄여서 테스트 실패 시 빠르게 피드백을 받을 수 있게 된 것도 개발 경험을 크게 개선시켰습니다. 앞으로는 CI/CD에 통합해서 더욱 안정적인 개발 프로세스를 구축할 예정입니다.

React Native + Next.js WebView: 네이티브와 웹을 자유롭게 오가는 법

deo2kim — Sun, 2 Nov 2025 18:12:22 +0900

React Native와 WebView 양방향 네비게이션 완벽 가이드

React Native 앱 안에서 웹 콘텐츠를 보여주고, 서로 자유롭게 화면을 이동하는 방법을 알아봅니다. Expo Router와 Next.js를 사용한 실전 예제로, Native ↔ WebView 간의 완벽한 네비게이션을 구현해보겠습니다.

1. 왜 WebView 네비게이션이 필요한가?

실무 시나리오

하이브리드 앱: Native 기능 + 웹 콘텐츠 혼합
빠른 업데이트: 앱 배포 없이 웹 페이지만 수정
웹 재사용: 기존 웹사이트를 앱에 통합
A/B 테스트: 웹에서 빠르게 실험 후 Native 이식

구현할 3가지 네비게이션

1. Native → WebView   (URL 파라미터)
2. WebView → WebView  (일반 Link)
3. WebView → Native   (postMessage)

2. 전체 아키텍처

프로젝트 구조

naemamdaero/
├── apps/
│   ├── mobile/              # React Native (Expo)
│   │   └── app/
│   │       ├── (tabs)/
│   │       │   ├── index.tsx      # 홈 (Native)
│   │       │   ├── webview.tsx    # WebView 화면
│   │       │   └── todo/
│   │       │       └── detail.tsx # Todo 상세 (Native)
│   │
│   └── web/                 # Next.js (웹)
│       └── src/app/
│           ├── page.tsx           # 웹 홈
│           └── todos/
│               └── page.tsx       # Todo 목록 (WebView)

데이터 흐름

[Native 홈]
    ↓ router.push('/webview?url=/todos')
[WebView 화면] → http://localhost:3000/todos
    ↓ 
[WebView Todo 목록]
    ↓ window.ReactNativeWebView.postMessage()
[Native Todo 상세]

3. Native → WebView 이동

목표

Native 홈 화면에서 버튼을 누르면 WebView의 특정 페이지로 이동

Step 1: Native 화면에서 WebView로 이동

apps/mobile/app/(tabs)/index.tsx

import { useRouter } from 'expo-router';

export default function HomeScreen() {
  const router = useRouter();

  return (
    <TouchableOpacity
      onPress={() => {
        //   WebView 탭으로 이동 + URL 파라미터 전달
        router.push('/webview?url=/todos');
      }}
    >
      <Text>WebView에서 Todo 보기</Text>
    </TouchableOpacity>
  );
}

Step 2: WebView 화면에서 URL 파라미터 받기

apps/mobile/app/(tabs)/webview.tsx

import { useLocalSearchParams } from 'expo-router';
import WebView from 'react-native-webview';

export default function WebViewScreen() {
  const params = useLocalSearchParams();
  
  //   URL 파라미터에서 경로 추출
  const targetPath = (params.url as string) || '/';
  const webviewUrl = `http://localhost:3000${targetPath}`;

  return (
    <WebView
      source={{ uri: webviewUrl }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

✅ 결과

router.push('/webview?url=/todos') → WebView가 localhost:3000/todos 로드
router.push('/webview?url=/about') → localhost:3000/about

4. WebView → WebView 이동

목표

WebView 내부에서 일반 웹 페이지처럼 자유롭게 이동

Step 1: 웹 홈 페이지

apps/web/src/app/page.tsx

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>내맘대로 웹 앱</h1>
      
      {/*   일반 Link로 페이지 이동 */}
      <Link href="/todos">
        <button>  Todo 목록</button>
      </Link>
    </div>
  );
}

Step 2: Todo 목록 페이지

apps/web/src/app/todos/page.tsx

'use client';

import { useState, useEffect } from 'react';

export default function TodosPage() {
  const [isNativeApp, setIsNativeApp] = useState(false);

  //   Native 환경인지 확인
  useEffect(() => {
    setIsNativeApp(!!window.ReactNativeWebView);
  }, []);

  return (
    <div>
      <h1>  Todo 목록</h1>
      <p>{isNativeApp ? 'Native 앱' : '일반 브라우저'} 환경</p>
    </div>
  );
}

✅ 결과

일반 웹처럼 <Link>로 페이지 이동
WebView 안에서 자유롭게 네비게이션

5. WebView → Native 이동 (핵심!)

목표

WebView의 Todo를 클릭하면 Native의 상세 화면으로 이동

Step 1: WebView에서 postMessage 전송

apps/web/src/app/todos/page.tsx

'use client';

import { useState, useEffect } from 'react';

const TODOS = [
  { id: '1', title: 'Expo Router 학습하기', completed: true },
  { id: '2', title: 'WebView 통신 구현', completed: false },
];

export default function TodosPage() {
  const [isNativeApp, setIsNativeApp] = useState(false);

  useEffect(() => {
    setIsNativeApp(!!window.ReactNativeWebView);
  }, []);

  const handleTodoClick = (todoId: string) => {
    if (isNativeApp && window.ReactNativeWebView) {
      //   Native로 메시지 전송
      window.ReactNativeWebView.postMessage(
        JSON.stringify({
          type: 'NAVIGATE',
          screen: 'todo/detail',
          params: { id: todoId },
        })
      );
      console.log('  [WebView] Native로 메시지 전송:', { todoId });
    } else {
      //   일반 브라우저
      alert(`Todo 상세: ${todoId}`);
    }
  };

  return (
    <div>
      <h1>  Todo 목록</h1>
      {TODOS.map((todo) => (
        <div
          key={todo.id}
          onClick={() => handleTodoClick(todo.id)}
          style={{ cursor: 'pointer' }}
        >
          {todo.completed ? '✅' : '⏳'} {todo.title}
        </div>
      ))}
    </div>
  );
}

//   TypeScript 타입 선언
declare global {
  interface Window {
    ReactNativeWebView?: {
      postMessage: (message: string) => void;
    };
  }
}

Step 2: Native에서 메시지 수신

apps/mobile/app/(tabs)/webview.tsx

import { useRouter } from 'expo-router';
import WebView, { WebViewMessageEvent } from 'react-native-webview';

export default function WebViewScreen() {
  const router = useRouter();

  //   WebView → Native 메시지 핸들러
  const handleWebViewMessage = (event: WebViewMessageEvent) => {
    try {
      const message = JSON.parse(event.nativeEvent.data);
      console.log('  [Native] WebView로부터 메시지 수신:', message);

      if (message.type === 'NAVIGATE') {
        //   Native 화면으로 이동
        const { screen, params } = message;
        const queryString = params
          ? `?${new URLSearchParams(params).toString()}`
          : '';

        router.push(`/${screen}${queryString}`);
        console.log(`✅ [Native] 화면 이동: /${screen}${queryString}`);
      }
    } catch (error) {
      console.error('❌ [Native] 메시지 파싱 에러:', error);
    }
  };

  return (
    <WebView
      source={{ uri: 'http://localhost:3000/todos' }}
      onMessage={handleWebViewMessage}  {/*   핵심! */}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

✅ 전체 흐름

1. 사용자가 WebView에서 Todo 클릭
2. handleTodoClick() 실행
3. window.ReactNativeWebView.postMessage() 호출
4. Native의 onMessage 이벤트 발생
5. handleWebViewMessage() 실행
6. router.push('/todo/detail?id=1') 실행
7. Native Todo 상세 화면으로 이동 ✅

6. 실전 팁 & 주의사항

⚠️ 하이드레이션 에러 해결

문제

// ❌ 잘못된 코드 (하이드레이션 에러!)
const [isNativeApp, setIsNativeApp] = useState(
  !!window.ReactNativeWebView  // 서버/클라이언트 불일치!
);

해결

// ✅ 올바른 코드
const [isNativeApp, setIsNativeApp] = useState(false);

useEffect(() => {
  setIsNativeApp(!!window.ReactNativeWebView);
}, []);

디버깅 방법

WebView 콘솔 로그 보기 (iOS)

// Safari → 개발자용 → 시뮬레이터 → localhost
console.log('WebView에서 실행 중!');

Native 콘솔 로그 보기

// Expo 터미널에서 확인
console.log('[Native] 메시지 수신:', message);

실전 팁

1. 메시지 타입 정의

// 메시지 타입 명확히 정의
type WebViewMessage =
  | { type: 'NAVIGATE'; screen: string; params?: Record<string, string> }
  | { type: 'SHARE'; data: string }
  | { type: 'CLOSE_WEBVIEW' };

2. 에러 핸들링

const handleWebViewMessage = (event: WebViewMessageEvent) => {
  try {
    const message = JSON.parse(event.nativeEvent.data);
    // ... 처리
  } catch (error) {
    console.error('메시지 파싱 실패:', error);
    // Sentry 등으로 에러 리포팅
  }
};

3. 로딩 상태 관리

<WebView
  onLoadStart={() => setLoading(true)}
  onLoadEnd={() => setLoading(false)}
  onError={(e) => setError(e.nativeEvent.description)}
/>

성능 최적화

1. WebView 캐싱

<WebView
  cacheEnabled={true}
  cacheMode="LOAD_CACHE_ELSE_NETWORK"
/>

2. 불필요한 리렌더링 방지

const webViewRef = useRef<WebView>(null);

// WebView 컴포넌트를 React.memo로 감싸기
const MemoizedWebView = React.memo(WebView);

완성!

구현한 기능

✅ Native → WebView (URL 파라미터)
✅ WebView → WebView (일반 Link)
✅ WebView → Native (postMessage)
✅ 하이드레이션 에러 해결
✅ TypeScript 타입 안정성

실전 활용

쇼핑몰 앱: 상품 목록(WebView) → 결제(Native)
뉴스 앱: 기사(WebView) → 댓글(Native)
금융 앱: 이벤트 페이지(WebView) → 송금(Native)
게임 앱: 공지사항(WebView) → 게임 시작(Native)

다음 단계

Native → WebView 데이터 전송: injectJavaScript()
딥링크 처리: expo-linking
오프라인 지원: WebView 캐싱
보안 강화: SSL Pinning

참고 자료

마무리

React Native와 WebView를 연결하면, Native의 성능과 웹의 유연성을 모두 활용할 수 있습니다. 처음에는 복잡해 보이지만, postMessage와 onMessage의 원리만 이해하면 다양한 시나리오에 응용할 수 있습니다.

여러분의 프로젝트에 적용하면서 궁금한 점이 있다면 댓글로 남겨주세요!

Expo Router Stack Navigator 실전 패턴과 꿀팁

deo2kim — Sat, 1 Nov 2025 22:29:52 +0900

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 파일로 네비게이터를 정의하고, 폴더 구조가 곧 라우트 구조가 되죠.

apps/mobile/app/(tabs)/
├─ _layout.tsx          # Tab Navigator
├─ index.tsx            # 홈 화면
└─ todo/
   ├─ _layout.tsx       # Stack Navigator ✨
   ├─ index.tsx         # Todo 목록 (루트)
   ├─ detail.tsx        # Todo 상세
   └─ edit.tsx          # Todo 편집

핵심: todo/_layout.tsx가 Todo 탭 내부의 Stack Navigator를 정의합니다!

️ Stack Navigator 구현

1. Layout 파일 생성 (`todo/_layout.tsx`)

import { Stack } from 'expo-router';

export default function TodoLayout() {
  return (
    <Stack
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: '#007AFF',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          title: '  Todo 목록',
        }}
      />

      <Stack.Screen
        name="detail"
        options={{
          title: '  Todo 상세',
        }}
      />

      <Stack.Screen
        name="edit"
        options={{
          title: '✏️ Todo 편집',
        }}
      />
    </Stack>
  );
}

✅ 장점: 파일 이름만으로 자동으로 라우트가 생성되고, 타입 안정성도 보장됩니다!

2. 목록 화면 (`todo/index.tsx`)

import { useRouter } from 'expo-router';

export default function TodoListScreen() {
  const router = useRouter();

  const handleTodoPress = (todoId: string) => {
    // Stack에 상세 화면 추가
    router.push(`/todo/detail?id=${todoId}`);
  };

  return (
    <View>
      {todos.map((todo) => (
        <TouchableOpacity
          key={todo.id}
          onPress={() => handleTodoPress(todo.id)}
        >
          <Text>{todo.title}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

3. 상세 화면 (`todo/detail.tsx`)

import { useRouter, useLocalSearchParams } from 'expo-router';

export default function TodoDetailScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();
  const todoId = params.id as string; // URL 파라미터 받기

  return (
    <View>
      <Text>Todo ID: {todoId}</Text>
      
      {/* 편집 화면으로 이동 */}
      <TouchableOpacity
        onPress={() => router.push(`/todo/edit?id=${todoId}`)}
      >
        <Text>편집하기</Text>
      </TouchableOpacity>

      {/* 목록으로 이동 */}
      <TouchableOpacity
        onPress={() => router.push('/todo')}
      >
        <Text>목록으로</Text>
      </TouchableOpacity>
    </View>
  );
}

4. 편집 화면 (`todo/edit.tsx`)

export default function TodoEditScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();
  const todoId = params.id as string;

  const handleSave = () => {
    // ✅ back()으로 이전 화면(상세)으로
    // 사용자가 온 경로 그대로 유지
    router.back();
  };

  return (
    <View>
      <Button title="저장" onPress={handleSave} />
    </View>
  );
}

네비게이션 메서드 완벽 정리

이번 프로젝트에서 가장 헷갈렸던 부분이 push, replace, back의 차이였습니다. 실습하면서 정리한 내용을 공유합니다!

메서드	동작	Stack 변화	사용 시나리오
`push()`	Stack에 추가	[목록, 상세] → [목록, 상세, 편집]	새 화면으로 이동, 뒤로가기 지원
`replace()`	현재 화면 교체	[목록, 상세, 편집] → [목록, 상세(새)]	로그인 후 로그인 화면 제거
`back()`	이전 화면으로	[목록, 상세, 편집] → [목록, 상세]	취소, 저장 후 복귀
`navigate()`	중복 방지 이동	[목록, 상세] → [목록]	이미 Stack에 있으면 이동만

실전 예시

1️⃣ 편집 후 저장: `back()` 사용

const handleSave = () => {
  // API 호출...
  router.back(); // ✅ 사용자가 온 경로로 복귀
};

왜 back()인가?
사용자가 목록 → 상세 → 편집으로 왔든, 홈 → 상세 → 편집으로 왔든, back()은 항상 이전 화면(상세)으로 돌아갑니다!

2️⃣ "목록으로" 버튼: `push()` 사용

const handleGoToList = () => {
  router.push('/todo'); // ✅ 목록을 Stack에 추가
};

왜 push()인가?
목록 화면에서 뒤로가기하면 상세 화면으로 돌아갈 수 있어야 하므로!

3️⃣ 크로스 탭 네비게이션: `push()`만 의미 있음

// 홈 화면에서 Todo 상세로 이동
router.push('/todo/detail?id=1');   // ✅
router.replace('/todo/detail?id=1'); // ❌ push와 동일한 효과!

⚠️ 주의: 크로스 탭 네비게이션에서는 다른 탭의 Stack에 쌓이기 때문에, 현재 탭의 Stack과는 무관합니다. 따라서 replace()를 써도 push()와 동일하게 동작합니다!

Stack Navigator 핵심 특징

1. 같은 라우트는 중복 안 쌓임

// 파라미터가 달라도 route name이 같으면 중복 안 됨!
router.push('/todo/detail?id=1');
router.push('/todo/detail?id=2'); // Stack: [목록, detail] (id만 업데이트)

핵심: React Navigation은 route name을 기준으로 중복을 판단합니다. 파라미터가 달라도 같은 detail route면 기존 화면만 업데이트돼요!

2. 각 탭은 독립적인 Stack 유지

// 홈 탭 Stack: [홈]
// Todo 탭 Stack: [목록, 상세]

// 탭을 전환해도 각 Stack은 유지됨!
// 홈 → Todo 탭 → 상세 뒤로가기 → 목록 ✅

3. 크로스 탭 네비게이션

// 홈 화면에서
router.push('/todo/detail?id=1');

// 결과:
// - Expo Router가 자동으로 Todo 탭 활성화
// - Todo 탭 Stack에 [상세] 추가
// - 홈 탭 Stack: [홈] (그대로 유지)

실전 패턴

패턴 1: 마감 임박 Todo (크로스 탭)

홈 화면에 마감 임박한 Todo를 표시하고, 클릭하면 바로 상세 화면으로!

// 홈 화면 (apps/mobile/app/(tabs)/index.tsx)
const urgentTodos = [
  { id: '1', title: 'Expo Router 학습하기', deadline: '오늘 14:00' },
  { id: '2', title: 'WebView 통신 구현', deadline: '내일 10:00' },
];

const handleTodoPress = (todoId: string) => {
  // 크로스 탭 네비게이션!
  router.push(`/todo/detail?id=${todoId}`);
};

✨ UX 개선: 사용자가 홈에서 바로 Todo 상세를 볼 수 있어 편리합니다!

패턴 2: "목록으로" 버튼

상세 화면에서 목록으로 빠르게 이동할 수 있는 버튼을 추가했습니다.

// 상세 화면
<TouchableOpacity
  onPress={() => router.push('/todo')}
>
  <Text>  목록으로</Text>
</TouchableOpacity>

동작:

목록 → 상세 → "목록으로" → Stack: [목록, 상세, 목록]
뒤로가기 → 상세 → 목록 (사용자 경로 유지!)

패턴 3: 편집 후 저장

const handleSave = () => {
  // API 저장...
  
  // ✅ back()으로 이전 화면(상세)으로
  router.back();
  
  // ❌ replace는 파라미터 업데이트 필요시만
  // router.replace(`/todo/detail?id=${newId}`);
};

실습 결과

테스트 시나리오

기본 Stack 동작
- ✅ 목록 → 상세 → 편집 → back → 상세 → back → 목록
- ✅ 같은 상세 화면 여러 번 push 시 중복 안 쌓임
크로스 탭 네비게이션
- ✅ 홈 → Todo 상세 → Todo 탭 Stack에만 추가
- ✅ 홈 → Todo 상세 → "목록으로" → 목록 추가됨
편집 화면
- ✅ 상세 → 편집 → 저장(back) → 상세로 복귀
- ✅ 상세 → 편집 → 취소(back) → 상세로 복귀

배운 점 & 꿀팁

1. segments vs Stack

⚠️ 헷갈리는 점:
useSegments()는 URL 경로를 반환하고, useNavigationState()는 실제 Stack을 반환합니다!

이 둘은 다를 수 있습니다. (특히 크로스 탭 네비게이션 시)

2. push vs replace, 언제 뭘 쓸까?

상황	사용할 메서드	이유
일반적인 화면 이동	`push()`	뒤로가기 지원
편집/취소 후 복귀	`back()`	사용자 경로 유지
로그인 후 이동	`replace()`	로그인 화면으로 뒤로가기 방지
크로스 탭 이동	`push()`	replace는 효과 동일

3. 파일 기반 라우팅의 장점

✅ 타입 안정성: 경로가 자동 완성되고 오타 방지
✅ 직관적: 폴더 구조 = 라우트 구조
✅ 유지보수 용이: 파일 이름만 봐도 화면 구조 파악

다음 단계

이제 Stack Navigation의 기본은 마스터했으니, 다음은:

Modal Stack: presentation: 'modal'로 모달 화면 구현
Deep Linking: URL로 직접 특정 화면 열기
Shared Element Transition: 화면 전환 애니메이션
Tab + Drawer: Drawer Navigator와 함께 사용하기

참고 자료

✨ 마무리

Stack Navigation을 직접 구현하면서 push, replace, back의 차이와 각 메서드를 언제 써야 하는지 명확히 이해할 수 있었습니다. 특히 크로스 탭 네비게이션에서 replace가 push와 동일하게 동작한다는 점이 인상 깊었네요!

Expo Router의 파일 기반 라우팅은 정말 직관적이고, 타입 안정성까지 보장해주니 생산성이 크게 향상됩니다. 여러분도 꼭 시도해보세요!

궁금한 점이나 피드백은 댓글로 남겨주세요!

쿠키 기반 인증 vs JWT, 그리고 CSRF와 SameSite 이야기

deo2kim — Mon, 27 Oct 2025 20:31:47 +0900

쿠키 기반 인증 vs JWT, 그리고 CSRF까지 완벽 정리

요즘 프론트엔드 개발을 하다 보면, JWT 인증과 쿠키 기반 인증을 모두 접하게 됩니다. 처음에는 “JWT는 토큰이라서 안전하고, 세션은 옛날 방식 아닌가?” 하는 오해가 생기기 쉬운데요. 이번 글에서는 두 방식의 차이부터, 실제 서비스에서 고려해야 하는 보안 이슈(CSRF, HttpOnly, SameSite)까지 정리해보려 합니다.

1. 쿠키, 세션, JWT 기본 개념

1-1. 세션 기반 인증

서버가 로그인 요청을 받으면, 해당 유저 정보를 세션 저장소(메모리, Redis 등)에 저장하고 세션 ID를 브라우저 쿠키로 내려줍니다.

Set-Cookie: sessionId=abc123; HttpOnly; Secure;

이후 요청마다 브라우저는 자동으로 이 쿠키를 포함시켜 요청을 보냅니다.

Cookie: sessionId=abc123

서버는 이 세션 ID로 사용자 정보를 식별합니다. 즉, 세션 ID가 곧 “로그인 상태를 증명하는 신분증”입니다.

1-2. JWT 기반 인증

JWT(Json Web Token)는 서버가 서명한 accessToken 자체에 인증 정보를 담아두는 방식입니다. 서버에 세션 저장소가 없고, 토큰만으로 인증이 가능합니다.


{
  "header": { "alg": "HS256", "typ": "JWT" },
  "payload": { "userId": 123, "role": "admin" },
  "signature": "서명값"
}

서버는 서명을 검증해 유효한 토큰인지 확인하고, payload의 정보를 읽어 인증을 수행합니다.

2. 쿠키 방식과 JWT 방식의 차이

구분	세션 기반 인증	JWT 기반 인증
저장 위치	서버 (세션 스토리지)	클라이언트 (JWT 자체)
확장성	서버 부하 증가	서버 간 공유 불필요 → 확장성 높음
만료 처리	서버에서 세션 삭제 가능	토큰 만료(`exp`) 시점까지 유효
보안 위험	세션 ID 탈취	Access Token 탈취

3. 세션 ID나 JWT가 탈취되면 위험한 이유

세션 ID나 JWT 모두 “로그인 상태를 증명하는 신분증”이기 때문에, 이 값이 탈취되면 공격자는 해당 사용자의 계정으로 행동할 수 있습니다. 이를 세션 하이재킹(Session Hijacking)이라고 합니다.

대표적인 공격 경로

XSS: 악성 스크립트를 통해 document.cookie로 쿠키 탈취
HTTP 통신 도청: HTTPS가 아닌 평문 통신에서 쿠키 노출
세션 고정 공격: 공격자가 미리 발급받은 세션 ID를 유도

방어 방법

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict;

HttpOnly: JavaScript에서 쿠키 접근 차단 (XSS 방어)
Secure: HTTPS 통신에서만 전송
SameSite: 외부 도메인 요청 시 쿠키 전송 제한 (CSRF 방어)

4. CSRF(Cross-Site Request Forgery)란?

CSRF는 “다른 사이트에서 인증된 사용자의 세션을 악용해 요청을 보내는 공격”입니다.

예를 들어 사용자가 A사이트에 로그인된 상태에서, 공격자가 만든 B사이트에서 자동으로 A사이트로 POST 요청을 보내면, 브라우저는 A사이트 쿠키를 자동으로 전송합니다. 결과적으로 사용자가 의도하지 않은 요청이 수행될 수 있습니다.

이때 사용자는 로그인된 상태의 쿠키가 자동으로 전송되기 때문에, 서버는 정상적인 요청으로 오인합니다.

✅ 방어 방법

SameSite 쿠키 설정: 외부 사이트에서 쿠키가 전송되지 않게 함
CSRF 토큰: 서버가 발급한 토큰을 함께 검증

5. 쿠키 기반 JWT 인증은 안전한가?

요즘은 JWT를 로컬스토리지에 저장하지 않고 HttpOnly 쿠키에 저장하는 방식이 보안적으로 권장됩니다.

✅ XSS 방어: HttpOnly 쿠키는 JS로 접근 불가
✅ 자동 전송: fetch 시 쿠키 자동 포함 (credentials: 'include')
⚠️ CSRF 주의: 쿠키는 자동 전송되므로 SameSite 설정이 중요

즉, Access Token을 HttpOnly 쿠키에 저장하고, SameSite=Lax 또는 Strict 설정을 사용하면 매우 안전한 구조입니다.

6. 리프레시 토큰은 항상 같이 보내면 안 되나?

리프레시 토큰은 새로운 Access Token을 발급받기 위한 “마스터 키”이기 때문에, 모든 요청에 함께 보내면 탈취 시 피해가 매우 큽니다.

보통 아래처럼 별도의 경로로만 전송되게 합니다.


Path=/auth/refresh;
HttpOnly;
SameSite=Strict;

즉, Access Token은 여러 요청에 사용되고, Refresh Token은 오직 /auth/refresh 요청에서만 사용되도록 설계하는 것이 베스트 프랙티스입니다.

7. 정리

세션이든 JWT든, 탈취되면 위험하다.
HttpOnly, Secure, SameSite 설정으로 쿠키 보호가 필수.
CSRF는 브라우저의 자동 쿠키 전송을 악용한 공격.
Access Token은 짧게, Refresh Token은 안전하게 별도 경로로 관리.

결론: “JWT를 쿠키에 담는 방식은 보안적으로 좋은 선택이지만, CSRF와 토큰 주기 관리까지 신경써야 완전한 인증 시스템이 된다.”

참고 키워드

Session Hijacking
CSRF vs XSS
HttpOnly / Secure / SameSite 쿠키 속성
JWT Refresh Token Rotation

Expo Router 25.10 패치 노트 - 모바일 네비게이션의 새로운 시대

deo2kim — Sun, 26 Oct 2025 17:46:18 +0900

Expo Router 업데이트 - Bottom Tab Navigation 구현

개요

Expo Router를 사용하여 파일 시스템 기반 라우팅과 Bottom Tab Navigation을 구현했습니다. 전통적인 React Native 구조에서 Next.js 스타일의 라우팅으로 마이그레이션하며, 더 직관적이고 유지보수하기 쉬운 구조를 갖추게 되었습니다.

React Native Expo Router TypeScript Nx Monorepo iOS

✨ 주요 변경사항

1. Expo Router 도입

expo-router 파일 시스템 기반 라우팅

expo-linking 딥링킹 지원

expo-constants 환경 변수 관리

react-native-screens 네이티브 화면 최적화

2. Metro 설정 업데이트

const defaultConfig = getDefaultConfig(__dirname, {
  isCSSEnabled: true, // package.json exports 지원
});

// Nx 모노레포와 호환되는 간결한 설정
module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig));

3. Bottom Tab Navigation 구현

3개의 탭으로 구성:

홈: 환영 화면 및 Expo Router 학습 자료
웹뷰: Next.js 웹 앱 (localhost:3000) 통합
⚙️ 설정: 앱 정보 및 외부 링크

4. 주요 기능

Ionicons 아이콘 사용으로 일관된 디자인
커스텀 탭 바 스타일링 (높이, 색상, 여백)
SafeAreaView로 노치 영역 완벽 처리
로딩 상태 및 에러 핸들링

커밋 내역

feat: Expo Router 및 필수 패키지 추가

feat: Expo Router 지원을 위한 Metro 설정 추가

feat: Expo Router 플러그인 및 엔트리 포인트 설정

refactor: 기존 App 컴포넌트 및 테스트 파일 제거

feat: Expo Router 기반 Bottom Tab Navigation 구현

chore: iOS 네이티브 모듈 및 CocoaPods 의존성 업데이트

기술적 도전과 해결

1. Node.js 내장 모듈 해결

문제: React Native 환경에서 Node.js 모듈(console, fs 등)을 찾을 수 없다는 에러 발생

해결: Metro Bundler의 isCSSEnabled: true 설정으로 Expo Router의 고급 resolver 활성화

2. SafeArea 처리

문제: 노치 영역에 콘텐츠가 가려지는 현상

해결: react-native-safe-area-context의 SafeAreaView 사용, 배경색을 헤더와 통일하여 자연스러운 UI 구현

3. 네이티브 모듈 통합

문제: ExpoLinking 네이티브 모듈을 찾을 수 없음

해결: apps/mobile/package.json에 직접 의존성 추가 후 npx nx prebuild mobile --platform ios --clean으로 네이티브 재빌드

학습 포인트

파일 시스템 라우팅: Next.js처럼 app/ 폴더 구조로 라우트 자동 생성
Route Groups: (tabs)처럼 괄호로 감싸면 URL에 포함되지 않음
SafeAreaView: 노치, 다이나믹 아일랜드, 홈 인디케이터 모두 처리
headerShown: false: 실무에서는 대부분 커스텀 헤더 사용
Nx Monorepo: 루트 package.json에서 버전 관리, 하위 앱은 "*" 사용

실행 방법

# 1. Web 서버 실행 (별도 터미널)
npx nx dev web

# 2. iOS 앱 실행
export LANG=en_US.UTF-8
npx nx run-ios mobile

다음 단계

Android 지원 추가
딥링킹 테스트 및 활용
네비게이션 애니메이션 커스터마이징
E2E 테스트 작성 (Detox)
Push 알림 통합

참고 자료

React Native 웹뷰로 웹앱을 네이티브 앱처럼 만들기 (feat. 삽질 경험담)

deo2kim — Wed, 22 Oct 2025 00:51:06 +0900

이 글의 목표: React Native 앱에 WebView를 추가해서 웹앱을 모바일 앱 안에서 띄워보겠습니다. 삽질 포함!

왜 WebView가 필요할까?

Next.js로 웹 앱을 만들었는데, 이걸 모바일 앱에서도 보여주고 싶었어요.
완전히 새로 네이티브 UI를 만들 수도 있지만, 일단 웹을 앱 안에 넣어보자!

1. react-native-webview 설치

JavaScript 패키지 설치

cd apps/mobile
npm install react-native-webview

✅ 설치 완료! 2개 패키지 추가됨

2. iOS 네이티브 설정 (CocoaPods)

React Native는 두 부분으로 나뉘어요:

JavaScript 부분: npm install로 설치 ✅
네이티브 부분: iOS는 CocoaPods로 설치 필요!

CocoaPods 설치

cd apps/mobile/ios
export LANG=en_US.UTF-8  # UTF-8 설정 (중요!)
pod install

왜 export LANG이 필요?
CocoaPods가 UTF-8 인코딩을 요구해서, 매번 터미널에서 설정해줘야 해요.

성공!

Pod installation complete! 
There are 83 dependencies from the Podfile 
and 82 total pods installed.

81개 → 82개로 증가! (react-native-webview가 추가됨)

3. 코드 작성 (학습용 주석 가득!)

기존의 긴 예제 코드를 다 지우고, 간단하게 시작해봤어요.
핵심 아이디어: 버튼을 누르면 웹뷰가 나타나고, 다시 누르면 사라지게!

3-1. Import 추가

import { useState } from 'react';
import WebView from 'react-native-webview';

3-2. 상태 관리

// 웹뷰를 보여줄지 말지 결정하는 상태
const [showWebView, setShowWebView] = useState(false);

// 웹뷰에서 보여줄 URL
const webviewUrl = 'http://localhost:3000';  // Next.js 웹 서버

3-3. WebView 컴포넌트

<WebView
  source={{ uri: webviewUrl }}
  style={styles.webview}
  // 로딩 시작할 때
  onLoadStart={() => console.log('  웹뷰 로딩 시작...')}
  // 로딩 완료될 때
  onLoadEnd={() => console.log('✅ 웹뷰 로딩 완료!')}
  // 에러 발생 시
  onError={(error) => console.error('❌ 웹뷰 에러:', error)}
/>

3-4. 조건부 렌더링

{showWebView ? (
  // 웹뷰 화면
  <WebView ... />
) : (
  // 환영 화면
  <View>
    <Text>환영합니다!  </Text>
    <Text>학습 포인트: WebView 사용법</Text>
  </View>
)}

3-5. 토글 버튼

<TouchableOpacity onPress={() => setShowWebView(!showWebView)}>
  <Text>
    {showWebView ? '  닫기' : '  웹뷰 열기'}
  </Text>
</TouchableOpacity>

4. 실행하기

⚠️ 중요! 웹 서버를 먼저 실행해야 해요!

단계 1: 웹 서버 실행

터미널 1번:

npx nx dev web

→ http://localhost:3000 에서 Next.js 웹 앱이 실행됩니다.

단계 2: 모바일 앱 실행

터미널 2번:

export LANG=en_US.UTF-8
npx nx run-ios mobile

→ iOS 시뮬레이터가 열리고 앱이 실행됩니다!

5. 결과 화면

처음 실행 시

┌─────────────────────────┐
│  내맘대로 모바일 앱      │
│ React Native + WebView │
├─────────────────────────┤
│                         │
│    환영합니다!          │
│                         │
│    학습 포인트          │
│  1️⃣ WebView 사용       │
│  2️⃣ 웹-앱 연동         │
│  3️⃣ 로딩 이벤트        │
│  4️⃣ 에러 핸들링        │
│                         │
├─────────────────────────┤
│   [   웹뷰 열기 ]       │
└─────────────────────────┘

버튼 누른 후

┌─────────────────────────┐
│  내맘대로 모바일 앱      │
├─────────────────────────┤
│   localhost:3000       │
├─────────────────────────┤
│                         │
│    Next.js 웹 앱        │
│  (웹뷰 안에 표시!)       │
│                         │
├─────────────────────────┤
│   [   닫기 ]           │
└─────────────────────────┘

6. 핵심 학습 포인트

WebView 컴포넌트

source: 표시할 웹페이지 URL
onLoadStart: 로딩 시작 이벤트
onLoadEnd: 로딩 완료 이벤트
onError: 에러 발생 이벤트

웹과 앱 연동

웹 서버가 켜져있어야 함
http:// 프로토콜 필수!
localhost는 iOS 시뮬레이터에서 Mac을 가리킴

7. 자주 발생하는 에러

에러 1: CocoaPods UTF-8 에러

Unicode Normalization not appropriate for ASCII-8BIT

해결:

export LANG=en_US.UTF-8
pod install

에러 2: 웹뷰가 하얗게만 나옴

원인: 웹 서버가 안 켜져있음
해결: npx nx dev web 먼저 실행!

에러 3: Metro 번들러 에러

No script URL provided

해결: Metro 서버 재시작

lsof -ti:8081 | xargs kill -9
npx nx start mobile

8. 추가 실험 아이디어

다른 웹사이트 띄우기

const webviewUrl = 'https://www.google.com';

HTML 직접 렌더링

<WebView
  source={{ 
    html: '<h1>Hello from HTML!</h1>' 
  }}
/>

JavaScript 실행하기

<WebView
  source={{ uri: 'https://google.com' }}
  injectedJavaScript={`
    alert('웹뷰에서 JavaScript 실행!');
  `}
/>

로딩 인디케이터 추가

const [isLoading, setIsLoading] = useState(false);

<WebView
  onLoadStart={() => setIsLoading(true)}
  onLoadEnd={() => setIsLoading(false)}
/>

{isLoading && <ActivityIndicator />}

9. 전체 파일 구조

apps/mobile/
├── src/app/
│   └── App.tsx              # ✅ 웹뷰 컴포넌트 추가됨
├── ios/
│   ├── Podfile.lock         # ✅ react-native-webview pod 추가됨
│   └── Pods/
│       └── RNCWebview/      # ✅ 네이티브 코드
└── package.json             # ✅ react-native-webview 의존성

✨ 10. 결론

성공적으로 완료!

웹 앱을 모바일 앱 안에 넣는 데 성공했습니다!

배운 것들:

✅ react-native-webview 설치 및 설정
✅ CocoaPods로 iOS 네이티브 연동
✅ WebView 컴포넌트 사용법
✅ 웹과 네이티브 앱 통합
✅ 이벤트 핸들링 (로딩, 에러)

다음 단계:
- 웹 ↔ 앱 메시지 통신 (postMessage)
- 진행률 바 추가
- 여러 페이지 탭으로 관리
- 오프라인 모드 지원

생각보다 간단하죠? 여러분도 한 번 시도해보세요!

작성일: 2025년 10월 21일
개발 환경: React Native 0.79, react-native-webview 13.16.0, Next.js 15

Nx 모노레포에서 React Native 앱 만들다가 3시간 날린 썰 (feat. 해결법)

deo2kim — Mon, 20 Oct 2025 00:13:27 +0900

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 플러그인 설치 ⚙️

단계 1: Nx Expo 플러그인 설치

Nx에서 React Native와 Expo를 사용하려면 전용 플러그인이 필요합니다.

npm install -D @nx/expo @nx/react-native

설치 완료: 145개의 패키지가 추가되었습니다.

3. Expo 애플리케이션 생성

단계 2: mobile 앱 생성

npx nx generate @nx/expo:application mobile \
  --directory=apps/mobile \
  --e2eTestRunner=none \
  --unitTestRunner=jest \
  --js=false

생성된 파일들:

apps/mobile/src/app/App.tsx - 메인 앱 컴포넌트
apps/mobile/app.json - Expo 설정
apps/mobile/metro.config.js - Metro 번들러 설정
apps/mobile/package.json - 앱 의존성
apps/mobile/assets/ - 이미지, 폰트 등

생성 완료: @naemamdaero/mobile 프로젝트가 성공적으로 생성되었습니다!

생성된 프로젝트 구조

apps/mobile/ ├── src/ │ └── app/ │ ├── App.tsx # 메인 컴포넌트 │ └── App.spec.tsx # 테스트 ├── assets/ │ ├── images/ │ │ ├── icon.png │ │ ├── splash-icon.png │ │ └── adaptive-icon.png │ └── fonts/ ├── app.json # Expo 설정 ├── metro.config.js # Metro 번들러 설정 ├── jest.config.ts # Jest 설정 ├── eas.json # EAS Build 설정 ├── index.js # 엔트리 포인트 ├── package.json └── tsconfig.json

4. 웹 브라우저에서 테스트 시도

웹 실행 명령어

npx nx serve mobile

React Native는 웹에서도 실행할 수 있지만 제한사항이 있습니다:

웹에서 가능한 것 ✅

기본 UI 컴포넌트 (View, Text, TouchableOpacity 등)
스타일링 및 레이아웃
상태 관리 및 React 훅
API 호출

웹에서 제한되는 것 ❌

카메라, 센서 등 네이티브 모듈
react-native-webview
네이티브 애니메이션 일부
파일 시스템 접근

5. iOS 시뮬레이터 실행 준비

첫 시도와 문제 발견

초기에 iOS에서 실행을 시도했을 때:

npx nx run-ios mobile

발생한 에러들:

Xcode 경로 문제: Command Line Tools만 설정되어 있음
CocoaPods 인코딩 에러: UTF-8 설정 필요
iOS 네이티브 프로젝트 미생성: prebuild 필요

6. Xcode 네이티브 빌드 설정

단계 3: UTF-8 환경 변수 설정

~/.zshrc 파일 수정:

# 다음 라인의 주석 해제
export LANG=en_US.UTF-8

단계 4: Xcode 개발자 디렉토리 설정

Command Line Tools에서 전체 Xcode로 변경:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

주의: 이 명령어는 비밀번호 입력이 필요하며, Xcode가 설치되어 있어야 합니다.

단계 5: iOS 네이티브 프로젝트 생성 (prebuild)

Expo prebuild를 실행하여 네이티브 iOS 프로젝트를 생성합니다:

npx nx prebuild mobile --platform ios

이 명령어는 다음을 수행합니다:

ios/ 디렉토리 생성
Xcode 프로젝트 파일 생성 (.xcworkspace)
CocoaPods 의존성 설치 (81개 pods)
React Native 모듈 링크
네이티브 코드 생성

성공: Pod installation complete! 81 total pods installed.

생성된 iOS 프로젝트 구조

apps/mobile/ ├── ios/ # 네이티브 iOS 프로젝트 │ ├── Mobile.xcworkspace # Xcode에서 열어야 하는 파일 │ ├── Mobile.xcodeproj │ ├── Podfile # CocoaPods 의존성 │ ├── Pods/ # 설치된 pods │ └── Mobile/ │ ├── AppDelegate.h │ ├── AppDelegate.mm │ └── Info.plist └── ...

7. Xcode에서 프로젝트 열기

단계 6: Xcode 워크스페이스 열기

cd apps/mobile/ios
open Mobile.xcworkspace

중요: .xcodeproj가 아닌 .xcworkspace 파일을 열어야 합니다!

8. Metro 번들러 시작

첫 번째 실행 시도와 에러

Xcode에서 앱을 빌드했을 때 다음 에러가 발생:

No script URL provided. Make sure the packager is running 
or you have embedded a JS bundle in your application bundle.

unsanitizedScriptURLString = (null)

원인: Metro 번들러(JavaScript 개발 서버)가 실행되지 않음

단계 7: Metro 번들러 시작

별도의 터미널 창에서 Metro를 실행해야 합니다:

# 프로젝트 루트에서
npx nx start mobile --port 8081

Metro가 시작되면 다음과 같이 표시됩니다:

Packager is ready at http://localhost:8081
Starting project at /Users/.../naemamdaero/apps/mobile
Using src/app as the root directory for Expo Router.
Starting Metro Bundler
Waiting on http://localhost:8081

확인: http://localhost:8081/status에 접속하면 packager-status:running이 표시되어야 합니다.

9. 앱 실행 성공!

단계 8: Xcode에서 앱 실행

Metro가 실행된 상태에서:

Xcode 상단에서 시뮬레이터 선택 (예: iPhone 17 Pro)
⌘ + R 누르거나 재생 버튼 클릭
빌드 및 번들링 진행

성공 로그:

iOS apps/mobile/index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.7% (780/781)
iOS Bundled 4034ms apps/mobile/index.js (781 modules)

결과: iPhone 시뮬레이터에 "Welcome Mobile " 화면이 표시됩니다!

10. 개발 워크플로우

일상적인 개발 흐름

1. Metro 서버 시작 (한 번만)

npx nx start mobile --port 8081

이 터미널은 계속 실행 상태로 유지합니다.

2. Xcode에서 앱 실행

open apps/mobile/ios/Mobile.xcworkspace
시뮬레이터 선택
⌘ + R로 실행

3. 코드 수정 및 리로드

apps/mobile/src/app/App.tsx 수정
저장
Xcode에서 ⌘ + R 또는
시뮬레이터에서 ⌘ + D → "Reload"

11. 유용한 명령어 모음

Nx 명령어

# 테스트 실행
npx nx test mobile

# 린트 체크
npx nx lint mobile

# 타입 체크
npx nx typecheck mobile

# 프로젝트 정보 확인
npx nx show project @naemamdaero/mobile

# 프로젝트 그래프 시각화
npx nx graph

Expo 명령어

# Metro 서버 시작
npx nx start mobile

# 웹에서 실행
npx nx serve mobile

# iOS 네이티브 프로젝트 재생성
npx nx prebuild mobile --platform ios --clean

# Android 네이티브 프로젝트 생성
npx nx prebuild mobile --platform android

12. 트러블슈팅

문제: Metro 서버 포트 충돌

Port 8081 is already in use

해결:

lsof -ti:8081 | xargs kill -9
npx nx start mobile --port 8081

문제: Xcode에서 "No script URL provided" 에러

해결: Metro 번들러가 실행 중인지 확인

curl http://localhost:8081/status
# 응답: packager-status:running

문제: CocoaPods 인코딩 에러

Unicode Normalization not appropriate for ASCII-8BIT

해결: ~/.zshrc에 추가

export LANG=en_US.UTF-8

문제: xcrun simctl 에러

Error: xcrun simctl help exited with non-zero code: 72

해결:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

13. 최종 프로젝트 구조

naemamdaero/ ├── apps/ │ ├── web/ # Next.js 웹 앱 │ ├── web-e2e/ # E2E 테스트 │ └── mobile/ # React Native 모바일 앱 │ ├── src/ │ │ └── app/ │ │ ├── App.tsx │ │ └── App.spec.tsx │ ├── ios/ # 네이티브 iOS 프로젝트 │ │ └── Mobile.xcworkspace │ ├── assets/ │ ├── app.json │ ├── metro.config.js │ └── package.json ├── package.json ├── nx.json └── tsconfig.base.json

14. 다음 단계 제안

앱 개선 아이디어

공유 라이브러리: libs/ 폴더에 web/mobile 공통 로직 생성
UI 컴포넌트 라이브러리: React Native Paper, NativeBase
네비게이션: Expo Router (이미 설정됨) 또는 React Navigation
상태 관리: Zustand, Jotai, Redux Toolkit
API 통합: 공유 API 클라이언트 라이브러리
스타일링: Tailwind (NativeWind), Styled Components
테스트: React Native Testing Library, Detox E2E

15. 참고 자료

결론 ✨

Nx 모노레포에 Expo React Native 앱을 성공적으로 추가하고 Xcode에서 실행했습니다! 이제 다음을 할 수 있습니다:

✅ 웹(Next.js)과 모바일(React Native) 앱을 하나의 모노레포에서 관리
✅ 공통 로직과 타입을 라이브러리로 공유
✅ Xcode에서 네이티브 코드 수정 및 디버깅
✅ Metro 번들러를 통한 빠른 개발 경험
✅ Nx의 강력한 빌드 시스템과 캐싱 활용

모노레포의 장점을 활용하여 효율적인 풀스택 개발을 시작하세요!

'use client' 하나 안 써서 개발 서버가 터졌다

deo2kim — Sun, 19 Oct 2025 01:20:55 +0900

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-component

at eval (webpack-internal:///(rsc)/../../node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:37:77)
at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:6:88)

브라우저에서도 500 에러가 발생하며 페이지가 렌더링되지 않았습니다.

원인 분석

Next.js 15의 App Router는 기본적으로 모든 컴포넌트를 서버 컴포넌트로 처리합니다. 그런데 Emotion은 내부적으로 React의 createContext를 사용하는데, 이는 클라이언트 사이드에서만 작동합니다.

문제를 더 복잡하게 만든 것은 tsconfig.json의 설정이었습니다:

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

이 설정은 모든 JSX를 Emotion의 JSX runtime으로 변환하기 때문에, layout.tsx 같은 서버 컴포넌트에도 Emotion이 적용되어 에러가 발생했습니다.

왜 이런 에러가 발생할까?

서버 컴포넌트의 제약사항
- 서버 컴포넌트는 서버에서만 실행됨
- 브라우저 API (useState, useEffect, createContext 등)를 사용할 수 없음
Emotion의 동작 방식
- CSS-in-JS 라이브러리는 런타임에 스타일을 생성
- Context API를 통해 스타일 캐시를 관리
- 클라이언트 환경이 필수
jsxImportSource의 영향
- 모든 파일의 JSX를 Emotion으로 변환
- 서버 컴포넌트와 클라이언트 컴포넌트 구분 없이 적용
- 결과적으로 서버 컴포넌트에서 Context API 사용 시도

해결 방법

1단계: Emotion Provider 생성

먼저 Emotion 캐시를 관리할 클라이언트 컴포넌트를 생성합니다.

// src/app/emotion-provider.tsx
'use client';

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { useServerInsertedHTML } from 'next/navigation';
import { useState } from 'react';

export default function EmotionProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [cache] = useState(() => {
    const cache = createCache({ key: 'css' });
    cache.compat = true;
    return cache;
  });

  useServerInsertedHTML(() => {
    return (
      <style
        data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
        dangerouslySetInnerHTML={{
          __html: Object.values(cache.inserted).join(' '),
        }}
      />
    );
  });

  return <CacheProvider value={cache}>{children}</CacheProvider>;
}

핵심 포인트:

'use client' 지시어로 클라이언트 컴포넌트 명시
useServerInsertedHTML로 SSR 시 스타일 주입
Emotion 캐시를 격리하여 관리

2단계: tsconfig.json 수정

전역 jsxImportSource 설정을 제거합니다.

{
  "compilerOptions": {
    "jsx": "preserve",
    // "jsxImportSource": "@emotion/react", ← 이 줄 제거
    "noEmit": true,
    // ... 나머지 설정
  }
}

3단계: layout.tsx에 Provider 적용

루트 레이아웃에 EmotionProvider를 추가합니다.

// src/app/layout.tsx
import './global.css';
import EmotionProvider from './emotion-provider';

export const metadata = {
  title: 'Welcome to ',
  description: 'Generated by create-nx-workspace',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <EmotionProvider>{children}</EmotionProvider>
      </body>
    </html>
  );
}

4단계: 페이지 컴포넌트에 'use client' 추가

Emotion을 사용하는 페이지 컴포넌트를 클라이언트 컴포넌트로 만듭니다.

// src/app/page.tsx
'use client';

import styled from '@emotion/styled';

const StyledPage = styled.div`
  .page {
    /* 스타일 */
  }
`;

export default function Index() {
  return (
    <StyledPage>
      {/* 컨텐츠 */}
    </StyledPage>
  );
}

5단계: 필요한 패키지 설치

npm install @emotion/cache

결과

위 단계를 모두 완료하면 개발 서버가 정상적으로 실행되며, Emotion styled-components가 Next.js 15 App Router 환경에서 정상 작동합니다.

npx nx dev web
# 또는
cd apps/web && npm run dev

✓ Ready in 1322ms
✓ Compiled / in 2.3s (749 modules)

핵심 정리

Next.js 15 App Router + Emotion 사용 시 체크리스트:

☑️ Emotion을 사용하는 컴포넌트에 'use client' 추가
☑️ EmotionProvider를 클라이언트 컴포넌트로 분리
☑️ tsconfig.json에서 전역 jsxImportSource 제거
☑️ layout.tsx에 EmotionProvider 적용
☑️ @emotion/cache 패키지 설치

기억해야 할 원칙:

CSS-in-JS 라이브러리(Emotion, styled-components 등)는 클라이언트 환경이 필수이므로, Next.js 15 App Router에서는 반드시 클라이언트 컴포넌트로 사용해야 합니다. 전역 설정보다는 명시적으로 필요한 곳에서만 적용하는 것이 안전합니다.

참고 자료

ESModule 쓸모 없는 거 아님? (CommonJS vs ESModule)

deo2kim — Wed, 1 Oct 2025 20:59:38 +0900

CommonJS vs ESModule, 제대로 정리하기

결론부터 말하면, 현재 자바스크립트에서 모듈 시스템은 두 가지(CJS, ESM)가 공존한다.

오래된 Node.js 생태계에서는 **CommonJS(CJS)**가 널리 쓰였고,
현대적인 웹/번들링/트리 셰이킹에서는 **ESModule(ESM)**이 표준이다.
따라서 실무에서는 여전히 두 방식을 동시에 마주하게 되며, 이를 이해하는 것이 중요하다.

1. CommonJS(CJS)

형식

// 가져오기
const fs = require("fs");

// 내보내기
module.exports = { read: fs.readFileSync };

특징
- Node.js 초창기부터 사용
- require, module.exports 키워드 사용
- 런타임에 모듈 로딩 (동적)
- 동기적 특성 → 서버 환경에서 적합
장점
- Node.js 생태계에 풍부한 지원
- 오래된 라이브러리 대부분 CJS 기반
단점
- 정적 분석 어려움
- 트리 셰이킹 불가능 → 번들 크기 최적화 어려움

2. ESModule(ESM)

형식

// 가져오기
import fs from "fs";

// 내보내기
export const read = fs.readFileSync;

특징
- 자바스크립트 표준 모듈 시스템
- import, export 키워드 사용
- 정적 로딩 (컴파일 타임 분석 가능)
- 브라우저 & Node.js 양쪽 모두 지원
장점
- 트리 셰이킹 지원 → 불필요 코드 제거
- 비동기 로딩 가능 (import())
- TS/번들러와 궁합 좋음
단점
- 구버전 Node.js에서는 지원 안 됨
- 여전히 일부 패키지는 CJS 전용

3. 성능 차이

CJS
- 런타임에 모듈을 해석 → 실행 속도 약간 느릴 수 있음
- 트리 셰이킹 불가
ESM
- 빌드 타임에 의존성 그래프를 분석 → 최적화 유리
- 번들 크기 절감 가능

실제 서비스 규모로 갈수록 ESM이 성능상 유리하다.

4. 왜 ESM이 나왔나?

브라우저에서 표준화된 모듈 시스템 필요
빌드 툴(웹팩, 롤업 등)에서 정적 분석과 최적화 필요
CJS의 한계를 극복하고 "언어 차원에서 공식 지원"을 하기 위함

5. CJS와 ESM 혼용

같은 파일 안에서는 불가능

// ❌ 실행 오류
import fs from "fs";
const path = require("path");

다른 파일 단위로는 가능
- 어떤 파일은 CJS, 어떤 파일은 ESM
- Node.js는 import()와 createRequire API로 브리지 제공

예시 1. CJS에서 ESM 가져오기

// index.cjs
(async () => {
  const { readFile } = await import("fs/promises");
  const data = await readFile("./hello.txt", "utf-8");
  console.log(data);
})();

예시 2. ESM에서 CJS 가져오기

// index.mjs
import { createRequire } from "module";
const require = createRequire(import.meta.url);

const fs = require("fs");
console.log(fs.existsSync("./hello.txt"));

6. 변환 예시

CJS → ESM

// CJS
const fs = require("fs");
module.exports = { read: fs.readFileSync };

// ESM
import fs from "fs";
export const read = fs.readFileSync;

ESM → CJS

// ESM
import fs from "fs";
export function read(path) {
  return fs.readFileSync(path, "utf-8");
}

// CJS
const fs = require("fs");
exports.read = function (path) {
  return fs.readFileSync(path, "utf-8");
};

7. 정리

CJS: Node.js 초창기 모듈 시스템, 런타임 로딩, 트리 셰이킹 불가
ESM: 자바스크립트 표준 모듈 시스템, 정적 분석 가능, 최적화 유리
한 파일 내 혼용 불가 → 프로젝트 단위에서는 혼용 가능 (import(), createRequire)
실무에서는 ESM 기본 사용 권장
단, 레거시 라이브러리나 특정 패키지 때문에 CJS 브리지가 필요한 경우가 많음

정리하면, ESM은 앞으로의 표준이고 CJS는 과거 유산이지만, 여전히 공존해야 하는 상황이다.
따라서 개발자는 두 방식의 차이와 변환 방법을 반드시 이해하고 있어야 한다.

[SSL] Certbot으로 HTTPS 설정 (도메인 구입 후)

deo2kim — Mon, 9 Jun 2025 17:24:25 +0900

0. 들어가기 전에 기본 설정 (nginx)

sudo vim /etc/nginx/sites-available/default

server {
        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name your_domain_name; # 여기

        location / {
                proxy_pass http://localhost:8080; # 여기
                proxy_set_header X-Real-IP $remote_addr; # 여기
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 여기
	}
}

1. install certbot

sudo apt update
sudo apt install certbot python3-certbot-nginx -y

2. 도메인 인증 받기

sudo certbot --nginx -d your_domain_name

3. 접근

해당 주소로 접근하면 자물쇠가 잘 달려있는 것을 확인할 수 있다.

맞왜틀

Playwright E2E 테스트 추가하기

투두 앱에 Playwright E2E 테스트 추가하기

작업 개요

주요 작업 내용

2. 접근성(Accessibility) 개선

3. Playwright E2E 테스트 작성

테스트 카테고리

테스트 코드 구조

테스트 작성 시 학습한 Best Practices

4. Playwright 타임아웃 최적화

커밋 내역

배운 점

1. Playwright 선택자 전략

2. 테스트 구조화

3. 접근성과 테스트의 시너지

다음 단계

테스트 실행 방법

결론

React Native + Next.js WebView: 네이티브와 웹을 자유롭게 오가는 법

React Native와 WebView 양방향 네비게이션 완벽 가이드

목차

1. 왜 WebView 네비게이션이 필요한가?

실무 시나리오

구현할 3가지 네비게이션

2. 전체 아키텍처

프로젝트 구조

데이터 흐름

3. Native → WebView 이동

목표

Step 1: Native 화면에서 WebView로 이동

apps/mobile/app/(tabs)/index.tsx

Step 2: WebView 화면에서 URL 파라미터 받기

apps/mobile/app/(tabs)/webview.tsx

✅ 결과

4. WebView → WebView 이동

목표

Step 1: 웹 홈 페이지

apps/web/src/app/page.tsx

Step 2: Todo 목록 페이지

apps/web/src/app/todos/page.tsx

✅ 결과

5. WebView → Native 이동 (핵심!)

목표

Step 1: WebView에서 postMessage 전송

apps/web/src/app/todos/page.tsx

Step 2: Native에서 메시지 수신

apps/mobile/app/(tabs)/webview.tsx

✅ 전체 흐름

6. 실전 팁 & 주의사항

⚠️ 하이드레이션 에러 해결

문제

해결

디버깅 방법

WebView 콘솔 로그 보기 (iOS)

Native 콘솔 로그 보기

실전 팁

1. 메시지 타입 정의

2. 에러 핸들링

3. 로딩 상태 관리

성능 최적화

1. WebView 캐싱

2. 불필요한 리렌더링 방지

완성!

구현한 기능

실전 활용

다음 단계

참고 자료

마무리

Expo Router Stack Navigator 실전 패턴과 꿀팁

Expo Router로 Stack Navigation 마스터하기

목표

파일 구조

️ Stack Navigator 구현

1. Layout 파일 생성 (todo/_layout.tsx)

2. 목록 화면 (todo/index.tsx)

3. 상세 화면 (todo/detail.tsx)

4. 편집 화면 (todo/edit.tsx)

네비게이션 메서드 완벽 정리

실전 예시

1. Layout 파일 생성 (`todo/_layout.tsx`)

2. 목록 화면 (`todo/index.tsx`)

3. 상세 화면 (`todo/detail.tsx`)

4. 편집 화면 (`todo/edit.tsx`)

1️⃣ 편집 후 저장: `back()` 사용

2️⃣ "목록으로" 버튼: `push()` 사용

3️⃣ 크로스 탭 네비게이션: `push()`만 의미 있음