React-Native Expo에 Tailwind 적용하기

오늘도 공식문서의 중요성을 뼈저리게 깨닫고 갑니다..

원래 야추 다이스게임을 이전에 구현했던 퍼즐 프로젝트에 묶어서 게임 모음 사이트로 만드려고 했는데, 생각보다 야추 다이스를 플레이하기 위해 생성되는 테이블이 좀 많아서 프로젝트를 그냥 분리하려고 한다. 더군다나 supabase의 rsl을 해제한 상태로 유지했더니 무단 접근이 발생한건지 보안 알림 메일이 오면서 테이블이 삭제됐다.

 

그래서 이왕 삭제된 김에 Mysql을 학습해서 적용할 예정이고, 웹으로 하기엔 야추다이스의 기능이 너무 허전하기 때문에 간단한 앱으로 만들어 볼 예정이다.

학습 목적으로 지인들과 Flutter 프로젝트를 진행한 적이 있었는데, React 방식의 코드에 익숙해서 그런가 widget 코드가 너무 적응이 어려웠다. 하지만, React-Native(RN)의 경우 전반적으로 리액트와 같은 방식으로 작성하기 때문에 금방 습득할 수 있을 것 같아 고르게 되었다.

 

RN의 경우, Default 방식과 expo라는 프레임워크 방식으로 진행된다. 이전 버전까진 expo가 지원하는 모듈이 제한적이여서 사용 못하는 경우도 발생했었다고 하는데, 현재 버전에선 웬만한 모듈을 사용할 수 있어서 구현이 간단하다는 장점을 지닌 expo가 사용성이 좋아졌다고 한다. 전에 언급한 css in js의 사용을 줄여보기 위해 기존 css가 아닌 tailwind를 사용해서 구현할 것이다.

 

그리고 설치하는데 꼬박 하루가 걸렸다;; 뭔가 빼먹은건지 버전이 다른건지 적용이 안되서 머리카락좀 쥐어뜯었다.

해결은 어느 인도형님의 유튜브를 보고 해결했으며, tailwind를 RN에서 사용하기 위해 사용하는 NativeWind의 공식문서를 보고 진행했다. 현재 최신버전의 expo에서 tailwind가 지원이 안된다는 말이 있어 특정 버전으로 설치해야 한다고 하더라

---

1. Expo 프로젝트 생성

npx create-expo-app@latest .

RN의 프레임워크인 expo로 프로젝트를 생성해준다. 이제야 알았는데 프로젝트를 생성할 때 뒤에 이름이 아니라 dot을 넣으면 해당 폴더에 바로 프로젝트가 생성된다. 이것도 모르고 지금까지 계속 Git Repository 폴더/Project 폴더로 이중으로 작업했는데 하나 배워간다.

 

2. NativeWind, Tailwindcss, react-native-reanimated, react-native-safe-area-context 설치

npm install nativewind tailwindcss@^3.4.17 react-native-reanimated@3.16.2 react-native-safe-area-context

현재 자동 설정의 명령어로 설치하면 적용이 안되서 특정 버전의 명령어로 설치를 진행해준다. 해당 모듈들은 순서대로 RN에서 tailwind를 사용, tailwind 설치, 성능 최적화된 애니메이션 구현, 휴대폰의 Home Bar나 Notch를 감안하여 UI배치 기능을 한다.

 

3. tailwind.config.js 작성

npx tailwindcss init

해당 명령어를 통해 tailwind.config.js를 생성해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind를 사용할 파일 지정과 설정이 가능한 파일이다.

 

4. global.css 작성

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

tailwind를 사용하기 위해 전역으로 css를 적용해준다. 여기서 경로설정을 잘못해 애를 먹었는데, 현재 본인은 프로젝트 루트 경로에 global.css를 작성했다. (package.json과 같은 경로)

 

그리고 나중에 프로젝트를 실행할 때 @tailwind는 잘 안 쓰인다고 하는 경고 메세지가 뜰 수도 있다.

해결법은 import 방식으로 바꿔주면 되는데, tailwind 적용이 어려웠어서 공식문서대로 @tailwind를 사용 중이다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

 

5.  babel.config.js 작성

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Nativewind를 사용하기 위해 바벨 설정 파일을 작성해준다. (package.json과 같은 경로)

 

6. metro.config.js 작성

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

RN에선 Metro 번들러를 사용하기 때문에 해당 설정 파일도 작성해준다. (package.json과 같은 경로)

 

7. global.css 적용

import "@/global.css"

app/_layout.tsx의 코드에 global.css를 import 해준다. react의 app.tsx에 해당하며, 해당 경로도 본인이 설정한 global경로에 맞춰 작성해준다.

 

8. nativewind-env.d.ts 작성

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

TypeScript에서 Nativewind의 타입을 인식시키기 위해 해당 파일을 작성한다. (package.json과 같은 경로)

이는 tailwind를 적용할 때, 자동 완성 및 타입 검사가 가능해진다.

 

9. tailwind 사용 테스트

<View className="w-10 h-10 bg-blue-500" />

app/(tabs)/index.tsx에 해당 코드를 넣고 tailwind가 제대로 적용되는지 확인한다.

해당 index파일은 프로젝트가 실행될 때 처음 보이는 페이지이며, 코드를 다 지우고 본인만의 코드로 테스트해도 괜찮다.

---

해당 방식으로 본인은 tailwind를 적용했다. 하지만, 설정 파일이나 코드 수정 후에 리로드하는 과정에서 tailwind가 적용이 안될 수 있는데, 원인은 세 가지 정도로 꼽을 수 있을 것 같다.

1. 브라우저의 캐시
2. 모듈 미적용
3. 안드로이드 에뮬레이터 버그?

브라우저의 캐시는 브라우저 설정에서 지우거나 크롬의 경우 시크릿 모드에서 확인하면 된다.

모듈 미적용의 경우 node_modules파일과 package.lock.json을 삭제하고 다시 설치 후에 재시작하면 된다.

powershell 코드

Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json
npm install

 

bash 코드

rm -rf node_modules
rm -f package-lock.json
npm install

 

 

안드로이드 에뮬레이터 버그는 본인 컴퓨터에서 설정이 잘못된 건지는 모르겠는데, 리로드가 제대로 작동이 안되고 가끔씩 프리징 현상이 발생한다. 이건 그냥 에뮬레이터를 재시작하는 것 말고는 잘 모르겠다 ㅎㅎ..

---

npm run reset-project

이 명령어는 프로젝트의 기본 틀을 싹 없앨 수 있다. (Expo 프로젝트의 해당 기본 틀을 없애준다.)

 

이를 사용하면 <div>hello world</div>같은 코드만 들어있으며 처음부터 코드를 짤 수 있어 초반 수고를 덜 수 있다.

 

하지만 reset-project를 사용했을 때 다른 설정도 초기화되는 것 같아 tailwind 적용이 안될 수도 있다. 이 부분은 해당 명령어를 자세하게 모르기 때문에 현재 건드리기는 좀 애매하여 사용하지 않았지만, 이 후 원인을 찾으면 다시 사용해볼 예정이다.

---

이제 야추 다이스를 구현할 예정인데, 정처기 실기도 준비해야 해서 좀 바빠질 것 같다. 이번엔 취업도 해야 하기 때문에 꼭 따야 된다 후..