투두 날씨 - 개발 회고 (3)

 그리하여 expo 를 배우고, 최애 취미 중 하나인 골프 란딩 때 날씨 확인하는 게 무척 번거로웠던 기억을 살려서 주소를 몰라도 63빌딩 (옛날 사람... 63스퀘어가 정식 명칭이라는 걸 최근에서야 깨닫...) 을 검색하면 그 위치 날씨가 바로 쫙쫙 나오는 게 있으면 좋겠다는 생각을 갖고 있었습니다. 거기에 앱 개발을 처음 시작하면 대체적으로 투두리스트를 만드는 것 같더군요. 요건 란딩 일정 관리에도 쓸 수 있겠고 마침 회사를 나오니 사용하던 아웃룩의 일정을 사용하지 못하게 되었습니다. 지메일 일정 관리는 이상하게 눈에 안 들어와서 개인 일정 관리를 할 수 있는 뭔가 있어야겠다는 찰나이기도 했습니다. 그래서 간단한 일정과 날씨를 연동한 앱을 만들기로 마음을 먹었습니다.

 

  처음에는 인강에서 가르켜준 openWeatherMap 이라는 영국 소재 기업의 조건부 무료 날씨 API 를 사용해서 현재 위치의 날씨를 가져오는 기능을 만들기 시작했습니다. 

 

---

 const permissions = await Location.requestForegroundPermissionsAsync();

 

            if (permissions.status == "granted") {

                //await Location.requestPermissionsAsync();

                

              //  console.log(`granted`)

                const locationData= await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.High});

                console.log(`loc date : ${JSON.stringify(locationData)}`)

 

                const latitude = locationData['coords']['latitude']

                const longitude = locationData['coords']['longitude']

 

                console.log(`lat : ${latitude} lon : ${longitude} in granted block`)

                let locName = await Location.reverseGeocodeAsync({latitude:latitude, longitude:longitude});

                setLocation(locName[0].street);

                console.log(locName);

 

...

          const requestURL = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=kr`

 

            const result = await axios.get(requestURL);      

---

 

 그리고, AyncStorage / State 를 사용해서 입력한 투두를 저장하고 편집하고 삭제할 수 있는 기능들을 구현하기 시작했습니다. Expo / React 는 state 기반이어서 투두 항목을 state 관리 하면 state 가 변하면 useEffect 를 써서 화면을 다시 그릴 수 있습니다. 예를 들어 아래와 같이 todos 가 변하면 save 되게 함수를 작성하면 todos 항목이 변할 때 저장을 하고 화면을 다시 그려주게 됩니다.

 

   const [todos, setTodo] = useState([])

 

    useEffect(() => {

       saveData();

      

    },[todos, sortOrder])

 

 물론, 처음에 삽질을 많이 하긴 했습니다. 구글링을 하면서 todo 관리 기능과 state 관리, useEffect 에 넣었는데 화면 업뎃이 안되서 고생을 좀 했던 기억이 나네요. 투두날씨는 hook 으로 개발했지만 react 에 관심이 있다면 아래 링크를 읽어보는 게 도움이 됩니다. 

ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

 어디서 만들어 준 언어를 사용한다면 그 언어 룰에 맞춰야 하는데 개발을 하다보면 나도 모르게 내가 이해했던 것에 맞춰서 오류를 만들곤 합니다. 이해를 잘했다면 문제가 없지만 이해를 잘못했다면 곧바로 시간 낭비로 이어집니다. 예전에 들은 얘기 중에 '세상에 개발자는 둘로 나뉜다. API 를 만드는자, 만들어진 API를 가져다 쓰는자...대부분은 후자이다.. -_-' 현실이 그러하니 만들어주신 틀에 맞춰서 몸을 맞춰야겠지요..

 

투두날씨 초기 버전

 

play.google.com/store/apps/details?id=com.appswayd.todoWeatherKR

투두 날씨 - Google Play 앱

https://apps.apple.com/kr/app/%ED%88%AC%EB%91%90-%EB%82%A0%EC%94%A8/id1553218120

‎투두 날씨