[React-Native] 기본 세팅

환경세팅

[React-Native] 기본 세팅

obin01 2023. 10. 6. 22:30

1. vscode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

2. node.js 설치

https://nodejs.org/ko/download/

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

3. yarn 실행 명령어 (cmd창에서)

yarn 이 없을경우 설치

npm install --global yarn

yarn으로 패키지 설치

yarn --- node_modules 설치
yarn add react-native --- react-native 설치 (global 로 설치시 버전 충돌 날수도 있음)
react-native init --version 0.70.0 프로젝트명 --- 프로젝트 생성 (0.71부터는 typescript로 생성)

[ 글로벌 패키지 관련 ]
npm list -g --depth=0 --- 글로벌 모듈 확인
npm uninstall -g  <패키지이름> --- 글로벌 모듈 삭제

4. 라이브러리 install (해당 프로젝트 에서)

npm 방식

npm install --save react-dom
npm install --save-dev @babel/core babel-loader @babel/preset-react
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install react-native-web

yarn 방식

yarn add react-dom
yarn add @babel/core babel-loader @babel/preset-react --dev
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin --dev
yarn add react-native-web

5. webpack.config.js 생성

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    open: true,
    historyApiFallback: true,
    static: './',
    hot: true,
  },
}

6. package.json 수정

scripts 에 추가
"build-react": "webpack --mode production",
"start-react": "webpack serve --config ./webpack.config.js --mode development",

7. 웹페이지에 보여줄 index.html 생성 ( /public/index.html )

<!DOCTYPE html>
<html>
  <head>
    <title>React Native Web</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

8. App.js 수정

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello world from React Naitve Web</Text>
    </View>
  );
};

9. /index.web.js 생성 ( react-native-web으로 실행할 index.js 분기처리 )

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);

10. 프로젝트 실행

yarn start-react

11. error 관련 진단

react-native doctor

'환경세팅' 카테고리의 다른 글

[React] TypeScript 설정 (0)	2024.03.26
[React-Native] 안드로이드 세팅 (2)	2024.01.04
[Vue] 뷰 기본 세팅 (1)	2023.09.02
[Tomcat] 세션 클러스터링 정리 (1)	2023.06.29
[Spring] STS git 연동 정리 (2)	2022.09.08

현재글[React-Native] 기본 세팅

코딩 정리