electron 빌드 및 설정

• 크로스 플랫폼 지원: electron-builder를 사용해 Windows, macOS, Linux 빌드 가능

• 경로 매핑 지원: craco, tsconfig.paths.json을 활용한 절대 경로 설정

• 코드 스타일링 및 린팅: eslint, prettier 적용

• C++ 네이티브 모듈 빌드: binding.gyp을 이용한 node-gyp 빌드

주요 설정 파일

1. craco.config.js (React + TypeScript 빌드 설정)

• craco를 사용하면 CRA(Create React App)의 웹팩 설정을 직접 수정할 필요 없이 커스텀 설정이 가능

• tsconfig.paths.json을 기반으로 절대 경로(alias) 설정 가능

/* eslint-disable @typescript-eslint/no-var-requires */
const CracoAlias = require('craco-alias');

module.exports = {
	// 파일 경로에 확장자를 명시하지 않아도 해당 확장자를 가진 파일을 찾아서 처리
	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.svg']
	},
	plugins: [
		{
			plugin: CracoAlias,
			options: {
				source: 'tsconfig', // tsconfig.json 참조
				baseUrl: '.',
				tsConfigPath: './tsconfig.paths.json',, // 경로 별칭 tsconfig.paths.json에서 가져옴
				debug: false
			}
		}
	]
};

• 웹팩(Webpack) 설정 커스텀: CRA 웹팩 설정 오버라이드

• 절대 경로(alias) 설정 예를 들어, @components/Button → src/components/Button로 인식 가능

2. tsconfig.json (TypeScript 컴파일러 설정)

{
	"compilerOptions": {
		"target": "es5",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"noFallthroughCasesInSwitch": true,
		"module": "CommonJS",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"jsx": "react",
		"outDir": "./dist"
	},
	
	"include": ["src/**/*.ts", "src/**/*.tsx", "app/*", "src/grpcModules"],
	"exclude": ["node_modules"],
	"extends": "./tsconfig.paths.json",
	"files": ["custom.d.ts", "global.d.ts"]
}

3. tsconfig.paths.json (절대 경로 설정)

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

• @/components/Button → src/components/Button

• @/assets/images/logo.png → src/assets/images/logo.png

• craco.config.js에서 tsConfigPath: './tsconfig.paths.json'로 참조

4. eslint.config.mjs (코드 품질 검사)

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';

export default [
	{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
	{ languageOptions: { globals: globals.browser } },
	pluginJs.configs.recommended,
	...tseslint.configs.recommended,
	pluginReact.configs.flat.recommended,
	{
		plugins: ['prettier'],
		extends: ['plugin:prettier/recommended'],
		rules: {
			'prettier/prettier': 'error',
		},
	},
];

• JavaScript/TypeScript 기본 규칙 준수

• React 코드 스타일 체크

• Prettier와 통합하여 자동 코드 포매팅 적용

5. .prettierrc (코드 포매팅)

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": true,
  "tabWidth": 2,
  "printWidth": 120,
  "trailingComma": "none",
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "parser": "json"
      }
    }
  ]
}

• singleQuote: true → '(싱글 쿼테이션) 사용

• semi: true → 세미콜론 강제

• printWidth: 120 → 한 줄 길이 제한(120자)

• tabWidth: 2, useTabs: true → 탭 간격 2

6. binding.gyp (네이티브 모듈 빌드 설정)

{
  "targets": [{
    "target_name": "audio_detector",
    "sources": [
      "./app/module/audio_detector/audio_detector.cpp",
      "./app/module/audio_detector/main.cpp"
    ],
    "include_dirs": [
      "<!@(node -p \"require('node-addon-api').include\")",
      "./app/module/audio_detector"
    ],
    "libraries": [
      "-lole32",
      "-luuid"
    ]
  }]
}

1. node-gyp rebuild 실행

2. audio_detector.node가 dist/에 생성됨

3. 빌드 과정 (실행 흐름)

1. yarn build 실행

2. 오디오 모듈 빌드
• yarn rebuild-audio → node-gyp로 C++ 네이티브 모듈 컴파일
• yarn copy-audio → dist/audio_detector.node로 복사

3. TypeScript 컴파일 (tsc)

4. React 정적 빌드 (craco build)

5. Electron 패키징 (electron-builder)
• Windows → .exe
• macOS → .dmg
• Linux → .AppImage

• dist/ → TypeScript 빌드 파일

• output/ → 최종 실행 파일 (.exe, .dmg, .AppImage)