노마드 코더 REACT NATIVE 강의 정리 2

https://nomadcoders.co/react-native-for-beginners

왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders

 

노마드코더 리액트 네이티브 강의 보고 요약정리

 

 

Snack

 

https://snack.expo.dev

Snack - React Native in the browser

 

웹 브라우저에서 React Native 애플리케이션을 쉽게 만들고 미리보기 할 수 있는 웹사이트

 

리액트 네이티브의 기본 규칙

• 리액트 네이티브는 웹이 아니므로 div 대신 view를 사용해야 한다.
• 모든 텍스트는 text 컴포넌트 안에 포함되어야 하며, span이나 p 태그는 사용할 수 없다.
• 스타일은 stylesheet.create를 사용하거나 객체 형태로 작성할 수 있으며, 후자는 자동 완성 기능이 제공되지 않는다.
• 상태 바(status bar)는 별도의 컴포넌트로, 실제 화면에 표시되지 않고 운영체제와의 인터페이스 역할을 한다.
• 리액트 네이티브는 스타일 오류를 즉시 알려주는 기능이 있어 디버깅이 용이하다.

 

React Native Packages

 

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

 

• 리액트 네이티브는 다양한 컴포넌트를 제공했었지만 많은 버그와 유지 관리의 어려움으로 인해 필수적인 것들로 축소되었다.
• 다른 기능은 커뮤니티 패키지를 통해 외부에서 사용해야 한다. (expo)

 

Third Party Packages

 

https://docs.expo.dev/versions/latest/

Reference

• 컴포넌트와 API의 차이: 컴포넌트는 화면에 렌더링되는 요소이고, API는 자바스크립트 코드로 OS와 통신하는 기능.
• Expo는 필요한 API와 패키지를 직접 제공하여 개발자들이 쉽게 사용할 수 있도록 지원한다.

 

Layout System

 

• 리액트 네이티브는 기본적으로 모든 뷰가 플렉스 컨테이너.
• 기본 플렉스 방향은 웹과 달리 열(column).
• 레이아웃은 고정된 너비와 높이 대신 비율을 사용하여 구성.

 

icon

 

https://icons.expo.fyi/

@expo/vector-icons directory

 

 

날씨 앱 실습

 

const getWeather = async () => {
    const { granted } = await Location.requestForegroundPermissionsAsync();
    if (!granted) {
      setOk(false);
    }
    const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({ accuracy: 5 })
    const location = await Location.reverseGeocodeAsync({ latitude, longitude })
    setCity(location[0].city)
    const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&APPID=${API_KEY}&units=metric`);
    const json = await response.json();
    setDays(
      json.list.filter((weather) => {
        if (weather.dt_txt.includes("03:00:00")) {
          return weather;
        }
      })
    );

 

영상이 2년전 이라 api가 좀 달라져서 다르게 작성했다. 

완성된 어플 모습

귀찮아서 css는 대충했다.

강의보면서 작성한 코드는 깃허브에 올렸다.

https://github.com/sjpark1120/nomad_react_native

GitHub - sjpark1120/nomad_react_native: 노마드코더 리액트네이티브 강의들으며..