본문 바로가기

개발23

[expo] 4. expo로 앱 만들기 - 화면 간 이동 navigation - 1 안녕하세요 프시케입니다. 이번 포스팅은 앱에서 화면 간 이동을 시켜주는 navigation에 관련된 포스팅입니다. react native에서 제공하는 여러 기능들이 있지만 저는 stack navigation Top Tab navigation Bottom Tab navigation 을 사용하여 앱을 구성하도록 하겠습니다. 해당 라이브러리를 설치하기 위해선 Terminal에서 해당 라이브러리를 설치해줍니다. npm install @react-navigation/native npx expo install react-native-screens react-native-safe-area-context npm install @react-navigation/bottom-tabs npm install @react-nav.. 2023. 4. 14.
[expo] 3. expo로 앱 만들기 - 앱 아이콘 및 스플래시 이미지 등록 안녕하세요 프시케입니다. 이번 포스팅은 앱 아이콘 등록 및 스플래시 스크린 이미지 등록입니다. 앱 아이콘 크기는 1024 X 1024 픽셀이고 스플래시 이미지는 1284 X 2778 픽셀로 png 파일을 준비해주세요 지난 시간에 만든 프로젝트 폴더를 보게되면 expo에서 제공하는 앱 아이콘 파일과 스플래시 이미지 파일이 있습니다. 해당 폴더는 D:\project\test001\assets 안에 있으며 icon.png 파일이 앱 아이콘 파일이며 splash.png 파일이 스플래시 이미지 파일입니다. 해당 폴더 assets 준비 해둔 파일들을 넣어줍니다. 전 앱 아이콘 파일을 0001.png 파일이고 스플래시 이미지 파일은 0004.png 파일입니다. 이제 Visual Studio Code를 열고 app.j.. 2023. 4. 14.
[expo] 2. expo로 앱 만들기 - expo go 설치 및 web 화면 열기 안녕하세요 프시케입니다. 이번 포스팅은 expo go 설치 및 web 화면을 열기입니다. 개발 환경이 windows를 사용하고 react native를 사용한다면 android 스튜디오를 설치하여 가상 머신을 생성하고 실행시켜줘야 앱 개발을 할 수 있습니다. 전 expo를 사용하여 android 스튜디오 설치 없이 앱을 만들려고 합니다. 먼저 expo에서 회원가입과 로그인을 해줍니다. https://expo.dev/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.dev expo 회원 가입 화면 expo 로그인 화면 웹.. 2023. 4. 14.
[expo] 1. expo로 앱 만들기 - expo설치 및 Node.js 설치 안녕하세요 프시케입니다. 이번 포스팅은 expo 다운로드 및 설치를 해보겠습니다. expo 설치 전 먼저 Node.js를 설치합니다. Node.js를 다운로드하기 위해 아래의 URL 주소로 이동합니다. 현재 Node.js의 버전은 v17 버전으로 버전 v16을 다운로드하여 설치해줍니다. https://nodejs.org/en/blog/release/v16.16.0 Node v16.16.0 (LTS) | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 다운로드를 하고 설치가 끝나면 명령 프롬프트(cmd)를 실행 시켜줍니다. 현재 설치된 Node.js와 npm의 버전을 확인해줍니.. 2023. 4. 14.