•
React에서 코드 난독화(obfuscation)를 위한 기본 기능은 제공되지 않음. 그러나, 웹 브라우저에서 React 애플리케이션을 배포할 때 일반적으로 사용하는 번들러(Webpack, Vite 등)와 압축(minification) 작업이 약간의 난독화 효과를 제공함.
관련 작업 이름 및 과정
1.
Minification
•
코드에서 불필요한 공백, 주석, 줄바꿈 등을 제거
•
변수 이름을 짧게 변경
•
일반적으로 번들러(Webpack, Vite, Rollup 등)에서 Terser와 같은 플러그인을 사용
2.
Code Bundling
•
여러 파일을 하나의 번들 파일로 합침
•
코드 흐름을 한 파일에 압축해 간접적으로 읽기 어려워짐
3.
Source Map 관리
•
디버깅을 위해 원본 코드와 매핑된 소스 맵 제공
•
배포 환경에서는 소스 맵을 제거하여 난독화 수준 증가 가능
4.
Obfuscation (난독화) (선택 사항)
•
React 자체 기능은 아니지만, 추가 도구를 사용하여 코드 난독화 가능
•
JavaScript Obfuscator 또는 UglifyJS 같은 라이브러리를 활용
•
변수를 의미 없는 이름으로 변경하거나 코드를 복잡하게 재작성
React 환경에서 코드 난독화 적용 방법
1.
React 빌드 과정에서 Minification 활성화
•
npm run build 실행 시 기본적으로 코드 압축 및 최적화 진행 (CRA 기준)
2.
Obfuscation 도구 사용
npm install --save-dev javascript-obfuscator
Shell
복사
•
Webpack 플러그인으로 적용:
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
plugins: [
new JavaScriptObfuscator({
rotateStringArray: true
}, ['excluded_bundle_name.js'])
]
};
JavaScript
복사
3.
Source Map 비활성화
•
react-scripts 사용 시 GENERATE_SOURCEMAP=false로 설정
GENERATE_SOURCEMAP=false npm run build
Shell
복사
이 과정을 통해 React 애플리케이션 코드가 배포 시 더 읽기 어렵게 만들어짐.
안녕하세요
•
관련 기술 문의와 R&D 공동 연구 사업 관련 문의는 “glory@keti.re.kr”로 연락 부탁드립니다.
Hello
•
For technical and business inquiries, please contact me at “glory@keti.re.kr”
