[EXPO] EXPO 프로젝트 세팅 가이드 1: 설치 편

💡시작에 앞서

해당 가이드는 프로젝트를
React Native (Expo) + TypeScript + Nativewind (tailwind)
로 진행하는 사람에게 적합한 방법이며,
이외의 프로젝트에는 맞지 않을 수 있습니다.

프로젝트 세팅하기

1) 프로젝트 생성

먼저, 제일 기본이 되는 프로젝트를 생성하자.

터미널에 아래와 같은 명령어를 입력한다.

npx create-expo-app@latest *프로젝트명*

프로젝트 명에는 자신이 진행할 프로젝트의 이름을 영문으로 작성하면 된다.

추후, 프로젝트가 설치될 때 해당 이름으로 폴더가 생성된다.

프로젝트 생성이 완료되었다면, 만들어진 프로젝트 폴더로 이동하자.

cd *프로젝트명*

/** 
* 정확학 설치 여부를 확인하고 싶다면 다음 명령어를 통해 실행해보자.
* npx expo start
* 참고로 expo 앱이 본인의 휴대폰에 설치되어 있어야 하며,
* 프로젝트를 실행중인 디바이스와 expo 앱이 설치된 디바이스 모두 동일한 네트워크에 연결되어 있어야 한다.
*/

2) NativeWind 세팅하기

해당 내용은 기존에 자세히 작성해둔 부분이 있으니 참고.
내용은 이곳에서 확인할 수 있다!

해당 글에선 설명을 생략하고 진행 과정만 정리하겠다.

nativewind 공식 링크
진행되는 모든 내용은 공식 문서를 참조하였으며,
추후 업데이트 시 일부 내용이 바뀔 수 있으니 참고.

1] nativewind 설치하기

프로젝트 최상단에서 아래 내용을 터미널에 입력하여 프로젝트에 nativewind를 추가한다.

npm install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

2] tailwind 설정하기

터미널에서 다음을 실행하여 tailwind.config.js 을 생성하자.

npx tailwindcss init

생성된 tailwind.config.js 파일에 아래 내용을 작성한다.

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

그 다음, 프로젝트 최상단에 global.css 파일을 생성하여 다음과 같은 내용을 작성하자.

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

3] Babel & Metro 설정하기

expo 경우 기본적으로 config파일이 숨겨져 있기 때문에,

아래의 내용을 터미널에 입력 후,

babel.config.js / metro.config.js 파일을 꺼내오자.

npx expo customize

babel.config.js 파일 내에 presets 배열에 다음 내용을 추가한다.

/** 
* babel.config.js 파일 전문
*/
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", // 배열 초기 내용
      { jsxImportSource: "nativewind" }], // 추가할 내용
      "nativewind/babel",
    ],
  };
};

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' }) // 수정된 내용

4] typescript 설정하기

프로젝트 루트에 nativewind-env.d.ts 파일을 생성한 후, 아래의 내용을 입력한다.

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

위의 과정을 마쳤다면, 이제 프로젝트 기본 세팅은 완료되었다.
2편에선 기본 폴더 구조에 대해 작성해보겠다.