심층 탐구 React Native #3: Babel #2— 실전 전장

Source: Dev.to

절대 경로 & 별칭 — “동기화의 삼각형”

많은 개발자들이 별칭을 설정하고 앱을 실행하면 완벽하게 동작하지만 VS Code에서는 빨간 오류가 표시됩니다. 혹은 그 반대로 VS Code는 정상인데 앱이 크래시가 나는 경우도 있습니다.

왜 그럴까? 세 시스템이 서로 일치해야 하기 때문입니다:

표준 설정

리졸버 플러그인을 설치합니다:

yarn add -D babel-plugin-module-resolver

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components': './src/components',
          '@utils': './src/utils',
          '@assets': './src/assets',
        },
      },
    ],
  ],
};

함정 – extensions 배열을 빼먹으면(예: .ts/.tsx 누락) Babel이 TypeScript 파일에 별칭을 적용하지 않아 “Module not found” 오류가 발생할 수 있습니다.

tsconfig.json과 동기화 (필수)

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

프로덕션을 위한 정리 (Console Log 제거)

console.log는 개발 중에 매우 유용하지만 릴리스 빌드에서는 독이 됩니다:

• JS 브리지 속도가 느려집니다(문자열을 JS와 네이티브 사이에 직렬화해야 함).
• 사용자가 기기를 컴퓨터에 연결하면 민감한 정보가 노출될 수 있습니다.

스마트 설정 (동적)

babel.config.js에 조건부 로직을 넣을 수 있습니다:

module.exports = function (api) {
  // 캐시를 사용해 빌드 속도 향상
  api.cache(true);

  const presets = ['module:@react-native/babel-preset'];
  const plugins = [];

  // 프로덕션일 때만 console 문을 제거
  if (process.env.NODE_ENV === 'production') {
    plugins.push('transform-remove-console');
  }

  return {
    presets,
    plugins,
  };
};

개발자 인사이트: api.cache(true)(또는 api.cache.using(() => process.env.NODE_ENV))를 사용하면 Babel이 파일마다 설정을 다시 계산하지 않아 빌드 속도가 크게 빨라집니다.

환경 변수 & 캐시 지옥

react-native-dotenv를 사용할 때 Babel은 환경 변수를 문자열 리터럴로 교체합니다.

console.log(process.env.API_URL);
// becomes
console.log("https://api.example.com");

치명적인 함정

.env에서 API_URL을 “dev”에서 “prod”로 바꾸고 앱을 다시 로드해도 여전히 이전 값이 표시될 수 있습니다.

이유: Babel(및 Metro)이 이전 번역을 캐시하고 있기 때문입니다. 소스 라인(process.env.API_URL) 자체가 변하지 않으면 Babel은 다시 번역하지 않습니다.

전문가 솔루션

• 환경 파일을 변경한 뒤 Metro 번들러를 캐시를 비우고 실행합니다:

npx react-native start --reset-cache

• 또는 Babel 설정에 .env 파일을 캐시 키에 포함하도록 구성합니다(고급).

요약 – babel.config.js를 위한 3가지 황금 규칙

1. 삼각형: Babel에서 변경한 모든 경로 별칭은 tsconfig.json에도 동일하게 반영해야 합니다.
2. 환경: 개발과 프로덕션 설정을 구분합니다(예: 프로덕션에서는 console 로그를 제거).
3. 캐시 초기화: Babel이나 환경 설정을 수정했을 때는 반드시 --reset-cache 옵션을 사용합니다.

console.log("Thanks for reading!");