어바웃 화면 페이지화 시키고 버튼 추가하기! 지난번 숙제로 만든 AboutPage.js를 아직 우린 스택 내비게이터에 연결하지 않았다. 따라서 여러분이 직접! 스택내비게이터에 AboutPage.js를 달아보자! 하단 메인 페이지의 상단에 다음과 같은 버튼을 만들어서 누르면 AboutPage로 가게끔 해주자! 추가적으로 외부 링크 걸기까지 배웠으니, 인스타나 블로그 주소 혹은 아무 주소를 AboutPage 하단 버튼에 연결해주기! 메인에 TouchableOpacity 버튼을 두고 navigate를 연결시키면 이동이 가능하다. Stack.screen에 AboutPage.js를 연결시켜야 한다. 소개 페이지 상태바의 디테일함을 주목하자! StackNavigator.js(숙제1) 더보기 import React ..

Share 디테일 페이지까지 이동해서 도달했다. 그런데 결과를 친구한테 결과를 공유해주고, 앱 다운로드 주소까지 전달해준다면 만든 앱을 홍보하는 도움이 되겠지? 설치할 라이브러리 없이, react-native에서 기본적으로 제공해주는 공유 기능을 사용한다. import { Share } from "react-native"; 그리고 다음과 같은 공유 버튼을 디테일 페이지 하단에 생성하고 기능을 만들어보자! share 함수를 만들고 거기에 react-native가 기본적으로 제공해주는 Share 함수를 사용하여 간단히 공유를 할 수 있다. DetailPage.js에 아래와 같이 코드를 넣어 주자! 더보기 import React,{useState,useEffect} from 'react'; import { S..

내비게이션이란? 앱에 페이지 개념을 입혀주고, 웹 사이트를 이용하듯, 앱에서 만든 컴포넌트들을 페이 지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리이다. 물론 이것 또한 쉽게 페이징을 도와주는 외부 라이브러리를 가져다가 사용한다. react-navigation 공식문서: https://reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 결국 이 라이브러리도 Expo에서 지원하고 있는 도구로써, 앱을 만들기 위해 사용 중인 Expo와 궁합이 아주 잘 맞는다. 앱 내의 페이지 구성 및 이동까지 직접 적용해볼 텐데 이 ..

Expo에서 제공해주는 앱다운 앱 기능들 알아보자! Expo SDK. 일명 Expo에서 제공해주는 앱 기능 도구들을 개발할 때 여기서 확인할 수 있다. 링크: https://docs.expo.dev/versions/v38.0.0/ 필요한 기능들이 있는지 목록을 쭉 보고, 원하는 기능을 선택해서 적용하면 끝! 앱 상태 바(Status Bar) 앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다. 배터리가 충분한지, 몇 시인지 매일 보는 것처럼 이 부분도 처리를 할 수 있다. 그럼 라이브러리 설치를 해보자. vscode에서 터미널 우측 버튼 중에 분할이란 버튼이 있다. 터미널 왼편은 서버를 켜고 끄고를 담당하고(expo start) 터미널 우측은 필요한 라이브러리들을 설치할 때 명령어를 치는 장소로 ..

pages 폴더에 DetailPage.js를 만들어 주고 App.js에 다음과 같이 코드를 입력한다. import React from 'react' import MainPage from './pages/MainPage'; import AboutPage from './pages/AboutPage'; import DetailPage from './pages/DetailPage'; export default function App(){ // return () // return () return () } 그리고 예제 데이터 "idx":9, "category":"재테크", "title":"렌탈 서비스 금액 비교해보기", "image": "https://storage.googleapis.com/sparta-imag..

sparta-myhoneytip-hyuk 프로젝트를 VSCode 에디터로 열고, VSCode 에디터 내의 터미널을 연 다음 expo start 명령어를 실행! expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘 뒤, 여러분 휴대폰에 설치했던 Expo 클라이언트 앱을 실행한다. App.js expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인할 수 있다. "Open up App.js to start working on your app!" 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수이다. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을..

리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리이고 라이브러리는 개발할 때 사용하는 도구이다. 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능하다 했지만 그렇지 않음을 알 수 있다. 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생한다. 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야 하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된다. 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드, iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다. Expo란?..