본문 바로가기

APP/React Native6

[React Native] 지역 날씨 어플 만들기 3부 (NomadCoder) [React Native] 지역 날씨 어플 만들기 3부 (NomadCoder) 지난 게시물을 통해서 Expo-location API를 이용하여 도시 지역 정보를 받아와 적용해 보았다. 혹시 아직 이전 게시물들을 못 봤다면 아래 링크를 타고 보고 와주세요 🙏지역 날씨 어플 만들기 2부2024.08.14 - [APP/React Native] - [React Native] 지역 날씨 어플 만들기 2부 (NomadCoder RN) [React Native] 지역 날씨 어플 만들기 2부 (NomadCoder RN)[React Native] 지역 날씨 어플 만들기 2부 (NomadCoder RN) 지역 날씨 어플의 레이아웃, 외관을 1부에 만들어 보았다. 혹시 아직 1부를 못 봤다면 아래 링크를 타고 보고 와주세.. 2024. 8. 14.
[React Native] 지역 날씨 어플 만들기 2부 (NomadCoder RN) [React Native] 지역 날씨 어플 만들기 2부 (NomadCoder RN) 지역 날씨 어플의 레이아웃, 외관을 1부에 만들어 보았다. 혹시 아직 1부를 못 봤다면 아래 링크를 타고 보고 와주세요 🙏지역 날씨 어플 만들기 1부2024.08.14 - [APP/React Native] - [React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN) [React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN)[React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN) 오늘은 NomadCoder의 무료 강의 React Native 강의를 보며 weather app 을 만들어 보았다. 지역 날씨 어플 개요지역 날씨 어플의 레이아웃은 상.. 2024. 8. 14.
[React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN) [React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN) 오늘은 NomadCoder의 무료 강의 React Native 강의를 보며 weather app 을 만들어 보았다. 지역 날씨 어플 개요지역 날씨 어플의 레이아웃은 상단부에 지역이름 (location) 을, 3시간 간격의 어플의 중단~하단 부분을 온도(temp) 와 태풍, 천둥번개, 비, 화창함 등과 같은 날씨 (description) 정보들을 보여주고 있다. 지역 날씨 어플의 최종 화면은 다음과 같다. 이 지역 날씨 어플을 만들기 위한 코드를 리뷰하려 한다. 코드 리뷰 1 : 레이아웃 만들기전반적인 컴포넌트들은 전체적인 화면 부모 View 안에 지역 이름 View 와 날씨정보 View 로 나눌 수 있다.import { .. 2024. 8. 14.
[React Native] 레이아웃 시스템 [React Native] 레이아웃 시스템레이아웃 시스템 (Layout System)페이지 레이아웃(layout, 배치라는 뜻)은 사전적으로 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성 요소를 제한된 공간 안에서 효과적으로 배열하는 일을 말한다. RN(React Native) 에서 레이아웃을 만들려면 Flexbox 를 사용해야 한다.Flexbox는 몇 예외를 제외하고는 웹과 거의 비슷한 방식이다. RN에서는 display : block, inline-block, grid 과 같은 속성들을 사용할 수 없다. 웹의 Flexbox와 다른 점은 기본적으로 모든 View 가 " Flex Container " 이다. 웹에서는 부모가 flex로 지정이 되어 있어야 자식 컴포넌트들도 flex 속성을 줄 수 .. 2024. 8. 13.
[React Native] React Native 패키지와 외부 패키지 [React Native] React Native 패키지와 외부 패키지  React Native 컴포넌트 패키지React Native에서 제공하는 컴포넌트, Api 들을 말한다. RN (React Native) 초기에는 개발자들에게 기본적으로 최대한 많은 API와 컴포넌트들을 제공하고 싶어하여 수많은 패키지를 제공하였다. 하지만 많은 API와 컴포넌트들을 제공하는 탓에 많은 버그들과 느린 사용속도가 단점이었다. 이를 개선하여 안정적이고 빠른 개발을 위해 필수적인 컴포넌트와 API들만 남기고 모두 외부 패키지로 대체하였다.여기서 남은 패키지들을 RN의 개발 홈페이지에서 볼 수 있다. 컴포넌트 : https://reactnative.dev/docs/components-and-apis Core Componen.. 2024. 8. 13.
[React Native] Expo로 간단하게 React Native App 만들기 [React Native] Expo로 간단하게 React Native App 만들기React Native모바일 어플리케이션을 만들 때 다양한 방식으로 만들 수 있는데 그 방법 중 하나가 React Native 이다. 페이스북의 지원을 받는 React의 문법으로 안드로이드, iOS 앱을 개발할 수 있는 프레임 워크이다. React와 거의 유사한 문법을 가지고 있다. ExpoExpo는 React Native를 베이스로 ios, 안드로이드, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있도록 도와주는 프레임워크이다. 이는 React Native 공부용이거나 간단한 프로젝트 정도면은 사용하기 좋은 프레임워크이다. eject를 반드시 하여 서비스를 출시하고 싶다면 Expo 대신 " react-native-cli " .. 2024. 8. 12.