코딩 무지랭이가 쓰고 싶어서 만드는 날씨 어플

비전공자이지만 취미로 가볍게 시작했다가 빠져들고만 코딩, 개발 ...

그래서 무언갈 만들어보고 싶은데 쉽사리 시작되지 않아서 ... '어디 한번 내가 하루 1달러만 버는 어플리케이션을 만들어보자!'

 

---

 

비전공자인 내가 어떻게 개발을 할 수 있을까 .. ??

 

국비지원으로 어플리케이션 만들기 강의를 한번 수강하고

챗GPT 유행일때 조코딩의 챗봇 강의를 하나 들어보고 만들어본게 전부인 나는

 

요즘 유행하는 인공지능 AI 챗GPT로 한번 새로운 경험을 해보자는 취지로 이 프로젝트를 생각하게 되었다

 

---

 

우선 개발을 하려면 가장 먼저 초기 세팅이자 '개발환경설정' 을 해야 한다고 생각했습니다

 

개발 업계에서 경험은 없지만 각종 커뮤니티나 관련 내용들을 보다보면 신입이 가장먼저 하는 '개발환경설정'을 위해 챗GPT에게 방법을 물어보았다

그리고 알려주는대로 진행을 해보다보니 맥북 사용자인 나는 처음 부터 막히는 상황이 발생했다

개발 환경 설정
* Node.js 설치: React Native는 Node.js와 함께 사용됩니다. Node.js 공식 웹사이트에서 Node.js를 설치하세요.
* React Native CLI 설치: VS Code 터미널에서 아래 명령어를 사용하여 React Native CLI를 설치합니다.
     bash
     npm install -g react-native-cli
* Expo 설치 (선택사항): Expo는 개발 속도를 높이고, 더 쉽게 개발을 시작할 수 있게 도와줍니다. 터미널에 아래 명령어를 입력하세요.
     bash
     npm install -g expo-cli

하지만 위와 같이 입력하면 엄청난 에러가 발생하게 되고 이유를 모르는 나는 챗GPT에게 다시 문의하여 방법을 찾아보게 되었다

 

그럴땐 sudo 명령어를 사용하라!!!

관리자 권한으로 전환해주는 sudo 명령어를 사용하여 비밀번호를 입력하고 사용한다

     npm install -g react-native-cli

명령어는 동일하지만 sudo npm install -g react-native-cli 를 추가하는 형식이다!

 

그렇게 챗GPT가 알려준 순서는 다음과 같다

개발환경설정 > 프로젝트설정 > 필요한패키지설치 > OpenWeatherMap API 설정 > 코드설정

 

그 중 개발환경설정에서 부터 막혀서 관리자 명령어로 설정하고 이제 프로젝트를 설정해보자!

프로젝트 생성
* 터미널에서 React Native 프로젝트를 생성하세요.
     bash
     npx react-native init WeatherApp
* 또는 Expo를 사용할 경우:
     bash
     expo init WeatherApp
* WeatherApp 폴더로 이동하고, VS Code로 프로젝트를 열어주세요.
     bash
     cd WeatherApp
     code .

마찬가지로 명령어 작성 시 에러가 발생하면 아시죠?

필요한 패키지 설치
* 날씨 API 호출을 위해 Axios를 설치합니다.
     bash
     npm install axios
* 위치 기반 서비스를 사용하기 위해 Expo를 사용하는 경우, expo-location 라이브러리를 설치합니다.
     bash
     expo install expo-location

 

이제 앱(App)을 만들기 위한 기본적인 개발환경과 프로젝트 및 필요 패키지 설정이 완료되었습니다

 

그러면 저는 이번에 날씨 앱을 만들기 위한 API를 설정하려고 합니다

바로 시작해보시죠!

OpenWeatherMap API 설정
* OpenWeatherMap에 가입하고, API 키를 생성하세요. (링크 : https://openweathermap.org/)
* API 키는 앱에서 날씨 데이터를 가져오는 데 필요합니다. 앱에서 사용할 환경 변수를 만들어서 보안성을 높일 수 있어요.

해당 링크로 가서 무료 API 키를 다운로드하기 위해 방문하여 이메일 인증을 합니다

그러면 해당 인증을 거쳐 API키를 생성 받을 수 있습니다

 

그리고 마지막 코드 작성으로 넘어갑니다!!!

 

휴 이로써 기본적인 세팅이 끝이 났네요!

이제 하나씩 하나씩 단계를 넘어가면서 어플리케이션이 어떻게 생성되는지 알아봅시다!