![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/k7DFN/btsDhLx8viI/cdCu4MD5wHcx7joa0RjTz0/img.png)
react-navigation 에서는 타이틀 영역을 Header라고 부른다. 이 헤더를 커스터마이징 하는 방법을 한 번 알아보자. 직전 포스팅의 예제를 그대로 사용한다. 1. Props 사용 ◎ App.js import React from 'react'; import HomeScreen from './screens/HomeScreen'; import DetailScreen from './screens/DetailScreen'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {NavigationContainer} from '@react-navigation/native'; const Stack = create..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/mLiq8/btsDhgSJcLM/H33PHs89gcyvDKDQB1XBo0/img.png)
Native Stack Navigator Stack 자료구조와 같이 새로운 주소로 이동할 때는 push, 뒤로 갈 때는 pop 하는 방식으로 작동하는 네비게이터이다. 네이티브 스택 네비게이터말고도 Drawer, Bottom Tabs, Material Top Tabs 등의 네비게이터들이 있지만, 이 네이티브 스택 네비게이터가 가장 흔히 사용되며, 안드로이드의 Fragment / iOS의 UINavigationController를 사용하여 일반 데이티브 앱과 정확히 동일한 방식으로 화면을 관리한다. 설치는 마찬가지로 yarn으로 하면 된다. yarn add @react-navigation/native-stack@next 전환할 2개의 화면을 미리 만들고, 네이티브 스택 네비게이터를 한 번 실습해보자. ◎ D..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/buhiZv/btsDkuWqx5y/zJ3nf9rFk2FJBSybSUhpd0/img.png)
react-native에서는 여러 화면으로 구성된 App을 만드려면 네비게이션 관련 서드파티 라이브러리를 사용해야 한다. 일반적으로 가장 많이 사용되는 라이브러리가 react-navigation이라는 리액트 네이티브 커뮤니티에서 관리하는 라이브러리이다. Docs: https://reactnavigation.org/docs/getting-started/ Getting started | React Navigation What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to kno..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/caiDnz/btsC8Tp8CSR/qlu9jUAx8yp3eAGR1BKN00/img.png)
역시... 연초라서 그런지 시간이 정말 금방금방 간다. 벌써 누리와 같이 지낸 지 3주가 다 되어가고 있다. 누리도 이제는 정말 자기만의 루틴이 생긴 건지, 매일 아침 일어나 보면 주방 혹은 거실에 놔둔 패드에 지도가 그려져 있다. 산책을 갔다오면 거의 매번 통조림 1/4 캔을 사료에 섞어주니까, 밥도 규칙적으로 잘~ 드신다. 하나 좀 걸리는건, 누리가 발 닦는 것도 굉장히 싫어하고, 이빨에도 음식이 많이 끼는 거 같은데 양치도 못하는 상황이라 애가 슬슬... 꼬질꼬질 누리가 되어간다. 이제는 진짜 목욕을 한 번 시켜야 할 거 같은데, 당연히.. 쉽지 않을 여정이 될 거 같아 주말에 한 번 큰맘 먹고.. 맛난 간식 하나 준비해두고 하려고 한다. 누리가 이제는 내가 엄~청 편해진건 정말 좋은데, 약간의 분..
어제 작성한 todoList App이 종료됐다가 다시 켜져도 이전에 데이터를 가지고 있을 수 있도록, AsyncStorage를 적용하여 간단한 데이터를 가지고 있을 수 있도록 해보자. 기존 코드를 다시 작성하지는 않으려고 하니, 기존 코드를 확인하려면 여기로 가서 확인하자. 우선, App.js에서 useEffect Hook을 사용하여 아래와 같이 저장과 불러오기 기능을 직접 추가한다. ◎App.js (...) /* 데이터 불러오기 */ useEffect(() => { const load = async () => { try { const rawTodos = await AsyncStorage.getItem('todos'); const savedTodos = JSON.parse(rawTodos); setTod..
async와 await은 JavaScript의 비동기 프로그래밍을 위해 ES2017에 도입된 키워드이다. async 함수는 항상 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise의 결과를 동기적인 방식으로 처리할 수 있다. await 키워드는 async 함수 내에서만 사용할 수 있다. async 함수: 이 키워드를 사용하여 함수를 선언하면, 함수는 자동으로 Promise를 반환한다. 함수 내부에서 return 문을 사용하면, 이 값은 Promise가 이행(fulfilled)될 때의 값이 된다. await 키워드: Promise가 처리될 때까지 함수 실행을 일시 정지시키고, Promise가 이행되면 결과값을 반환한다. 오류가 발생하면 예외를 발생시킨다. // 1 + 1을 ..
Promise는 JavaScript에서 비동기 작업을 표현하고 다루는 데 사용되는 객체이다. 이는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타낸다. Promise 객체는 세 가지 상태 중 하나를 가진다. 대기(pending): 초기 상태, 이행 또는 거부되지 않음. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise는 then, catch, finally 메소드를 제공하여, 이행 또는 거부 상태가 되었을 때 실행할 콜백 함수들을 연결할 수 있다. 비동기로 1 + 1을 계산하는 예제 코드와 함께 확인해보자. // 1 + 1을 수행하는 비동기 함수 const asyncAddition = new Promise((resolve, reject..
AsyncStorage는 React Native에서 제공하는 간단하고 비동기적인 키-값 저장 시스템이다. 이 시스템은 앱 세션 간 데이터를 영속적으로 저장하는 데 주로 사용된다. AsyncStorage는 사용자 설정, 앱 상태 또는 간단한 인증 정보와 같은 작은 데이터를 로컬 장치에 저장하기 위한 것이다. 이 시스템은 암호화되지 않았으므로, 중요한 정보나 대량의 데이터를 저장하기에는 적합하지 않다. AsyncStorage의 주요 메소드로는 setItem, getItem, removeItem, clear 등이 있다. 데이터는 문자열 형태로 저장되므로, 객체를 저장하려면 JSON.stringify를 사용하여 직렬화해야 하며, 데이터를 검색할 때는 JSON.parse를 사용하여 역직렬화해야 한다. 설치는 마찬..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/LK0Gi/btsC6yebM5x/EzO8hxAH1uEmZYoDMK2WUk/img.jpg)
맛집 카테고리를 생성해 놓고, 거의 1년을 비어있는 상태로 놔두다가 이제 첫 글을 쓴다. 맛집 포스팅이 나름 조회수 효자기도 하고, 포스팅하기도 편해서 자주 올려야지~ 했는데, 사실 딱히 '와! 여긴 올려야 해!' 하는 음식점을 많이 안 가본 것이 제일 컸다. (뭐, 맨날 워낙에 가는 곳만 가는.. 익숙함 = 최고라고 생각하는 사람인지라...ㅋㅋㅋ) 어제 여자친구가 당직이여서 간단하게 저녁을 먹으러 구월동에 갔다가 피자 & 파스타가 당긴다고 음식점을 하나 찾아오셨길래 진짜 오래간만에 고급진 이탈리안 레스토랑에 갔다. 상호명은 파니노구스토(panino gusto), 사전 정의로는 panino: 오일에 찍어 먹는 동그란 작은 빵, gusto: 풍미 있는? 요런 느낌인 거 같다. 가게 분위기는 정말 무슨 파인..
우선, yarn을 사용하여 vector-icons 모듈을 설치하자. yarn add react-native-vector-icons 안드로이드 안드로이드는 react-native 프로젝트 디렉토리 내에 있는 android/app/build.gradle 파일 맨 아래에 아래와 같이 작성하면 된다. ◎build.gradle (...) apply from: file('../../node_modules/react-native-vector-icons/fonts.gradle') iOS terminal 에서 우선, pod를 설치해야 한다. cd ios pod install 이후에 마찬가지로 react-native 프로젝트 디렉토리 내에 있는 ios 디렉토리로 이동하여 info.plist 파일을 찾아 아래와 같이 작성해..
- AsyncStorage
- redux-thunk
- 인천 구월동 이탈리안 맛집
- Async
- 이탈리안 레스토랑
- react
- javascript
- 인천 구월동 맛집
- react-native
- 맛집
- 정보보안기사 #실기 #정리
- await
- 파니노구스토
- Promise
- redux
- Total
- Today
- Yesterday