프로젝트 구조

Babel Preset Expo

babel-preset-expo 프리셋은 Expo 프로젝트에서 사용되는 Babel 설정을 포함하는 패키지다. 이 프리셋은 React Native에서 제공하는 기본 프리셋을 확장하고 추가적인 기능을 제공한다. babel.config.js 파일에서 이 프리셋을 적용하면 다음과 같은 기능을 사용할 수 있다:

1. 데코레이터 지원: 데코레이터는 클래스와 클래스 메서드에 대한 주석을 추가하는 방법이다. 데코레이터를 사용하면 코드의 가독성과 재사용성을 높일 수 있다. babel-preset-expo 는 데코레이터 문법을 지원하므로 데코레이터를 사용할 수 있다.

2. 트리 쉐이킹 웹 패키지 지원: 트리 쉐이킹은 사용하지 않는 코드를 제거하여 번들 크기를 최적화하는 기술이다. babel-preset-expo 는 웹 패키지에 대한 트리 쉐이킹을 지원한다. 이를 통해 앱에 포함되는 코드의 양을 줄일 수 있다.

3. 폰트 아이콘 로딩: babel-preset-expo 는 폰트 아이콘을 로딩하는 기능을 제공한다. 이를 통해 앱에서 벡터 아이콘을 쉽게 사용할 수 있다. 폰트 아이콘을 사용하면 다양한 크기와 색상의 아이콘을 유연하게 사용할 수 있다.

4. 선택적 네이티브 종속성: 일부 Expo 모듈은 네이티브 종속성을 가지고 있다. 예를 들어, expo-camera 모듈을 사용하려면 해당 모듈의 네이티브 코드도 설치해야 한다. babel-preset-expo 는 이러한 선택적 네이티브 종속성을 자동으로 처리한다. 만약 해당 모듈이 설치되어 있다면 자동으로 연결되고, 설치되어 있지 않다면 무시된다.

babel.config.js 파일에서는 babel-preset-expo 프리셋을 적용하는 것 외에도 추가적인 Babel 플러그인이나 프리셋을 설정할 수 있다. 예를 들어, 실험적인 자바스크립트 기능을 사용하려면 해당 기능을 지원하는 Babel 플러그인을 추가할 수 있다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-proposal-optional-chaining'],
  };
};

위 예시에서는 babel-preset-expo 프리셋을 적용하고, 추가로 @babel/plugin-proposal-optional-chaining 플러그인을 사용하도록 설정하였다. 이 플러그인은 옵셔널 체이닝 문법을 지원한다.

이처럼 babel-preset-expo 는 Expo 프로젝트에 필요한 기본적인 Babel 설정을 제공하며, 추가로 필요한 플러그인이나 프리셋을 적용할 수 있는 유연성도 제공한다. 이를 통해 개발자는 최신 자바스크립트 기능을 사용하면서도 Expo의 기능을 효과적으로 활용할 수 있다.