초보개발자의 소소한 기록

React Native Upgrade Helper 를 통해, 0.61.5 → 0.64.0 로 버전 업그레이드 하는 중 에러가 발생 * Upgrade Helper 참고 : https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.64.0 모듈이 제대로 설치 안되었나 싶어, react-native-nested-scroll-view 모듈을 재설치 해주었지만 해결되지 않음 npm i --save react-native-nested-scroll-view 기존 파일과 비교해보니 AnimatedImplementation.js 파일의 위치가 다름 - 정상 (reavt-native v0.61.5) : node_modules > react-nati..

* 기본적으로 gradle 은 아래 위치에 설치되어 있음 /User/{사용자명}/.gradle * 특정 프로젝트에서 gradle 버전을 변경하고 싶다면, 아래 위치에서 버전 정보를 변경 /User/{사용자명}/{프로젝트명}/android/gradle/wrapper/gradle-wrapper.properties distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-bin.zip ↓↓↓ distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-bin.zip * 여기서 주의할 점은, 아래 처럼 gradle wrapper clean 을 하면 6.6 버전으로 계속 초기화됨 /..

1. npm 명령어 모음 * 참고 : https://docs.npmjs.com/cli/v7/commands/npm-install # package.json의 모듈 설치 npm install npm i # 의존성으로 추가 npm install {module_name} --save # 개발 의존성으로 추가 npm install {module_name} --save-dev npm install {module_name} -D # 전역으로 추가 npm install {module_name} --global npm install {module_name} -g # 업데이트 npm update --save # 모듈 삭제 npm uninstall {module_name} --save npm uni # 캐시 삭제 npm ..

본 게시글에서는 우리나라 주변 바다의 위치의 좌표를 저장 후, 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..