babel 환경 설정

-



babel.config.cjs 파일 생성


client 폴더 최상단에 바벨 환경설정 파일 생성
babel.config.cjs 파일 내용 작성

/*
babel is used for frontend unit testing
*/
module.exports = {
  presets: [
    ['@babel/preset-env', { 'targets': { 'node': 'current' } }], //compiling ES2015+ syntax
    ['@babel/preset-react', { runtime: 'automatic' }],
    '@babel/preset-typescript',
  ],
  /*
      Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
  */
  plugins: [
    '@babel/plugin-transform-runtime',
    'babel-plugin-transform-import-meta',
    'babel-plugin-transform-vite-meta-env',
    'babel-plugin-replace-ts-export-assignment',
    [
      'babel-plugin-root-import',
      {
        'rootPathPrefix': '~/',
        'rootPathSuffix': './src',
      },
    ],
  ],
};



Babel 설정 파일인 babel.config.cjs 파일은 JavaScript/TypeScript 코드를 다양한 환경(예: 최신 브라우저, Node.js)에서 호환되도록 변환하는 Babel의 동작 방식을 정의합니다. 주석에서 언급되었듯이, 이 설정은 주로 프론트엔드 유닛 테스트 환경을 위해 사용됩니다.

Babel 설정은 크게 두 가지 핵심 요소로 구성됩니다: presets와 plugins.

Babel 설정 파일의 구성 요소 설명

1. presets (프리셋)

프리셋은 특정 환경에서 필요한 일련의 Babel 플러그인 모음을 미리 정의해둔 것입니다. 개별 플러그인을 하나하나 설정할 필요 없이, 관련된 기능들을 한 번에 적용할 수 있도록 편리하게 묶어 놓은 셋이라고 생각하시면 됩니다.

  • ['@babel/preset-env', { 'targets': { 'node': 'current' } }]
    • 용도: 이 프리셋은 ES2015+ (최신 JavaScript) 문법을 현재 Node.js 버전에서 호환되도록 컴파일하는 역할을 합니다.
    • targets: { 'node': 'current' }: Babel에게 코드를 현재 실행 중인 Node.js 환경에 맞게 변환하라고 지시합니다. 이는 특히 유닛 테스트 환경에서 유용합니다. 테스트가 Node.js 환경에서 실행되기 때문에, 테스트 코드가 최신 JavaScript 문법을 사용하더라도 Node.js가 이를 이해할 수 있도록 변환해 줍니다.
  • ['@babel/preset-react', { runtime: 'automatic' }]
    • 용도: React JSX 문법을 일반 JavaScript로 변환합니다.
    • runtime: 'automatic': React 17부터 도입된 JSX 변환 방식입니다. 이전에는 JSX를 사용하기 위해 모든 파일 상단에 import React from 'react';를 명시적으로 추가해야 했지만, automatic 런타임을 사용하면 이 과정을 자동으로 처리해 줍니다.
  • @babel/preset-typescript
    • 용도: TypeScript 코드를 일반 JavaScript로 변환합니다. Typescript의 타입 관련 구문들을 제거하고, JavaScript 런타임이 이해할 수 있는 코드로 만들어 줍니다.

2. plugins (플러그인)

플러그인은 Babel이 특정 종류의 코드 변환을 수행하도록 하는 작은 단위의 기능입니다. 프리셋은 여러 플러그인을 묶은 것이고, 플러그인은 그보다 더 세분화된 변환 규칙을 적용합니다.

  • @babel/plugin-transform-runtime
    • 용도: Babel이 코드를 변환할 때 사용하는 헬퍼(helper) 함수나 Polyfill을 중복 없이 효율적으로 관리하도록 돕습니다. 예를 들어, 여러 파일에서 async/await를 사용한다면, 이 플러퍼그인은 각 파일마다 regenerator-runtime을 포함시키는 대신, 한 번만 임포트하여 사용하도록 최적화해 줍니다.
  • babel-plugin-transform-import-meta
    • 용도: 최신 JavaScript의 import.meta 구문을 지원하지 않는 환경에서 이를 변환하여 호환성을 제공합니다. import.meta는 모듈에 대한 메타데이터(예: 현재 모듈의 URL)를 제공합니다.
  • babel-plugin-transform-vite-meta-env
    • 용도: Vite라는 모던 프론트엔드 빌드 도구에서 사용되는 import.meta.env 구문을 변환하는 플러그인입니다. Vite는 이 구문을 통해 환경 변수에 접근하게 합니다. 이 플러그인은 Babel 환경에서도 Vite의 환경 변수 접근 방식을 사용할 수 있도록 돕습니다.
  • babel-plugin-replace-ts-export-assignment
    • 용도: TypeScript에서 사용되는 export = 구문을 일반 JavaScript의 module.exports = 또는 export default와 같은 형태로 변환하는 플러그인으로 보입니다. 이는 TypeScript 특정 구문을 다른 환경에서 호환되도록 만듭니다.
  • ['babel-plugin-root-import', { 'rootPathPrefix': '~/', 'rootPathSuffix': './src' }]
    • 용도: 모듈 임포트 경로를 간소화하는 플러그인입니다.
    • rootPathPrefix: '~/': 코드에서 ~/로 시작하는 경로가 있다면, 이를 rootPathSuffix에 정의된 경로를 기준으로 해석하라는 의미입니다.
    • rootPathSuffix: './src': 프로젝트의 ./src 폴더를 루트 경로로 설정합니다.
    • 예시: 만약 src/components/Button.tsx 파일이 있고, 다른 파일에서 이 파일을 임포트할 때 import Button from '~/components/Button';와 같이 사용할 수 있도록 해줍니다. 이는 import Button from '../../components/Button';처럼 긴 상대 경로를 쓰는 대신 편리하게 모듈을 가져올 수 있도록 합니다.

요약

이 Babel 설정은 다음을 목표로 합니다:

  1. 최신 JavaScript (ES2015+) 및 TypeScript 코드를 현재 Node.js 환경에서 실행 가능하도록 변환합니다. (특히 프론트엔드 유닛 테스트를 위해)
  2. React JSX 문법을 자동으로 처리합니다.
  3. 개발 및 빌드 도구(특히 Vite)에서 사용되는 특정 환경 변수 및 모듈 메타데이터 구문을 호환되게 변환합니다.
  4. TypeScript의 특정 내보내기 구문을 처리합니다.
  5. 모듈 임포트 경로를 ~/ 접두사를 사용하여 ./src 폴더를 기준으로 간소화하여 개발 편의성을 높입니다.

전반적으로 이 설정은 Node.js 기반의 테스트 환경에서 최신 프론트엔드 기술 스택 (React, TypeScript, Vite)으로 작성된 코드를 원활하게 실행하고 테스트할 수 있도록 Babel을 구성하는 것입니다.



댓글

댓글 쓰기

이 블로그의 인기 게시물

아파치 보안관련 기본설정

-
 🔧 기본 설정 항목들 1. ServerTokens & ServerSignature 설명 : Apache가 클라이언트에게 서버 정보를 얼마나 제공할지 결정함. 보안 권장 설정 : ServerTokens Prod ServerSignature Off Prod : 버전 정보 없이 "Apache"만 반환. Off : 에러 페이지나 디렉토리 목록에 서버 정보 숨김. 2. Timeout 설명 : 클라이언트와의 연결에 대해 Apache가 기다리는 시간. 권장 설정 (성능 및 DoS 방지): Timeout 30 기본값 60초 → 30초로 줄이면 유휴 연결을 빠르게 정리 가능. 3. KeepAlive & MaxKeepAliveRequests 설명 : 하나의 TCP 연결로 여러 요청을 처리할 수 있게 함. 권장 설정 : KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 5 KeepAliveTimeout 은 너무 길면 자원 낭비. 일반적으로 2~5초 권장. 4. 디렉토리 보호 설정 <Directory /var/www/html>     Options -Indexes     AllowOverride None     Require all granted </Directory> -Indexes : 디렉토리 인덱싱 비활성화. -  AllowOverride None : .htaccess 비활성화하여 보안 강화. Apache에서 HttpOnly 쿠키 설정하기 ✅ 방법 1: Apache에서 Set-Cookie 에 HttpOnly 추가하기 <IfModule mod_headers.c> Header edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure" </IfModule> 🔎 설명: mod_headers 모듈을 사용하여 모든 Set...
자세한 내용 보기

티베로 이관 작업 절차

-
티베로 이관 작업 절차 /* 기존 DB 환경 파악 신규 DB설치시 NLS_CHARACTERSET, DB_BLOCK_SIZE 기존과 동일해야 데이터 import 시 오류없이 import 된다. */ /*1.  터미널에서 기존 db 접속후 환경 파악 */ /* 티베로 db 접속 */ /* tbsql 사용자/패스워드@sid */ tbsql sys/tibero@SID /* DB_BLOCK_SIZE 확인 */ SHOW PARAMETER DB_BLOCK_SIZE SQL> SHOW PARAMETER DB_BLOCK_SIZE NAME                         TYPE     VALUE ---------------------------- -------- ---------------------------------------- DB_BLOCK_SIZE                INT32    8192 /* CHARACTER_SET 확인 */ SQL>  SELECT * FROM SYS._VT_NLS_CHARACTER_SET; CHARACTERSET_NAME NCHAR_CHARACTERSET_NAME ----------------- ----------------------- MSWIN949          UTF16 /*2. 테이블 스페이스 생성 스크립트 실제테이블 스크립트 용량 계산 추출 */ set linesize 1000 set pagesize 50000 set trimspool on spool create_tablespace.sql SELECT 'create tablespace ' || TABLESPACE_NAME || ' datafile ''' || ...
자세한 내용 보기

윈도우 네트워크 리소스 사용권한 오류

-
이미지
윈도우에서 네트워크 공유 오류 처리 이 네트워크 리소스를 사용할 권한이 없는 것 같습니다. 이 서버의 관리자에게 문의하여 액세스 권한이 있는지 확인하십시시오. 이렇게 메세지 뜨고 공유가 안될경우 cmd 콘솔창을 띄워서 기존에 등록되어 있는 연결정보를 다 삭제 하고 다시 접속하면 연결이 된다. 연결된 정보 확인 cmd 창에서  net use C:\Windows\System32>net use 새 연결 정보가 저장됩니다. 상태         로컬      원격                      네트워크 ------------------------------------------------------------------------------- OK                     \\192.168.6.20\IPC$       Microsoft Windows Network 명령을 잘 실행했습니다. 확인후 연결 끊기 net use /delete * 실행후 y를 눌러서 계속하면 현재 연결을 끊어 버립니다. 연결을 끊고 다시 네트워크 접속을 하면 정상적으로 접속이 됩니다. 전체가 아니고 해당 연결만 삭제 하는 방법은 net use /delete \\공유폴더명 위와 같이 하여도 해결이 안 될 경우 자경증명 관리자에서 저장된 자격증명 삭제하기 윈도우 키를 누른후 자격 증명 관리자 실행   자격증명 관리자 메뉴에 들어가서 Windows 자격증명 메뉴를 클릭하여 오류가 나는 아이피를 선택하여 제거 하고 다시 접속합니다.
자세한 내용 보기