코딩 대장

출력해주는 코드부터 바로 보여주자면 다음과 같다.

코드를 하나 하나 설명하자면 다음과 같다. 큰 컨테이너 안에 만약 load가 완료되었다면 Weather을 출력해준다. 그렇지 않다면 그렇지 않은 동안 로딩 화면 출력. 이 때 가져오는 온도 값이 켈빈 값이라서 도씨로 바꿔주었다. 만약 위치를 가져오는데서 에러가 났다면 로딩 화면 바닥에 왜 에러가 났는지, 에러 텍스트를 출력해주게 된다.

그렇다면 이제 날씨 정보와 온도를 가져왔으니 가져온 변수를 넣어줘야 한다!!

날씨 경우의 수는 다음과 같이 뒀다. Rain, Clear, Thunderstorm, clouds, snow, drizzle! 그리고 바꿔준 Weather function은 다음과 같다.

달라진 부분이라면 weathername과 temp로 변수를 가져온다는거?! 근데 거의 달라진 점없음!! 이렇게 하면 완전완전 끝난거다. 완성된 화면은.. 앞에서 보여줬던 화면과 다를바가 없다... ㅋㅋㅋㅋㅋㅋㅋ 여튼 또 하나 어플리케이션을 완성하였다 ㅎㅎ 뿌듯뿌듯!0!

우선 만들었던 weather 파일을 읽어오기 위해서는 import 해주는 것이 필요하다!

필요한 state는 다음과 같다.

위치 정보를 가져올 때, 에러는 없었는지. 날씨가 정상적으로 로드되었는지. 로드 되었다면 날씨는 무엇이고 (name), 온도는 몇 도 (temperature) 인지! 위치는 ios에서 그대로 받아올 수 있다.

사용한 오픈 API는 openweathermap인데, 사용 방법은 사이트에 더 자세하게 적혀있다. 로그인하고 구독하면 API 받아올 수 있음 ㅇㅇ! 저기 appid 부분이 키값이 된다. 주의사항 .. '쓰면 안되고 `써야한다! 주소 안에 변수를 넣어주기 때문에..!!

내보내는 부분은 그닥 달라진 점이 없다. load되면 state 받아오고 끝!! 다음 강의는 .. 이제 weather과 연결해주는 작업만 남았다! 클론 코딩이 진짜 좋은게 뚝딱뚝딱 진짜 만들어지는게 보이니까 흥미도 생기고 완성할 때 뿌듯하고 그렇다. 그리고 무엇보다 재밌음!! 강의 듣길 정말 정말 잘한 것 같다..

흐음... 사실 어플리케이션을 다 만들었는데, 포스팅을 미루다 보니 어디 부분을 어떻게 만들었었는지 조금 까먹었다ㅠㅠ

앞으로는 만들고 바로 바로 포스팅을 ...

아무튼 지난 시간에 로딩화면 만들기를 성공하였다! 이제 날씨 화면 만들기!!

우리가 만들 날씨 화면은 다음과 같다. 구성을 살펴보자. 아이콘 + 온도 + main title + subtitle로 이루어져 있다.

우선 새로운 파일을 추가해줘야 한다. 이름은 weather.js로 만들어 주었다.

디자인부터 먼저 해보자면, 다음과 같이 코드를 구성해주면 된다.

upper 부분이 아이콘과 온도가 들어갈 부분이 되고, lower 부분이 title이 들어갈 부분이 된다. 둘의 비율은 같게 해줄 것이므로 flex를 1로 준다. flex가 큰 부분이 더 큰 비율을 차지하게 된다고 생각하면 된다!

아이콘은 다음과 같은 라이브러리를 추가해주면 된다! 엑스포에서 제공하는 아이콘인데, 여기 있는 아이콘 이름을 넣어주면 아이콘을 바로 사용할 수 있다. 사이트는 여기다!

https://expo.github.io/vector-icons/

(linear gradient 사용하면 색깔 지정할 때, 그라데이션 줄 수 있다!)

자 이제 구성만 해주면 된다!

colors 부분은 저렇게 만들면 첫번째 색깔부터 두번째 색깔까지 자연스럽게 그라데이션이 된다. 같은 크기를 가지는 view를 두 개 주고, 첫 번째 view안에는 icon과 text를 넣어주었다. 이때 여기 오는 text가 온도를 나타내는 text가 된다!

두 번째 view에는 maintitle과 subtitle을 text로 줬다. 실행해보면 잘 동작하는 것을 확인할 수 있다!

영화 웹페이지를 만들 때처럼, 우선 우리에게 필요한 것은 기동 시 대기 시간 동안 출력되는 화면이다.

다음과 같이 state를 만들어 준다. 만약 load가 완료되었다면, 우리는 정상적인 날씨 화면을 출력할 것이다. 만약 load가 완료되지 않았다면?? => 로딩 화면을 띄워줌.

로딩 화면은 다음과 같다. 우선 state를 정해 주고, 만약 load가 되었다면? Getting the fucking weather 출력해준다. 출력해줄 텍스트와 화면을 모두 js 파일 내부에서 만들어 주는데 이 부분이 신기했다. css와 비슷한데 다른 느낌?!

그리고 나서 save해주면, 핸드폰과 내가 만들고 있는 코드가 터널로 연결되어 있다면 expo앱에서 다음과 같은 화면을 확인할 수 있다.!

진짜 재밌다.. 빨리 다 보고 다른 어플리케이션 만드는 것도 배워서 내가 만들고 싶은 어플리케이션을 만들 수 있게되면 좋겠다.. ㅠㅠ!!

하.. 일단 노마드코더 강의에서는 맥OS를 사용하는데 윈도우라서 너무 힘들었다ㅠㅠㅠ

어떻게 어떻게 nodejs랑 npm 업데이트하고 choco깔고 명령어 한 줄 치고 에러 수정하고.. 하다보니 결국 됐다!!

리액트 네이티브란 네이티브 웹앱을 만들기 위한 UI 라이브러리다. 리액트 네이티브를 이용해서 jsx, javaScript로 쓴 코드를 objective c나 java로 바꿔줄 수 있다. 인스타그램, 에어비앤비, 페이스북 등의 많은 글로벌 기업들이 리액트 네이티브를 사용해서 어플리케이션을 만들고 있다는 사실!! 웹사이트를 개발하는 것 처럼 쉽게 어플리케이션을 개발할 수 있기 때문에 많이 사용된다.

사실 나도 안드로이드 스튜디오 써봤는데 진짜 힘들었다. 에뮬레이터는 왤케 느리며.. 일단 코드 짜는건 그렇게 어렵진 않은데 너.무. 느리다.. 

시뮬레이터는 Expo.io를 이용해서 돌려본다. xcode나 안드로이드 스튜디오 없이 핸드폰만 연동시켜주면 코드를 수정할 때마다 바로 바로 빠르게 시뮬레이터를 사용할 수 있다. 컴퓨터에서 코드를 수정하면 자동으로 핸드폰에서 어플리케이션이 세이브되기 때문에 간편하다.

https://expo.io/

expo를 설치하는 방법은 다음과 같다. 우선 node js와 react native를 설치해주고 터미널 창에서

npm install expo-cli --global

expo init my-new-project
cd my-new-project
expo start

이렇게 쳐주기만 하면 된다! expo init my-new-project 이 단계에서 blank, tap이 있는데 나는 blank를 선택해 주었고, 만약 하단 네비가 필요하면 tap?을 선택하면 된다.

그러고 나서 vscode에서 내가 만든 프로젝트를 열어주고, expo start를 통해 터널이 열리면 qrcode가 뜰것이다. 아 맞다. 사용할 핸드폰에서 expo 어플리케이션도 설치해 줘야함ㅇㅇ. 그러고 나서 qrcode를 핸드폰에서 찍어주면 프로젝트가 핸드폰에서 자동으로 빌드된다!!

빌드된 화면.

만약, vscode에서 수정한다면?

이렇게 바로 수정됨. 개쩜..

여튼 앞으로 이걸 활용해서 날씨 앱을 만들어 보겠다ㅎㅎ 자세한 강의는 여기에서 들을 수 있따. 모두 리액트의 고수가 되는 그날까지.......

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C/dashboard