본문 바로가기

부트캠프교육중301

리액트와 웹팩 create-react-app 이라는 툴 체인을 이용하면 쉽게 리액트에 접근할수있다. 리액트를 “간단하게" 시작하기 위해 create-react-app에서 사용되는 툴 목록은 어마어마하다. { // ... "dependencies": { "@babel/core": "^7.16.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@svgr/webpack": "^5.5.0", "babel-jest": "^27.4.2", "babel-loader": "^8.2.3", "babel-plugin-named-asset-import": "^0.3.8", "babel-preset-react-app": "^10.0.1", "bfj": "^7.0.2", "browserslis.. 2023. 3. 21.
웹팩의 핵심 개념 -webpack은 다양한 환경과 target을 컴파일한다. -target의 기본값은 web이다. (적용하지 않으면 이 기본값으로 적용된다.) -이부분에는 web 외에도 다양한 환경을 컴파일 할수있다. esX를 넣으면 지정된 ECMAScript 버전으로 컴파일할수있다. module.exports = { target: ["web", "es5"], }; -이 config파일은 브라우저와 동일한 환경에서 사용하기 위하여 컴파일할 것이며, 작성된 코드를 es5 버전으로 컴파일 하겠다고 지정한 것임을 알수있다. -webpack에서의 entry는 프론트엔드 개발자가 작성한 코드의 "시작점"으로 이해하면 편하다. -React도 index.js에서 HTML element 하나.. 2023. 3. 20.
웹팩 Webpack webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다. https://webpack.kr/ webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr - 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. - 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다. # 모듈 번들러의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또.. 2023. 3. 20.
빌드와 번들링 정리 # 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정입니다. #번들링은 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다. #현대 웹 개발에서, 프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일묶음 이다. #사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받는다. 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공하게 된다. #번들링의 필요성 -큰 문제는 없지만, 이러한 상황이 일어난다면 어려움에 처할수있다. 두개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충.. 2023. 3. 20.

티스토리툴바