초보개발자의 소소한 기록

본 게시글에서는 우리나라 주변 바다의 위치의 좌표를 저장 후, weather API 로 날씨 정보를 읽어와 FlatList 로 표현한다. * 공공데이터 포털 : https://www.data.go.kr/index.do * 기상청 일일예보 : https://www.weather.go.kr/w/ocean/forecast/daily-forecast.do 1. 날씨를 확인할 위치 설정 및 Data.js 파일을 생성하여 좌표값 저장 * 기상청 지도에서 대략적인 해양 경계범위를 확인하고, 구글 지도에서 좌표를 가져옴 * 실제 프로젝트를 진행하면 DB를 별도로 구성하지만, react native 공부 목적으로 소스 내에 위치 정보를 저장함 # screens > WeatherData > Data.js export co..

본 게시글에서는 Open API 를 호출해 날씨 데이터를 읽어온다. 1. API request 를 위해 axios module 추가 * 참고 : https://www.npmjs.com/package/axios yarn add axios 2. weather API 호출 규격 및 개인 key 확인 * weather API : https://openweathermap.org/current * [Home > API > Current Weather Data] 확인 시, 좌표값으로 날씨 정보를 읽어 올 수 있는 규격 있음 * 회원가입 후 [Home > My API keys] 에서 개인 key 확인 가능 3. weather API 테스트 * isLoading || error = true 일 때, 별도로 를 구성하여 ..

본 게시글에서는 Google Maps 를 호출해 화면에 보여주도록 한다. 1. Google Maps 를 불러올 module 추가 * react-native-maps : https://github.com/react-native-maps/react-native-maps yarn add react-native-maps 2. 관련 소스를 추가 * initialRegion : 지도의 초기 좌표값이며, 우리나라가 한 화면에 담기도록 latitudeDelta, longitudeDelta 값을 5로 조정함 * 좌표값은 Google Maps 에서 확인 가능 * useState 참고 : https://ko.reactjs.org/docs/hooks-reference.html * provider={PROVIDER_GOOGLE..

본 게시글에서는 홈 화면 구성 시, 이미지를 읽어와 홈 화면에 보여주도록 한다. * 무료 사진 다운 : https://pixabay.com/ko/ * resize-mode : https://reactnative.dev/docs/image#resizemode * css 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/flex 1. 사진 다운로드 후 저장 # assets > images 2. 저장된 사진 2장을 불러와 1:1 비율로 배치 * 화면을 구성하는 부분과 css 로 꾸며주는 부분을 분리하여, 각각 작성하면 유지보수에 용이함 * : 전체 화면 틀 * : require() 사용하여 이미지를 읽어옴 * resize-mode 를 이용하여 크기가 다른 사진을 알맞게..

본 게시글에서는 Bottom Tabs에 label 대신 icon 으로 변경 하도록 한다. 1. 다양한 icon을 사용할 수 있는 @expo/vector-icons module 추가 yarn add @expo/vector-icons 2. Tab navigation 의 options 값으로 icon 추가 * 참고 : https://reactnavigation.org/docs/tab-based-navigation/ * icon 종류 : https://icons.expo.fyi/ * icon 종류에 따라 import 해야 되는 component 가 다르므로 각각 확인 할 것 (Ionicons, MaterialCommunityIcons 등) # router > index.js import React from 'r..

본 게시글에서는 Header component 추가를 통해, 화면의 상단을 모두 동일하게 변경해 본다. * 앞으로 style 을 꾸미기 위해 사용할 styled-components module 추가 yarn add styled-components 1. coponents 폴더에 Header.js 파일 생성 및 코드 작성 # components > Header.js import React from "react"; import styled from 'styled-components'; const Header = ({ title }) => { return ( {title} ); } export default Header; const Wrapper = styled.View` height: 100px; flex-d..

본 게시글에서는 Bottom Tabs Navigator 를 이용해서, 아랫 부분 클릭 시 화면이 전환되도록 구성해 본다. * 가장 먼저 화면을 바로 구성하기 전에, 어떤 홈화면을 만들고 각 화면들로 어떻게 이동할 지 선택 필요 * Expo App을 실행하면 가장 먼저 App.js 파일이 실행되면서 구성된 내용이 화면에 나옴 * 화면 전환 관련 내용을 router 폴더 내에서 구성하도록 셋팅 1. App.js 실행 --> router/index.js 이동하도록 구성 # App.js (수정 전) import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-na..

본 게시글에서는 개발을 시작하기 전, 앞으로 생성할게 될 파일들을 카테고리화 하기 쉽도록 미리 폴더를 구성해 본다. * 처음 프로젝트를 시작하면 어떤 것부터 구성 해야할 지 모르는 경우 발생 * 복잡한 프로젝트를 완성한 후 아래처럼 구성했을 시 굉장히 편하다는 것을 느낌 # 기본 구성 1. src 폴더 생성 후, 하위 폴더로 components / config / router / screens / utils 생성 및 assets 폴더 이동 * 역할 - scr : 카테고리의 최상위 폴더 - assets : icons, images 등 - components : button, text 등 각 기능을 담당하는 것 - config : domain 등 환경설정 관련 내용 - router : screens 을 보여..

* React Native를 처음 시작 할 때, 2가지 방식으로 개발이 가능함 - react-native cli - expo cli 본 게시글에서는 차이점은 생략하고, 빌드/배포가 쉬운 expo-cli로 개발 환경을 셋팅해 본다. 1. expo-cli 설치 (https://reactnative.dev/docs/environment-setup) npm install -g expo-cli * 권한 이유로 아래와 같이 에러가 나면 맨 앞에 [sudo] 를 붙임 sudo npm install -g expo-cli 2. 프로젝트 폴더를 생성하고, 해당 폴더 내에서 아래 명령어 실행 expo init dev-weather // dev-weather는 프로젝트명으로 변경 가능 * 초기 셋팅을 선택할 때 blank를 ..

개발에 대한 기본지식이 전혀 없는 상태에서, React native 앱개발자가 되기 위해 공부하는 과정을 기록. 우선 노마드코더 니꼴라스의 강의를 무작정 따라하면서 날씨앱을 만들어 보았다. https://nomadcoders.co/courses # 최종 결과물 # 개발시 참고한 사이트 *react-native https://reactnative.dev/ ​ *expo https://docs.expo.io/ ​ * Weather API https://openweathermap.org/ ​ * Location API by IP https://ip-api.com/ ​ * UI gradients https://uigradients.com/ ​ # 코딩한 파일 내용 1) App.js import React fro..