본문 바로가기

React 클론 코딩

2021년 5월 8일 React 클론 코딩 #2 how-is-d-weather(날씨 앱) 完

반응형

 

HA가 끝나고 soloday에 

 

앞으로 코드스테이츠가 진행되는 동안 무엇을 더 개인적으로 공부하면 좋을지에 대하여 생각하는 시간을 가졌고,

 

웹과 모바일 기기 상에서 움직이는 무엇인가를 vanilla javascript와 react로

 

구현하는 것을 공부해야겠다라고 결론을 내렸다. 

 

공부아니더라도 이해를 다 하지 못하더라도 따라하는 것이라도 계속 해보자라는 것.

 

그런 의미로 노마드코더 니꼬센세의 React Native로 날씨 앱을 구현하는 무료 인강을 보며 차근차근 따라가기 시작했다.

 

이 앱의 핵심은

 

모바일 기기의 위치(latitude, longitude)를 파악하여

 

날씨 API에서 날씨정보를 불러와 앱의 화면에 보여주는 것이다. 

 

내가 했던 것은 날씨 API에서 받아온 현재 날씨의 상태에 따라 어떻게 화면이 나타날지 정해주고 꾸미는 것이었다.

 

참고로 니꼬센세는 날씨의 배경에 LinearGradient를 사용하였지만 나는 그냥 단색으로 바꾸어 이를 적용시켰다.

 

처음으로 React가 아닌 React Native를 사용했는데 둘은 닮았지만 어떤 부분에서 전혀 닮지 않았다. 

 

가장 큰 차이점을 느낀 부분은 아래와 같다. 

 

  •  div 대신에 <View/>, <Text/>를 사용한다라는 것.
  • CSS대신에 StyleSheet를 import해주고 이를 사용해야된다라는 것.
  • CSS에서는 부모에게 font관련된 효과를 지정해주면 자식에게 상속되던 것들이 여기서는 안 통한다는 것.

되게 간단한 것을 구현하는 와중에 React Native에 굉장히 빠져들게 되었다. 

 

내가 폰으로 직접 만들어지는 과정을 테스트 할 수 있다는 점 때문일까?

 

하...너무 재밌었다. 

 

내가 제일 자주 사용하는 폰에서 내가 만든 것이 나오는 것이 이렇게 신세계라니!

 

나는 공부만 하라고하면 못한다. 

 

이렇게 눈에 보이는 뭔가를 하라고하면 흥미가 생겨서 하게된다. 

 

재밌는 나머지 다른 것들을 찾아보는데 

 

설명이 전부 Class Component를 기반으로 진행되고 있었다. 

 

그래 지금은 굳이 Class Component를 쓰지않아도 된다고 하지만

 

배워야 내가 좋아하는 것을 만드는데 도움이 될 것이다.

 

좋아하는 것을 위하여 공부하자. 

 

 

 

 

반응형