Cursor와 함께 하루 만에 날씨 앱까지 만들어버린 이야기

Cursor와 함께 하루 만에 날씨 앱까지 만들어버린 이야기

2026. 2. 20. 22:49ㆍ개발자 생활

React Native, 하루 만에 날씨 앱까지 만들어버린 이야기

얼마 전에 "IDE를 바꿨더니 생활이 바뀌었다"라는 글을 쓰면서 이런 이야기를 했었다.

"모르는 기술로도 뭔가를 만들 수 있게 되었다."

솔직히 쓸 때는 좀 과장이었나 싶기도 했다. 근데 오늘 직접 해봤다. React Native 한 번도 안 해본 웹 개발자가, Cursor랑 같이 하루 만에 날씨 앱을 만들어버렸다. 진짜 됐다. 물론 이미 오래전 부터 React를 해왔기 때문에 아예 모른다고 할 수는 없지만..

왜 React Native?

웹 개발자라면 한 번쯤 이런 생각 해봤을 거다. "나도 앱 하나 만들어보고 싶다." 근데 Swift 배우기엔 너무 먼 길이고, Kotlin도 마찬가지고.. 그러다 항상 "다음에"로 미뤄두게 된다. 솔직히 이제는 새로운 언어를 배워야 하는지도 의문이긴 하다.

React Native는 이름에서 느껴지듯이 React를 아는 사람한테 진입장벽이 낮다고 한다. 거기에 Expo라는 녀석이 있으면 네이티브 설정 없이도 바로 앱을 돌려볼 수 있다고. 예전에 Android SDK 로 빌드하던.. 그런 시절의 개발환경이 아니었다. 완전 축복인 시대..

그래서 오늘 한번 해봤다. Cursor한테 "React Native로 모바일 앱 만들어보고 싶어"라고 던졌더니, 바로 Expo 프로젝트를 세팅해줬다.

Expo가 뭔데?

Expo는 React Native 위에 올라가는 프레임워크인데, 쉽게 말하면 React Native의 Next.js 같은 존재다. 네이티브 빌드 설정? Xcode 삽질? 그런 거 없이 npm start 하면 바로 앱이 뜬다.

npx create-expo-app my-first-mobile-app
cd my-first-mobile-app
npm start

이게 끝이다. QR코드가 뜨는데, 폰에 Expo Go 앱 깔고 스캔하면 내 폰에서 바로 돌아간다. 이게 되네? 싶었다. ㅋㅋ

파일 기반 라우팅도 지원해서, app/ 폴더에 파일 만들면 그게 곧 화면이 된다. Next.js 써본 사람이라면 완전 익숙한 구조다.

일단 만들어봐

Cursor한테 단계별로 하나씩 만들어달라고 했다. "처음이니까 쉬운 거부터 갈게."

1단계: 프로필 카드

첫 번째는 프로필 카드. View, Text, Image, StyleSheet 같은 기본 컴포넌트로 화면을 구성하는 거다.

여기서 첫 번째 충격이 왔다. <div> 대신 <View>, <p> 대신 <Text>. CSS 대신 StyleSheet.create(). 얼핏 보면 다른 세계 같은데, 써보면 React랑 거의 똑같다. useState, props, 컴포넌트 분리.. 이런 개념은 그대로..

2단계: 카운터

두 번째는 버튼 클릭 카운터. useState로 상태 관리하고, Pressable로 버튼을 만든다. 웹에서 <button onClick>이 여기서는 <Pressable onPress>가 되는 거다.

const [count, setCount] = useState(0);
const [step, setStep] = useState(1);

const increment = () => setCount((prev) => prev + step);
const decrement = () => setCount((prev) => prev - step);

증감 단위도 선택할 수 있게 만들었는데, 이건 그냥 React 앱 만들 때랑 완전 똑같은 패턴이다. "아, 진짜 React 아는 사람한테 유리하긴 하구나" 싶었다.

3단계: 화면 전환

Expo Router로 화면 전환을 구현했다. 프로필 카드를 누르면 상세 화면으로 이동하는 건데, router.push()에 파라미터를 넘기고 useLocalSearchParams()로 받으면 끝.

router.push({
  pathname: '/profile-detail',
  params: { name, bio },
});

Next.js의 useRouter랑 useSearchParams 조합이랑 거의 같다. 여기까지 오니까 "이거 웹이랑 뭐가 다른 거지?" 싶은 느낌이 슬슬 들기 시작했다.

날씨 앱, 진짜 되네?

여기서부터가 진짜 재밌었다. "날씨 앱 만들어보자"라고 했더니 Cursor가 Open-Meteo라는 무료 날씨 API를 추천해줬다. API 키도 필요 없다. 무료다. 핵감사..

TanStack Query로 데이터 관리

날씨 데이터를 가져오는 건 그냥 fetch로도 되지만, 캐싱이랑 자동 갱신까지 하고 싶어서 TanStack Query를 붙였다.

const { data, isLoading, error, refetch } = useQuery({
  queryKey: ['weather', location?.latitude, location?.longitude],
  queryFn: () => fetchWeather(location!.latitude, location!.longitude),
  enabled: !!location,
  staleTime: 5 * 60 * 1000,
  refetchInterval: 10 * 60 * 1000,
});

queryKey에 위도/경도를 넣어서 위치가 바뀌면 자동으로 새 데이터를 가져온다. staleTime은 5분, refetchInterval은 10분. 이것도 웹에서 TanStack Query 쓰던 것과 완전히 동일한 패턴이다.

Pull to Refresh도 붙였다. ScrollView에 RefreshControl을 달아주면 되는데, 당겨서 새로고침하는 그 모바일스러운 UX가 생각보다 쉽게 구현된다. 아무말이나 지껄여도 AI가 "아 그거 좋은 생각이군요!" 하면서 내가 원하는대로 이것저것 만들어 준다.

위치 기반 날씨 조회

진짜 재밌었던 건 디바이스 위치를 가져오는 부분이다. expo-location을 쓰면 되는데, 문제는 웹에서도 돌아가게 해야 한다는 거. 그래서 커스텀 훅으로 플랫폼별 분기를 만들었다.

useEffect(() => {
  if (Platform.OS === 'web') {
    getWebLocation(setLocation, setError, setStatus);
  } else {
    getNativeLocation(setLocation, setError, setStatus);
  }
}, []);

네이티브에서는 expo-location의 reverseGeocodeAsync()로 좌표를 도시명으로 바꾸고, 웹에서는 Nominatim API(OpenStreetMap)를 쓴다. 위치 권한이 거부되면 서울 좌표를 기본값으로 사용하는 폴백도 넣었다.

이 부분은 Cursor가 많이 도와줬다. "웹이랑 네이티브에서 위치 가져오는 방식이 다르니까 분기 처리해줘"라고 했더니 Platform.OS로 깔끔하게 나눠줬다.

EAS 빌드까지

여기서 끝이 아니다. 실제로 APK를 빌드해봤다. Expo에는 EAS(Expo Application Services)라는 클라우드 빌드 서비스가 있다.

eas build --platform android --profile preview

이 한 줄이면 클라우드에서 APK를 만들어준다. 로컬에 Android Studio가 없어도 된다. 빌드가 끝나면 다운로드 링크가 나오는데, 그걸 폰에 설치하면 진짜 내가 만든 앱이 돌아간다. 이 순간 좀 감동이었다 솔직히. ㅋㅋ

React vs React Native, 뭐가 다를까

하루 써보고 느낀 차이점을 정리해보면:

웹 (React)	모바일 (React Native)
`<div>`, `<span>`, `<p>`	`<View>`, `<Text>`
CSS / styled-components	`StyleSheet.create()`
`<button onClick>`	`<Pressable onPress>`
`overflow: scroll`	`<ScrollView>`
`window.location`	`router.push()`
`navigator.geolocation`	`expo-location`

다른 점: HTML 태그 대신 React Native 컴포넌트를 쓰고, CSS 대신 StyleSheet을 쓴다.

같은 점: useState, useEffect, props, 컴포넌트 구조, TanStack Query 같은 생태계 라이브러리.. 핵심 패턴은 전부 똑같다.

결론적으로 React를 아는 사람이라면 "이름만 다르고 하는 짓은 비슷하네" 싶을 거다.

하루를 마치며

오늘 하루 동안 만든 것들을 정리하면:

프로필 카드 - 기본 컴포넌트와 스타일링
카운터 - 상태 관리와 이벤트 핸들링
화면 전환 - Expo Router와 네비게이션
날씨 앱 - API 호출, 위치 권한, TanStack Query, Pull to Refresh
EAS 빌드 - 실제 APK 생성

Cursor 없이 이걸 하루 만에 했을까? 솔직히 못 했을 것 같다. 모르는 게 생길 때마다 바로바로 물어보고, 코드 뼈대를 만들어주니까 거기서 이해하면서 고쳐나가는 방식이 꽤 효율적이었다.

다만 한 가지. AI가 만들어준 코드를 그냥 넘기지 않고, "이 코드가 왜 이렇게 동작하는 거지?" 하고 파고드는 과정은 여전히 내 몫이다. 빠르게 만드는 건 AI가 도와주지만, 깊이는 결국 내가 채워야 한다.

여튼 React Native, 생각보다 할 만하다. React 하는 사람이라면 한번 해봐도 좋을 듯.

저작자표시 (새창열림)

Mr.Tint