1. 패키지 설치

npm install react-native-worklets
npm install nativewind react-native-reanimated react-native-safe-area-context@5.4.0
npm install --save-dev prettier@^3.0.0 tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
npx tailwindcss init

2. tailwind.config.js 교체

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. babel.config.js 수정

module.exports = {
  presets: ['module:metro-react-native-babel-preset', 'nativewind/babel'],
};

4. metro.config.js 수정 

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});
 
module.exports = withNativeWind(config, { input: "./global.css" });

5. App.tsx에 import

import "./global.css"

6. TypeScript 설정
프로젝트 루트에 nativewind-env.d.ts 생성:

/// <reference types="nativewind/types" />

1. react-native-bootsplash 라이브러리 설치

npm i react-native-bootsplash

2. 리소스 생성(ex 경로명 ./src/assets/splash.png)

npx react-native generate-bootsplash ./src/assets/splash.png --background "#ffffff" --logo-width 192

1. GitHub에 새 저장소(Repository) 만들기

2. 로컬 프로젝트에서 Git 초기화

터미널 또는 명령 프롬프트 열고 프로젝트 폴더로 이동:

cd 경로/프로젝트폴더

Git 초기화:

git init

3. 원격 저장소(Remote) 연결

GitHub에서 생성된 새 저장소 URL 복사 후 실행:

git remote add origin https://github.com/[USERNAME]/[REPOSITORY].git

연결 확인

git remote -v

4. 파일 추가 및 커밋

git add . git commit -m "Initial commit"

5. GitHub로 푸시

git branch -M main git push -u origin main

1. 설치

npm install -D tailwindcss@3 postcss autoprefixer

2. 초기화

npx tailwindcss init

3. tailwind.config.js 설정

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { extend: {} },
  darkMode: "class", // 다크모드 사용 시
  plugins: [],
};

4. 전역 CSS에 Tailwind 지시어 추가(src/index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 엔트리에서 전역 CSS 불러오기(src/main.tsx)

import './index.css'   // Tailwind 포함

1. 프로젝트 생성

npm create vite@latest [APP_NAME]

2. gh-pages 패키지 설치

npm install gh-pages --save-dev

3. package.json 수정

homepage 설정

"homepage": "https://<GitHub-사용자명>.github.io/<저장소명>"

scripts 추가

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

4. vite.config.ts 파일 수정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/프로젝트 명/' // ← 이 부분 추가
})

5. GitHub 저장소 연결

git init
git remote add origin https://github.com/<GitHub-사용자명>/<저장소명>.git
git add .
git commit -m "Initial commit"
git push -u origin main

6. 배포 실행

npm run deploy

7. GitHub Pages 설정

1. GitHub 저장소 → Settings → Pages 메뉴로 이동
2. Branch를 gh-pages로 선택
3. 저장 후 잠시 기다리면 사이트가 활성화됩니다.
4. 최종 배포 주소 : https://<GitHub-사용자명>.github.io/<저장소명>/

1. 1024x1024 크기의 정사각형 PNG 파일을 준비

2. 적당한 경로에 파일 넣어주기(ex. ./src/assets/icon.png)

3. 라이브러리 설치

npm install --save-dev "@bam.tech/react-native-make"

(설치가 안되면 따옴표 삭제해보기)

4. 명령문 실행(2번에서 설정한 경로 필요)

npx react-native set-icon --path ./src/assets/icon.png

5. (선택) 앱 아이콘을 생성한 다음엔 라이브러리를 삭제하는걸 추천. 스플래시 구현을 위한 react-native-bootsplash 라이브러리와 충돌이 날 수도 있기 때문이다.

1. 패키지 설치

npm install i18next react-i18next react-native-localize

2. 리소스 준비

src/i18n/resources/ko/common.json

src/i18n/resources/en/common.json

{
  "text1": " 텍스트1.",
}

3. i18n 파일 설정

src/i18n/i18n.ts

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

// JSON 리소스 import
import en_common from './resources/en/common.json';
import ko_common from './resources/ko/common.json';

// 리소스 객체
export const resources = {
  en: {common: en_common},
  ko: {common: ko_common},
} as const;

const fallbackLng = 'en';

// 디바이스 우선 언어 결정
function getDeviceLanguage(): string {
  const locales = RNLocalize.getLocales();
  if (Array.isArray(locales) && locales.length > 0) {
    // languageCode만 사용: 'en', 'ko'
    return locales[0].languageCode;
  }
  return fallbackLng;
}

void i18n.use(initReactI18next).init({
  resources,
  lng: getDeviceLanguage(),
  fallbackLng,
  ns: ['common'],
  defaultNS: 'common',
  interpolation: {escapeValue: false},
  compatibilityJSON: 'v4',
});

export default i18n;

4. 앱에서 i18n 적용

앱의 루트 컴포넌트에서 i18n 초기화

import React from 'react';
import {Text, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import '../i18n/i18n'; // i18n 초기화 파일 import

export default function App() {

  return (
   ...
  );
}

5. 사용법

import React from 'react';
import {View, Text} from 'react-native';
import {useTranslation} from 'react-i18next'; // 선언

export default function Main() {
  const {t} = useTranslation(); // 사용
  return (
    <View>
          <Text>{t('text1')}</Text> //  사용
    </View>
  );
}

git clone https://{아이디}@github.com/nickname/repository.git

입력하면 이제 사용자 로그인 창이 뜬다.

로그인하면 끝