우선 webpack.config.js 파일을 작성해 줌. module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'app.bundle.js', } } React 앱을 빌드하기 위해서 필요한 로더에는 JSX 표현을 웹 브라우저에서 읽을 수 있는 표현으로 바꿔주는 babel-loader, Javascript 파일에서 CSS 파일을 불러오기 위한 style-loader, css-loader, HTML도 같이 컴파일해서 빌드해주는 html-webpack-plugin가 있음. 1. style-loader, css-loader 설정하기 npm ins..
1. React에서 환경 변수 사용하기 Create-React-App으로 React 앱을 만들면 React 환경 변수를 자동으로 잡아주기 때문에 프로젝트 최상위 위치에 .env.develpoment, .env.production을 만들어 REACT_APP_로 시작하는 환경 변수를 사용할 수 있음 // .env.development REACT_APP_CLIENT_KEY = 123456 REACT_APP_CLIENT_ID = react 이렇게 설정한 환경 변수는 dotenv 등 별도의 모듈 설치 없이 process.env로 접근이 가능함. // App.js const TEST = process.env.REACT_APP_TEST 2. Webpack 빌드 A. dotenv 모듈 # 우리가 React에서 사용할 ..
1. Webpack의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가함. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데, JavaScript 언어의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때에 생겨나는 네트워크 쪽의 코스트도 신경써줘야만 했음. 그래서 이런 복잡성에 대응하기 위해 하나의 시작점(ex. React App의 index.js)으로부터 의존성을 가지는 모듈†을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 됨. † 의존적 관계에 있는 파일들(import, export..
기타 2022. 7. 26. 17:14
우선 webpack.config.js 파일을 작성해 줌. module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'app.bundle.js', } } React 앱을 빌드하기 위해서 필요한 로더에는 JSX 표현을 웹 브라우저에서 읽을 수 있는 표현으로 바꿔주는 babel-loader, Javascript 파일에서 CSS 파일을 불러오기 위한 style-loader, css-loader, HTML도 같이 컴파일해서 빌드해주는 html-webpack-plugin가 있음. 1. style-loader, css-loader 설정하기 npm ins..
기타 2022. 7. 26. 15:48
1. React에서 환경 변수 사용하기 Create-React-App으로 React 앱을 만들면 React 환경 변수를 자동으로 잡아주기 때문에 프로젝트 최상위 위치에 .env.develpoment, .env.production을 만들어 REACT_APP_로 시작하는 환경 변수를 사용할 수 있음 // .env.development REACT_APP_CLIENT_KEY = 123456 REACT_APP_CLIENT_ID = react 이렇게 설정한 환경 변수는 dotenv 등 별도의 모듈 설치 없이 process.env로 접근이 가능함. // App.js const TEST = process.env.REACT_APP_TEST 2. Webpack 빌드 A. dotenv 모듈 # 우리가 React에서 사용할 ..
기타 2022. 7. 25. 12:36
1. Webpack의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가함. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데, JavaScript 언어의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때에 생겨나는 네트워크 쪽의 코스트도 신경써줘야만 했음. 그래서 이런 복잡성에 대응하기 위해 하나의 시작점(ex. React App의 index.js)으로부터 의존성을 가지는 모듈†을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 됨. † 의존적 관계에 있는 파일들(import, export..