초보개발자의 소소한 기록

@ List * 4.1 불변성을 지키면서 객체와 배열 업데이트하기 ** 4.1.1 불변성을 지켜야 하는 이유 ** 4.1.2 배열의 불변성을 지키는 방법 * 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 ** 4.2.1 todos 상태 만들기 ** 4.2.2 TodoList 컴포넌트 만들기 ** 4.2.3 TodoItem 컴포넌트 만들기 ** 4.2.4 항목 사이에 구분선 보여주기 ** 4.2.5 완료한 항목에 다른 스타일 적용하기 @ Note 1. 렌더링 성능 최적화 방식이기 때분에 불변성 지킬 것 - 항목 추가 시 : spread 연산자, concat() > const numbers = [0, 1, 2, 3]; const nextnumbers = [...number, 4];..

@ List ** 3.1.5 이미지 사용하기 * 3.2 TextInput으로 사용자 키보드 입력받기 ** 3.2.1 KeyboardAvodingvire로 키보드가 화면을 가리지 않게 하기 ** 3.2.2 useState로 텍스트 상태 값 관리하기 ** 3.2.3 커스텀 버튼 만들기 ** 3.2.4 TextIput에 onSubmitEditing 및 returnKeyType 설정하기 * 3.3 정리 @ Note 1. 스타일링 단위 - ppi (pixel per inch) : 1inch에 몇 px이 들어갈 수 있는지 의미 - dpi (dots per inch) : ppi와 유사하며 인쇄물에서 사용하는 단위 - react native 스타일링 시 크기는 dp 로 설정 > dp (density-independen..

@ List * 3.1 프로젝트 기반 다지기 ** 3.1.1 프로젝트 생성하기 ** 3.1.2 오늘 날짜를 알려주는 DateHead 컴포넌트 만들기 ** 3.1.3 StatusBar 색상 바꾸기 ** 3.1.4 레이아웃 준비하기 @ Result # App.js import React from "react"; import { View, Text, StyleSheet } from "react-native"; import DateHead from "./components/DateHead"; // for IOS StatusBar import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; import AddTodo from "...

@ List * 2.8 카운터 만들기 ** 2.8.1 UI 준비하기 ** 2.8.2 Counter 컴포넌트에 Props 설정하기 ** 2.8.3 App에서 상태 관리하기 * 2.9 정리 @ Result #App.js import React, { useState } from "react"; import { SafeAreaView, Button, StyleSheet } from "react-native"; import Counter from "./components/Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => setCount(count + 1); const onDecrease = () ..

* React Native 관련 책이 드디어 출간되어 구매 하였고, 하나씩 따라하며 기초를 다시 한 번 학습하기 위함 * reference : https://book.naver.com/bookdb/book_detail.nhn?bid=21166160 @ List * 2.1 나만의 컴포넌트 만들기 * 2.2 Props * 2.3 defaultProps * 2.4 JSX 문법 * 2.5 StyleSheet로 컴포넌트에 스타일 입히기 * 2.6 Props 객체 구조 분해 할당 * 2.7 useState Hook으로 상태 관리하기 @ Result # App.js import React, { useState } from "react"; import { SafeAreaView, Button } from "react-..

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