인프런 커뮤니티 질문&답변

확실히 expo 버전으로 프로젝트를 생성하면, 영상처럼 진행이 되지 않습니다 ㅠㅠ

프로젝트 설치 및 실행 과정은 다음과 같습니다.

기종: Android

1. npx create-expo-app <앱 이름> --template

2. 세 번째(blank) :typescript 선택

3. npx expo start를 실행

4. expo 앱에서 QR 코드로 보기

강의와 달리, expo로 빌드하셨다면

npx expo install expo-location를 설치해주신 다음에

useEffect 함수 부분을 다음과 같이 변경해주면 됩니다.
(Expo는 자체 위치 서비스 API를 제공하므로, @react-native-community/geolocation 대신 expo-location을 사용해야 합니다.)

useEffect(() => {
  const getLocation = async () => {
    try {
      // 위치 권한 요청
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setError('위치 권한이 거부되었습니다');
        setLoading(false);
        return;
      }

      // 현재 위치 가져오기
      let location = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = location.coords;
      fetchWeather(latitude, longitude);
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };

  getLocation();
}, []);

다음으로

OpenWeatherMap API는 기본적으로 켈빈 온도를 반환합니다. 따라서 섭씨로 변환하는 코드를 추가해야 합니다.

각자 가져오신 API 값 뒤에 &units=metirc 를 추가해주시면 됩니다.

전체 코드는 다음과 같습니다.

import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
import styled from 'styled-components/native';
import * as Location from 'expo-location';

const Container = styled.View`
  align-items: center;
  margin-top: 40px;
  background-color: #222222;
  flex: 1;
`;

const MainTemp = styled.Text`
  font-size: 80px;
  color: white;
`;

const Addition = styled.View`
  background-color: #aeaeae;
  width: 150px;
  height: 150px;
  margin: 15px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
`;

const App = () => {
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getLocation = async () => {
      try {
        // 위치 권한 요청
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setError('위치 권한이 거부되었습니다');
          setLoading(false);
          return;
        }

        let location = await Location.getCurrentPositionAsync({});
        const { latitude, longitude } = location.coords;
        fetchWeather(latitude, longitude);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    getLocation();
  }, []);

  const fetchWeather = async (latitude, longitude) => {
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=<<개인 API값>>&units=metric`
      );
// <<>>는 지우셔야 합니다.
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setWeatherData(data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Container>
        <ActivityIndicator size="large" color="#ffffff" />
      </Container>
    );
  }

  if (error) {
    return (
      <Container>
        <Text
          style={{ color: 'white', fontSize: 20 }}
        >{`Error: ${error}`}</Text>
      </Container>
    );
  }

  if (!weatherData) {
    return (
      <Container>
        <Text style={{ color: 'white', fontSize: 20 }}>No data available</Text>
      </Container>
    );
  }

  const {
    main: { temp, feels_like, humidity, temp_max, temp_min },
    wind: { speed },
    weather,
  } = weatherData;

  return (
    <Container>
      <StatusBar />
      <Text style={{ fontSize: 20, marginTop: 40, color: 'white' }}>
        {weatherData.name}
      </Text>
      <MainTemp>{Math.round(temp)}℃</MainTemp>
      <Text style={{ fontSize: 24, color: 'white' }}>{weather[0].main}</Text>

      <View style={{ flexDirection: 'row' }}>
        <Addition>
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              marginTop: -40,
              marginBottom: 30,
            }}
          >
            체감 온도
          </Text>
          <Text style={{ color: 'white', fontSize: 18 }}>
            {Math.round(feels_like)}℃
          </Text>
        </Addition>
        <Addition>
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              marginTop: -40,
              marginBottom: 30,
            }}
          >
            습도
          </Text>
          <Text style={{ color: 'white', fontSize: 18 }}>{humidity}%</Text>
        </Addition>
      </View>

      <View style={{ flexDirection: 'row' }}>
        <Addition>
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              marginTop: -40,
              marginBottom: 30,
            }}
          >
            최고/최저 온도
          </Text>
          <Text style={{ color: 'white', fontSize: 18 }}>
            {Math.round(temp_max)}℃/{Math.round(temp_min)}℃
          </Text>
        </Addition>
        <Addition>
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              marginTop: -40,
              marginBottom: 30,
            }}
          >
            풍속
          </Text>
          <Text style={{ color: 'white', fontSize: 18 }}>{speed} m/s</Text>
        </Addition>
      </View>
      <View></View>
    </Container>
  );
};

export default App;