• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
React

React-Native & Expo 환경구축하기

달소 달소 527

0

0

웹앱을 만들기 위한 첫단계입니다!

 

저는 별도로 리눅스 서버를 만들어서 구축했지만 WSL2 환경에서도 동일하게 구축될것이니 편하신 방법으로 진행해주시면 됩니다

 

설치환경

 

Ubuntu 20.04 LTS Server

1. node js 설치하기

Nodesource PPA(개인아카이브) 등록하기

 

다른 버전의 Node.js를 설치하려면 NodeSource에서 유지 관리 하는 PPA (개인 패키지 아카이브)를 사용할 수 있습니다 . 이러한 PPA에는 공식 Ubuntu 리포지토리보다 더 많은 버전의 Node.js가 있습니다.

 

여기서는 안정화 버전인 14.17로 설치할 예정이며 이전버전을 설치하고싶으시면 앞에 숫자만 변경하시면 됩니다.

 

image.png.jpg

 

자세한 정보 : https://github.com/nodesource/distributions/blob/master/README.md

 

 

Node.js v14.x :

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

 

image.png.jpg

 

이제 바로 node js를 설치해보겠습니다.

 

sudo apt-get install -y nodejs

 

자동으로 최신버전인 14.17.2 버전으로 설치됩니다.

설치후에는 node -v 로 버전확인이 가능합니다.

 

image.png.jpg

 

2.npm을 이용한 개발환경 구축

node js 가 정상적으로 설치되었으면 이제 npm을 사용해서 개발환경을 구축해보겠습니다.

 

npm install -g create-react-native-app

npm install -g expo-cli

 

image.png.jpg

image.png.jpg

 

이제 웹앱을 만들기 위한 프로젝트를 생성해보겠습니다.

 

create-react-native-app dalso-web-app

 

image.png.jpg

 

프로젝트가 생성이 되었으면 프로젝트명으로 된 디렉터리가 생성되셨을 겁니다. cd를 통해 해당 디렉터리로 이동 후 npm을 실행시켜주세요.

 

cd dalso-web-app

npm start

 

이제 npm으로 하는 환경구축은 완료되었습니다.

 

이제 설치된 expo-cli를 이용해서 웹뷰를 구현해보겠습니다.

 

명령어는 아래 공식문서를 참조했습니다

https://docs.expo.io/versions/latest/sdk/webview/

 

expo install react-native-webview

 

설치가 완료되었으면 app.js파일을 수정해주셔야되는데요.

app.js는 아까 만든 프로젝트 내부에 파일로 있습니다.

 

코드는 위 공식문서의 기본코드로 넣겠습니다.

 

vi App.js

 

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://svrforum.com' }} style={{ marginTop: 20 }} />;
  }
}

 

이제 expo start 명령어를 쳐주면

 

qr코드가 나오는데 사용하고 계신 안드로이드나 ios 어플에서 expo어플을 설치해주시고 qr코드를 스캔해주세요.

 

image.png.jpg

 

3. 앱으로 만들기

앱에 들어가는 정보 수정

{
   "expo": {
    "name": "서버포럼",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "서버포럼",
    "ios": {
      "bundleIdentifier": "com.svrforum.svrforum",
      "buildNumber": "1.0.0"
      "supportsTablet": true
    },
    "android": {
      "package": "com.svrforum.svrforum",
      "versionCode": 1,
    }
   }
 }

 

expo install expo-permissions

 

image.png.jpg

 

image.png.jpg

신고공유스크랩
0

달소 달소
96Lv. 186577P
다음 레벨까지 1603P


메인서버 - Ryzen 5700G / Proxmox 7.2 / Ubuntu / Xpenology / 기타 VM 등등
보조서버 - Intel i9-9900ES(QQC0) / H370M / Proxmox 7.1 / 아직개발용서버로 사용중
백업스토리지서버 - DS920+ 
하드웨어,가상화 등등 여러 IT분야에 관심이 두루두루많습니다만 깊게알고있는건 없습니다 하하하

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?


목록

공유

facebooktwitterpinterestbandkakao story

주간 조회 수 인기글

주간 추천 수 인기글

분류 제목 글쓴이 날짜 조회 추천
코딩테스트 ㅘ!!!!!! 9 Jasons 23.08.24.15:40 139 +2
코딩테스트 으어... 대회 시작 1시간 하고도 정확히 15분전 2 Jasons 23.08.13.12:45 240 +1
코딩테스트 NYPC 2023 2 Jasons 23.08.09.14:13 172 +1
코딩테스트
image
Jasons 23.08.24.15:40 139 +2
코딩테스트
normal
Jasons 23.08.13.12:45 240 +1
코딩테스트
image
Jasons 23.08.09.14:13 172 +1
Python
normal
mjk 23.08.03.20:22 219 +3
Linux
image
hilee0602 23.04.05.16:34 230 +1
Linux
image
화정큐삼 23.03.19.08:46 299 0
Docker
normal
장작_범댕이 23.02.19.14:21 296 0
정보
image
동기 23.01.16.09:16 220 0
정보
image
달소 23.01.06.14:50 1485 0
정보
image
동기 23.01.04.16:14 205 +2