React Native + Expo Todo 앱 (1일차)

개발 환경

• 사용 프레임워크: React Native
• 빌드 도구: Expo (with EAS)
• 운영 체제: macOS (MacBook 사용)
• 에디터: VS Code
• 테스트: Expo Go 앱 (iOS)

---

프로젝트 초기 세팅

npx create-expo-app aja-aja
cd aja-aja
npx expo start

이때 expo start는 반드시 프로젝트 폴더 안에서 실행해야 함
터미널이 홈 경로 (~)에 있을 경우 expo not found 또는 App.js not found 등의 오류 발생

---

주요 오류와 해결법

1.JSX: type is invalid – got: object

원인:

• JPTimeToggle, CategorySelector 같은 컴포넌트 파일은 존재하지만 내용이 없는 빈 파일이었음
• 그 상태에서 import하면 React는 이를 object나 undefined로 인식
• JSX에서 <JPTimeToggle />처럼 객체를 태그로 쓰면 에러 발생

해결:

• JPTimeToggle.js 내부에 실제 React 함수형 컴포넌트를 작성

export default function JPTimeToggle() {
  return <View><Text>...</Text></View>;
}

---

2. VS Code에서는 코드가 보이는데 터미널에서는 cat 시 내용 없음

원인:

• VS Code에서 열었던 파일들이 저장되지 않은 임시 상태(메모리 상)로 남아 있었음
• Finder나 터미널에서는 디스크의 실제 파일만 읽기 때문에 내용이 안 보였던 것

해결:

• VS Code에서 모든 파일 ⌘ + S (저장) 진행
• 저장된 후 터미널에서 cat 파일명.js 입력하면 정상 출력됨

---

3. 패키지 충돌 (ERESOLVE)

원인:

• npm install 중 @types/react, react-native, @react-navigation/native 등 사이의 버전 충돌
• Expo SDK 버전과 맞지 않는 의존성 요구

해결:

npm install --legacy-peer-deps

또는

npm install [패키지명] --legacy-peer-deps

---

4. Unable to resolve module 또는 @react-navigation/native-stack 오류

원인:

• React Navigation 구성 중 일부 패키지가 설치되지 않았거나
• import만 했지만 expo install로 필요한 native 모듈을 설치하지 않음

해결:

npm install @react-navigation/native --legacy-peer-deps
npm install @react-navigation/native-stack --legacy-peer-deps
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

---

폴더 구조

aja-aja/
├── App.js
├── components/
│   ├── JPTimeToggle.js
│   ├── CategorySelector.js
│   └── TodoItem.js
├── screens/
│   └── HomeScreen.js
├── styles/
│   └── globalStyles.js

---

디버깅 팁

• console.log(typeof JPTimeToggle)을 찍으면 컴포넌트가 제대로 불러와졌는지 알 수 있음

  • function이면 정상
  • undefined 또는 object면 import/export 문제

• Expo CLI에서 j 눌러 브라우저 DevTools 열고 콘솔 로그 확인 가능

---

마무리

다음 목표는:

• 감성 UI 스타일링
• 할 일 체크 & 삭제
• J/P 토글로 플래너 스타일 전환
• 캘린더, 메모, 카테고리 등 확장