on
최신 웹 스택 이해: 웹 팩 - DevServer, React
최신 웹 스택 이해: 웹 팩 - DevServer, React
반응형
(이 튜토리얼은 웹 팩 v5를 사용하여 작성되지만 일반 개념은 모든 버전에 적용됩니다.)
목차.
씌우다
프로젝트 초기화
소스 맵
웹 팩 데브 서버
반응 및 JSX
활자
마무리하기
씌우다
이 튜토리얼에서는 이 튜토리얼에 설명된 웹 팩의 기본 사항에 이미 익숙하다고 가정합니다.
최신 웹 스택 이해: 웹 팩 - 기본 사항
사용하지 않는 코드를 가지고 다닐 필요 없이 더 큰 라이브러리에서 개별 파일과 함수를 가져올 수 있는 방법을 시연했습니다.
이 튜토리얼에서는 소스 맵, 웹 팩의 DevServer, 반응 및 유형 스크립트를 모두 웹 팩 프로젝트에 도입하는 방법을 소개합니다.
자, 이제 본격적으로 시작하기 전에 작업 환경을 설정해 보겠습니다.
프로젝트 초기화
다음 디렉터리 구조를 만듭니다.
root | webpack.config.js └───src │ │ script.js | | index.html
src/index.src
Webpack Example
src/script.js
const element = document.createElement("h1"); element.innerHTML = "Welcome"; document.body.appendChild(element);
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { mode: "none", entry: "./src/script.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist"), clean: true, }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: "./src/index.html", }), ], };
이제 종속성을 설치하고 웹 팩 명령을 실행하여 dist 폴더를 생성합니다.
npm init -y npm install webpack webpack-cli html-webpack-plugin --save dev npx webpack
dist 폴더를 성공적으로 서비스하고 시작 메시지가 나타나면 튜토리얼을 시작할 준비가 된 것입니다.
소스 맵
소스 맵은 변환이 발생하기 전에 소스 코드의 원본에 대한 정보를 다른 도구에 제공하는 파일 유형(또는 파일 내의 주석)입니다.
예를 들어, 만약 우리가 웹팩을 단 한 줄 .js 파일에서 실행한다면, 번들 버전은 웹팩에 의해 주입된 소량의 추가 코드를 포함할 것이다. 즉, 1라인에 작성한 코드가 번들의 10라인이나 10000라인에 실제로 나타날 수 있습니다.
이렇게 하면 브라우저가 소스 코드의 원래 줄이 아닌 실행 중인 번들을 기준으로 다른 줄에서 오류를 보고할 때 오류를 찾기 어렵습니다.
소스 맵이 이 문제를 해결해 줍니다. 시범을 보여봅시다.
먼저 script.js 파일에 오류를 추가할 것입니다.
src/script.js
throw Error("Something happened!"); const element = document.createElement("h1"); element.innerHTML = "Welcome"; document.body.appendChild(element);
npx 웹 팩을 실행하고 "오류" 프로그램을 살펴봅니다. dist 디렉토리를 제공하고 브라우저의 개발 콘솔을 살펴봅니다.
웹 팩이 main.js의 3행에서 오류를 보고하고 있습니다(회선 번호가 다를 수 있음).
웹 팩이 출력 main.js 파일에 srow Error 코드를 넣었기 때문에 기술적으로 정확합니다.
올바른 줄 번호를 보고하도록 구성하려면 웹 팩 구성에 다음 줄을 추가하십시오.
webpack.config.js
... module.exports = { ... devtool: "inline-source-map", ... };
이제 npx 웹 팩을 실행하고 콘솔을 살펴봅니다.
오류가 현재 코드에서 실제로 어디에 있는지 올바르게 보고되고 있습니다!
웹 팩 데브 서버
웹팩의 DevServer는 변경 사항에 대한 즉각적인 재로드 및 즉각적인 피드백을 제공함으로써 개발 시간을 단축할 수 있는 놀라운 도구입니다.
DevServer는 파일을 자동으로 감시하고 저장할 때 번들을 자동으로 업데이트합니다. 라이브 서버를 사용하는 동안 번들은 dist 폴더가 아닌 메모리(RAM)에 저장되므로 훨씬 더 빠르게 업데이트할 수 있습니다.
DevServer를 구성하고 시도해 봅시다. 먼저 테스트할 수 있는 JS 파일을 만드는 것부터 시작하겠습니다. 오류 발생 줄을 제거하고 스크립트.js를 업데이트하여 다음을 일치시킵니다.
src/script.js
const element = document.createElement("h1"); element.innerHTML = "Welcome"; document.body.appendChild(element);
그런 다음 웹 팩 구성에 devServer 속성을 추가합니다.
webpack.config.js
... module.exports = { ... devServer: { static: './dist', }, ... };
그런 다음 Dev서버를 설치합니다.
npm install --save-dev webpack-dev-server
마지막으로 다음 명령을 실행합니다.
npx webpack serve --open
기본적으로 웹 팩은 포트 8080에서 앱을 제공합니다. --open(열기) 플래그가 자동으로 해당 페이지의 브라우저를 엽니다.
스크립트.js의 시작 문자열을 다른 항목으로 변경해 보면 페이지가 즉시 업데이트됩니다. 이를 통해 즉각적인 피드백을 통해 매우 원활한 개발 환경을 구축할 수 있습니다.
다음은 React와 JSX를 소개하는 방법에 대해 알아보겠습니다.
반응 및 JSX
(이 튜토리얼에서는 React v17을 사용하지만 모든 버전에서 개념은 동일합니다.)
이 자습서에서는 React 및 JSX의 기본 사항에 이미 익숙하다고 가정합니다. 새로 고침이 필요한 경우 반응 문서를 시작하는 것이 가장 좋습니다.
이 섹션의 목표는 JSX를 일반 자바스크립트 코드로 변환하기 위해 웹 팩을 구성하는 방법을 보여주는 것입니다. 웹 팩은 이를 수행하기 위해 Babel을 위한 로더에 의존합니다. Babel의 작동 방식을 잘 모르는 경우 이 튜토리얼에서 알아야 할 모든 사항을 설명합니다.
최신 웹 스택의 이해: Babel
첫 번째 단계는 React 구성 요소를 만들기 위해 React를 설치하고 스크립트.js 파일을 업데이트하는 것입니다. 다음 명령으로 React를 설치하는 것으로 시작합니다.
npm install react react-dom --save-dev
다음으로 JSX를 사용하도록 스크립트.js 파일을 업데이트합니다. JSX는 자바스크립트 위에 있는 특수 구문이며, 그 자체로는 유효한 자바스크립트가 아니기 때문에, 다른 파일 확장자가 필요합니다.
스크립트.js를 삭제하고 다음 코드와 동일한 위치에 스크립트.jsx를 만듭니다.
src/script.jsx
import ReactDOM from 'react-dom'; const Welcome = () => { return Welcome; }; const mountingNode = document.querySelector("#root"); ReactDOM.render(, mountingNode);
React에 익숙한 경우, id="root"인 루트 노드에 구성 요소를 마운트하는 것을 볼 수 있습니다. 다음을 포함하도록 index.html를 업데이트하십시오.
src/index.src
Webpack Example
또한 변환을 실행할 패키지를 설치해야 합니다.
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
위의 목록에서 여러분은 우리가 바벨 튜토리얼에서 배운 바벨의 모든 표준 조각을 볼 수 있습니다.
유일한 새로운 것은 번들링 프로세스의 일부로 babel을 실행하는 웹 팩용 로더인 babel-loader입니다.
이제 babel loader를 사용하도록 웹 팩 구성을 업데이트하겠습니다.
webpack.config.js
... module.exports = { entry: "./src/script.jsx", ... module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }], ], }, }, }, ], }, optimization: { nodeEnv: 'development', }, }
여기서 짐을 풀어야 할 것이 몇 가지 있으니 한 번에 하나씩 풀어 봅시다.
항목: JS가 아닌 JSX 확장을 사용하도록 업데이트되었습니다. 이 작은 변화는 일반적인 오류 원인이므로 놓치지 마십시오.
규칙: 프로젝트의 모든 JSX 파일에서 babel loader가 실행되는 것을 보장하는 정규식이 있습니다. React v17 이상을 사용하는 경우 번들에 JSX 런타임을 포함하도록 Babel에게 알려주는 {runtime: "automatic" }이 있어야 JSX 코드에 React를 가져올 필요가 없습니다.
최적화: 이는 오류의 또 다른 주요 원인입니다. 대응에는 process.env가 필요합니다.NODE_ENV는 웹 팩과 유사하게 정의(개발 또는 프로덕션으로 설정)되어야 합니다. 일단 개발에 착수하겠습니다. 프로세스가 정의되지 않은 오류가 표시되면 이 값을 잊어버렸다는 의미일 수 있습니다.
이제 npx webpack serve --open 명령(디스크로 출력하여 직접 서비스하려는 경우 npx webpack)을 실행합니다. 모든 작업이 순조롭게 진행되면 시작 페이지가 다시 나타납니다.
축하합니다! 이제 React 및 JSX 지원을 웹 팩 구성에 구현했습니다.
마지막 섹션에서는 Typescript를 구현하는 방법을 설명합니다.
활자
(이 튜토리얼에서는 Typescript v4.4를 사용하지만 모든 버전에서 개념은 동일합니다.)
튜토리얼의 이 절에서는 사용자가 이미 Typescript의 기본 사항에 익숙하다고 가정합니다. 새로 고침이 필요한 경우 유형 문서부터 시작하는 것이 좋습니다.
특히 JSX와 React를 함께 사용하는 경우 Typescript를 웹 팩 구성에 통합하는 방법을 처음 보는 사람이 이해하기 어렵고 혼란스러울 수 있습니다.
이러한 이유로 Create React App과 같은 툴이 인기를 끌고 있습니다. 왜냐하면 이러한 툴이 모든 구성을 처리하기 때문입니다. 그러나 무언가를 구성해야 할 때는 문제가 있을 수 있으므로 이 튜토리얼이 존재합니다.
타이프스크립트, 웹팩 및 개벨은 때때로 제공되는 기능에서 중복될 수 있습니다. 본 튜토리얼에서는 각 튜토리얼이 무엇을 하고 있는지 이해하기 위해 각 튜토리얼을 살펴봅니다. 따라서 각 튜토리얼을 직접 관리하는 최선의 방법을 더 잘 이해할 수 있습니다.
먼저 Typescript 설치부터 시작하겠습니다.
npm install typescript --save-dev
Typescript를 설치한 후에는 프로젝트 내에서 초기화해야 합니다. 그러면 웹 팩 구성과 유사한 Typescript 옵션을 구성할 수 있는 tsconfig.json 파일이 자동으로 생성됩니다.
npx tsc --init
(이 구문을 주의하세요, 웹팩에서처럼 npx 패키지 실행기를 사용하고 있습니다. tsc는 Typescript에 대한 명령줄 프로그램의 이름입니다.)
다음으로 스크립트.jsx 파일에 몇 가지 Typescript 구문을 추가하겠습니다. JSX로의 전환에 대한 SImilar, Typescript는 또한 파일이 Typescript를 사용하고 있음을 나타내는 자체 형식이 필요합니다.
Typescript 파일의 기본 확장자는 .ts이지만 JSX를 사용하는 경우 확장자는 .tsx입니다. 파일 확장명을 업데이트하고 코드를 추가하겠습니다.
스크립트.tsx
import ReactDOM from 'react-dom'; const x: number = 5; // <-- NEW const Welcome = () => { return Welcome; }; const mountingNode = document.querySelector("#root"); ReactDOM.render(, mountingNode);
VS 코드와 같은 IDE를 사용하는 경우 몇 가지 오류가 강조 표시될 수 있습니다. 첫 번째는 ReactDOM에 유형이 포함되어 있지 않다는 것입니다. 두 번째 오류는 JSX 구문을 강조 표시합니다. 기본적으로 JSX를 처리하도록 Typescript가 구성되어 있지 않기 때문에 JSX를 처리해야 합니다.
먼저 ReactDOM에 대한 유형 정보를 제공합니다.
해당 유형과 함께 제공되지 않는 라이브러리 및 패키지에는 유형 패키지를 사용할 수 있는 경우가 많습니다.
ReactDOM용 라이브러리에서 이러한 유형을 가져오기 위해 다음 명령을 실행합니다.
npm install @types/react-dom --save-dev
그러면 ReactDOM의 누락된 유형이 수정됩니다. 다음으로 JSX를 처리하도록 Typescript를 구성하겠습니다.
tsconfig.json의 모든 옵션을 이해하는 것은 이 튜토리얼의 범위를 벗어나지만 생성된 파일에 자동으로 생성된 설명 시스템을 구현했기 때문에 우리는 이제 망쳤다. 이것이 충분하지 않으면 여기에서 전체 tsconfig 설명서를 찾을 수 있습니다.
tsconfig 파일에서 jsx 속성을 설정해야 합니다. 기본값은 보존입니다. 이것은 Typescript가 JSX를 완전히 무시한다는 것을 의미한다. 그러면 .js 파일 대신 .jsx 파일이 출력되고 다른 도구를 사용하여 JSX를 제거할 수 있습니다.
테스트해 봅시다. tsconfig 파일 업데이트:
tsconfig.json
{ "compilerOptions": { ... "jsx": "preserve", ... } }
그런 다음 npx tsc를 실행합니다. src 디렉토리에서 스크립트.jsx 파일이 생성되는 것을 볼 수 있습니다. 이것은 검사 및 제거 형식을 포함하는 스크립트.tsx 파일입니다. 좋아! 잘 진행되고 있어.
Jsx의 다른 설정으로 자유롭게 실험해 보십시오. 예를 들어 react는 사용자의 JSX를 제거하고 .js 파일을 출력하지만 React를 가져오는 것으로 가정합니다. react-jsx 값은 React v17의 새 JSX 런타임을 사용하기 때문에 가져올 필요가 없습니다.
JSX를 변환하는 데 사용하는 도구는 별 차이가 없는 것으로 알고 있습니다. 우리는 이미 이전 섹션에서 Babel이 JSX를 처리하도록 구성했기 때문에 Babel을 위한 보존으로 남겨둘 것입니다.
만약 다른 이유보다 하나를 선택해야 하는 좋은 이유가 있다면, 우리에게 자유롭게 댓글로 알려주세요!
이 때 테스트 중에 생성한 스크립트.js 또는 스크립트.jsx 파일을 제거할 수 있습니다. 스크립트.tsx 원본 파일만 있으면 됩니다.
웹 팩 프로세스에 Typescript 단계를 추가하는 두 가지 옵션이 있습니다.
ts-loader를 사용하여 번들링 프로세스 중에 유형 확인을 수행할 수 있습니다. 유형 오류가 있으면 빌드가 취소되고 오류를 보고합니다.
Babel을 사용하여 유형 정보를 간단히 제거할 수 있습니다. 이는 번들링 전에 다른 도구를 사용하여 체크를 입력한다고 가정합니다. 오류 발생 시 빌드 프로세스를 취소하지 않습니다.두 옵션을 모두 구성하고 자신에게 맞는 옵션을 선택하는 방법에 대해 알아봅니다.이 옵션은 유형 확인 및 유형 제거를 수행합니다. 로더를 설치해야 합니다.
npm install ts-loader --save-dev
옵션 1: ts-로더
그런 다음 웹 팩 구성을 업데이트하여 다음 줄을 포함합니다.
webpack.config.js
... module.exports = { entry: "./src/script.tsx", // <-- NEW ... module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }], ], }, }, }, { test: /\.tsx?$/, use: "ts-loader" }, // <-- NEW ], }, ... };
여기에 두 개의 새로운 노선이 있습니다. 첫 번째는 진입점에 대한 업데이트입니다. 우리는 지금 .jsx 대신 script.tsx 파일을 목표로 삼아야 합니다.
두 번째는 ts-loader입니다. 로더는 연쇄적으로 발생하며 역순으로 실행됩니다. 따라서 Typescript Loader를 끝에 배치하여 변환된 JSX 파일을 체인으로 전달해야 합니다.
npx 웹 팩 serve --open을 실행하여 결과를 확인합니다. 모든 작업이 잘 진행되면 유형 확인과 함께 시작 페이지가 나타납니다.
형식 체크인 동작을 보려면 다음 오류를 적용해 보십시오.
스크립트.tsx
... const x: number = 'this is a string'; ...
워치가 활성화된 상태에서 DevServer를 실행하면 브라우저와 터미널 모두에 오류가 즉시 나타납니다.
Type 'string' is not assignable to type 'number'
옵션 2: babel/preset-typescript
두 번째 옵션은 웹 팩 빌드 프로세스 전에 고유한 유형 검사를 실행하고 있다고 가정합니다. 이 경우 ts-loader를 사용하여 다시 실행할 필요가 없습니다.
Babel에는 확인 없이 간단히 유형을 제거할 수 있는 플러그인이 있습니다. 다음 명령을 실행하여 설치합니다.
npm install @babel/preset-typescript --save-dev
다음으로 웹 팩 구성을 업데이트합니다. 이전 단계를 따를 경우 ts 로더를 제거해야 합니다.
webpack.config.js
... module.exports = { entry: "./src/script.tsx", ... module: { rules: [ { test: /\.m?[jt]sx$/, // <-- NEW exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }], "@babel/preset-typescript", // <-- NEW ], }, }, }, // { test: /\.tsx?$/, use: "ts-loader" }, ], }, ... };
두 줄의 새 줄에 주목해야 한다. 첫 번째는 테스트 정규식에 대한 업데이트입니다. 이제 확장명이 JSX 또는 TSX인 파일에서 babel-loader를 실행해야 합니다. [jt]는 "j 또는 t"를 의미하는 정규식 구문의 일부입니다.
두 번째는 사전 설정 배열 끝에 @babel/preset-typescript를 추가하는 것입니다. Babel은 웹 팩과 마찬가지로 이러한 사전 설정을 역순으로 실행합니다. 우리는 JSX를 처리하기 전에 먼저 타입을 벗겨내고 싶습니다.
npx webpack serve --open을 실행하면 페이지의 큰 "Welcome" 메시지가 다시 표시됩니다. 유형 오류를 도입해도 웹 팩은 컴파일되기 때문에 먼저 유형 검사를 별도의 프로세스로 수행해야 합니다.
마무리하기
이 튜토리얼을 통해 JSX 및 Typescript 코드 변환의 복잡한 에코시스템과 즉각적인 재로딩을 지원하는 로컬 개발 서버를 실행할 때의 이점을 더 잘 이해하셨기를 바랍니다.
이러한 도구는 설정하기가 어렵지만, 규모에 따라 복잡한 웹 애플리케이션을 개발할 수 있는 매우 풍부하고 사용자 친화적인 작업 환경을 제공합니다. 직접 구성하는 방법을 배우면 향후 빌드 도구에서 발생할 수 있는 문제를 해결할 수 있는 훨씬 강력한 위치에 있게 됩니다.
이 시리즈의 다른 항목을 확인하십시오! 도움이 될 만한 의견이나 질문을 자유롭게 남겨 다른 사람과 공유하십시오.
최신 웹 스택 이해: 로컬 웹 서버 실행
최신 웹 스택의 이해: Babel
최신 웹 스택 이해: 웹 팩 - 기본 사항
최신 웹 스택 이해: 웹 팩 - 로드러, 최적화
최신 웹 스택 이해: 웹 팩 - DevServer, React트위터의 @eagleson_alex
읽어주셔서 감사합니다. 채널을 고정하세요!
from http://issue-disk.tistory.com/21 by ccl(A) rewrite - 2021-10-10 09:00:48