MERN 스택 응용 프로그램을 효율적으로 설정하는 방법.

MERN 스택 응용 프로그램을 효율적으로 설정하는 방법.

반응형

도입

프로그래밍 분야의 초보든 전문가든 다른 개발자들이 시작 프로젝트 애플리케이션을 어떻게 설정하고 구성하는지 궁금했을 것이다.

따라서 이 문서에서는 운영 지원 애플리케이션을 설정하는 효율적이고 지능적인 방법을 다룹니다. 실제 애플리케이션을 구축하는 데 필요한 성능, 스타일링, 비동기 및 기타 필수 요소를 관리할 수 있는 도구, 프레임워크 및 모듈을 사용하여 MERN Stack 애플리케이션을 설정하는 방법에 대해 알아보겠습니다.

프로젝트 구조

패키지를 초기화하는 중입니다.Json 및 Node.js 모듈 설치.

먼저 mern-app-setup이라는 새 폴더를 만듭니다. 이 폴더로 이동하여 터미널에서 다음 명령을 입력하고 실행하여 전체 스택 애플리케이션을 초기화하십시오.

npm init

이름, 저자 및 라이센스와 같은 당사의 프로젝트에 대한 메타 정보를 수집하기 위한 일련의 질문을 받게 됩니다. 그럼 소포.json 파일은 모듈 종속성 목록뿐만 아니라 응용 프로그램에 대한 응답 및 메타 정보와 함께 자동으로 생성됩니다. 또는 yarn 패키지 관리자를 사용하는 경우 yarn init를 사용하여 초기화할 수도 있습니다. 다음 명령을 실행하기 전에 로컬 시스템에 최신 Node.js , npm 또는 실이 이미 설치되어 있는지 확인하십시오. 프로세스에 대한 자세한 내용을 보려면 각 링크를 클릭하십시오.

이제 필요한 모든 종속성 및 devDependencies를 설치하겠습니다. 패키지를 엽니다.JSON 개체를 수정하여 키 모듈 및 종속성을 추가합니다.

종속성:

"dependencies": { "@hot-loader/react-dom": "^17.0.1", "express": "^4.17.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hot-loader": "^4.13.0" },

DevDependencies: 패키지를 수정합니다.개발 중에 필요한 다음 노드 모듈을 devDependencies로 추가하기 위해 json:

"devDependencies": { "@babel/core": "^7.16.5", "@babel/preset-env": "^7.16.5", "@babel/preset-react": "^7.16.5", "babel-loader": "^8.2.3", "nodemon": "^2.0.15", "webpack": "^5.65.0", "webpack-cli": "^4.9.1", "webpack-dev-middleware": "^5.3.0", "webpack-hot-middleware": "^2.25.1", "webpack-node-externals": "^3.0.0" }

패키지를 저장합니다.json 및 run npm install을 명령줄에서 실행하여 이러한 모든 모듈을 가져와 프로젝트에 추가합니다. 프로젝트에 필요한 모든 모듈을 설치하고 추가한 다음 간단한 응용 프로그램을 컴파일하고 실행하기 위한 구성을 추가하겠습니다.

이러한 모든 모듈을 명령줄에 수동으로 설치하고 최신 버전 모듈 종속성을 사용할 수도 있지만, 1~2년 후 이 문서를 읽을 경우를 대비해서 이 방법을 사용합니다. 따라서 우리와 함께 따를 경우 여기에서 동일한 코드베이스 및 모듈 버전을 사용할 수 있습니다.

Babel, Webpack 및 Nodemon 구성.

이제 Babel, Webpack, Nodemon과 함께 개발 중에 코드의 변경 사항을 컴파일, 번들링 및 자동 재로드하도록 애플리케이션을 구성할 것입니다. 이러한 구성을 살펴보기 전에 각 모듈에 대해 몇 가지 알아보겠습니다.

바벨은 무엇인가?

바벨(Babel)은 에지 자바스크립트를 어떤 브라우저에서도 실행할 수 있는 플레인 이전 ES5 자바스크립트로 변환하는 자바스크립트 변환 컴파일러이다.클래스, fat 화살표, 멀티라인 문자열을 포함하여 새로운 ES6 사양으로 자바스크립트에 추가된 모든 구문설탕을 사용할 수 있다.

웹 팩이란 무엇입니까?

웹 팩은 프로젝트의 종속성 그래프(JS 파일에서 사용하는 가져오기 체인)를 통과하고 HTML에 첨부할 수 있는 정적 자바스크립트 파일을 만드는 자바스크립트 코드 번들러입니다.

바벨 구성

프로젝트의 루트 디렉터리에 .babelrc라는 파일을 생성하고 사전 설정 및 플러그인이 지정된 다음 JSON을 추가하십시오.

mern-app-clines/.babelrc

{ "presets": [ ["@babel/preset-env", { "targets": { "node": "current" } } ], "@babel/preset-react" ], "plugins": [ "react-hot-loader/babel" ] }

이 구성에서는 최신 JavaScript 구문을 Node.js 환경의 코드 및 React/JSX 코드 지원과 함께 변환하기 위해 Babel이 필요하다고 명시합니다. 리액트 핫로더/바벨 플러그인은 리액트 핫로더 모듈이 리액트 구성요소를 컴파일하는 데 필요합니다.

웹 팩 구성

우선 클라이언트 및 서버 코드와 클라이언트 코드를 별도로 번들로 구성하여 생산해야 합니다. 프로젝트 폴더에 webpack.config.client.js, webpack.config.server.js 및 webpack.config.client.production.js 파일을 생성합니다. 세 파일 모두 가져오기, 구성 개체의 정의, 마지막으로 정의된 구성 개체의 내보내기와 같은 코드 구조를 갖는다.

const path = require('path') const webpack = require('webpack') const CURRENT_WORKING_DIR = process.cwd() const config = { ... } module.exports = config ``` 구성 JSON 개체는 클라이언트 또는 서버 측 코드와 개발 대 프로덕션 코드에 특정한 값에 따라 다릅니다. 다음 섹션에서는 각 구성 인스턴스의 관련 속성에 밑줄을 그겠습니다. 개발을 위한 Client Side 웹 팩 구성 ```js const config={ name: 'browser', mode: 'development', devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client?reload=true', path.join(CURRENT_WORKING_DIR,'client/index.js') ], output:{ path: path.join(CURRENT_WORKING_DIR, '/dist'), filename: 'bundle.js', publicPath: '/dist/' }, module:{ rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ], resolve:{ alias:{ 'react-dom': '@hot-loader/react-dom' } } } ``` 이제 이 파일에 추가된 각 속성과 방법을 설명하겠습니다. - 이름 속성은 코드가 실행될 환경을 정의합니다. 여기서는 클라이언트 쪽 코드를 번들로 묶는 웹팩을 설정 중이라 브라우저를 지정해야 합니다. - 이 모드는 노드 환경을 지정된 값으로 설정하고 웹 팩에 따라 기본 제공 최적화를 사용하도록 지시합니다. 명시적으로 설정하지 않으면 기본값은 "production"입니다. - Devtool은 소스 맵이 생성되는 방법을 지정합니다. 일반적으로 소스 맵은 디버깅을 돕기 위해 압축 파일 내의 코드를 소스 파일의 원래 위치로 매핑하는 방법을 제공합니다. - 진입점은 클라이언트 폴더의 main.js와 함께 번들을 시작하는 데 사용할 웹 팩 모듈을 나타냅니다. - 출력 속성은 생성된 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법을 웹 팩에 알려줍니다. 이 경우 dist/bundle.js로 설정됩니다. - 모듈 속성을 사용하면 웹 팩이 다른 유형의 파일을 처리하고 응용 프로그램에서 사용하고 종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다. - 높은 수준의 로더는 테스트 및 사용이라는 두 가지 속성을 가집니다. 테스트 속성은 변환할 파일을 식별하고 변환에 사용할 로더를 나타냅니다. 이 경우 확장자가 .jsx인 모든 파일을 전치하기로 선택했으며, 사용한 전치 도구는 바벨로더입니다. - HotModuleReplacePlugin을 사용하면 반응형 핫로더를 핫 모듈을 교체할 수 있습니다. - NoEmitOnErrorsPlugin을 사용하면 컴파일 오류가 있을 때 내보내기를 건너뛸 수 있습니다. 또한 @hot-loader/react-dom 버전에 대한 점 반응-dom 참조에 웹 팩 별칭을 추가합니다. 이제 클라이언트측 구성 코드가 번들 코드인 bundle.js에서 브라우저에 로드될 준비가 되었습니다. 다음 섹션에서는 제작을 위한 웹팩을 구성할 것입니다. 생산을 위한 클라이언트 측 웹 팩 구성 프로덕션 모드에서 사용할 리액트 코드를 번들링하기 위해서는 config 객체를 다음과 같은 코드로 업데이트하여 생산을 위한 웹팩을 설정해야 합니다. mern-app-sup/webpack.config.client.production.js ```js const config={ mode: 'production', entry: [ path.join(CURRENT_WORKING_DIR, 'client/index.js') ], output: { path: path.join(CURRENT_WORKING_DIR, '/dist'), filename: 'bundle.js', publicPath: '/dist/' }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: [ 'babel-loader' ] } ] } } ``` 여기서의 구성은 개발 모드의 클라이언트 측 구성과 유사하지만 핫 재로드 플러그인과 디버그 구성이 필요하지 않으므로 이러한 구성은 프로덕션에서 필요하지 않습니다. 서버측 웹 팩 구성 서버측 웹 팩을 구성하려면 다음 코드를 추가하여 webpack.config.server.js를 업데이트하십시오. mern-app-sup/webpack.config.server.js ```js const nodeExternals=require('webpack-node-externals'); const config={ name: 'server', entry: [path.join(CURRENT_WORKING_DIR, './server/server.js')], target: "node", output:{ path: path.join(CURRENT_WORKING_DIR, '/dist/'), filename: 'server.generated.js', publicPath: '/dist/', libraryTarget: 'commonjs2' }, externals: [nodeExternals()], module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ 'babel-loader' ] } ] } } ``` 이 파일 안의 코드는 webpack.config.client.js와 구조가 동일합니다. 그러나 여기서는 모드 옵션을 정의하지 않았으며 libraryTarget 및 externals와 같은 일부 추가 속성을 추가하지 않았습니다. 웹 팩은 server.js와 함께 서버 폴더에서 번들을 시작한 다음 dist 폴더에 server.generated.js의 번들 코드를 출력합니다. 이제 번들 구성이 적용되면 Nodemon을 사용하여 개발 중에 코드 업데이트에서 생성된 이러한 번들을 자동으로 실행하기 위한 구성을 추가할 수 있습니다. Nodemon 구성 폴더 프로젝트에 nodemon.json이라는 파일을 생성하고 다음 구성을 추가하십시오. Mern-app-sweeton/mern ```js { "verbose": false, "watch": [ "./server" ], "exec": "webpack --mode=development --config webpack.config.server.js && node ./dist/server.generated.js" } ``` 이 구성은 개발 중에 서버 파일의 변경 사항을 자동으로 감시하도록 노드몬을 설정한 다음 필요에 따라 컴파일 및 빌드 명령을 실행합니다. 이제 우리는 웹팩과 바벨 구성을 마쳤습니다. 간단한 전체 스택 애플리케이션을 구축하여 구성이 제대로 되었는지 확인하겠습니다. 리액트를 사용한 프런트 엔드 뷰 응용 프로그램의 프런트엔드를 구축하기 위해 프로젝트의 루트 디렉터리에 template.js라는 루트 템플릿 파일을 만들어 HTML을 Respect 구성 요소로 렌더링합니다. 이 파일에 다음 코드를 추가합니다. 머른-앱-페어/페어js ```js export default () => { return ` Set up full stack MERN application ` } ``` 서버가 루트 URL에 대한 요청을 수신할 때, 이 HTML 템플릿은 브라우저에서 렌더링되며, ID가 "root"인 div 요소는 우리의 Responent 구성요소를 포함할 것이다. 다음으로 클라이언트라는 폴더를 만듭니다. 이 폴더 내에 index.js와 App.js의 두 파일을 만듭니다. index.js 파일은 HTML 문서의 div 구성요소에 최상위 항목 React 구성요소를 렌더링합니다. mern-app-disages/클라이언트/index.js ```js import React from 'react' import { render } from 'react-dom' import App from ‘./App' render(, document.getElementById('root')) ``` 이 경우 항목 React 구성 요소는 App.js에서 가져온 App 구성 요소입니다. mern-app-setup/클라이언트/App.js ```js import { hot } from 'react-hot-loader/root'; const App=()=>{ return ( Hello! We are setting up a real world application! ) } export default hot(App) ; ``` App.js 파일에는 기본 App React 구성 요소가 포함되어 있으며, 개발 중에 반응형 핫 로더를 사용하여 핫 재로딩을 가능하게 하기 위해 핫 엑스포트됩니다. 서버가 루트 URL에 대한 요청을 받았을 때 브라우저에 렌더링된 React 컴포넌트를 보기 위해서는 웹팩과 Babel 셋업을 사용하여 이 코드를 컴파일하고 번들로 묶고, 번들 코드로 루트 경로 요청에 응답하는 서버측 코드를 추가해야 합니다. 우리는 이것을 다음에 서버 쪽에서 구현할 것입니다. 노드 및 익스프레스가 있는 서버 프로젝트 폴더에 server라는 새 폴더를 생성하십시오. 이 폴더 안에 server.js, devBundle.js라는 두 개의 파일이 있습니다. server.js 파일은 서버를 설정하고 devBundle.js 파일은 개발 모드에 있는 동안 웹 팩 구성을 사용하여 React 코드를 컴파일하는 데 도움이 됩니다. 이제 클라이언트 측 코드 번들을 시작하고, 서버를 시작하고, 클라이언트에 정적 자산을 제공할 경로를 설정하고, 루트 경로에 GET 요청이 있을 때 템플릿에 Response 뷰를 렌더링하는 Node-Express 앱을 구현하겠습니다. 우리는 익스프레스 앱을 초기화하기 위해 익스프레스 모듈을 먼저 가져온 다음 이 익스프레스 앱을 사용하여 나머지 애플리케이션을 빌드할 것입니다. 이력서 코드는 다음과 같습니다. mern-app-hap/server/server.js ```js import express from 'express' const app = express() ``` 개발 중 리액트 앱 번들링 다음으로 서버가 실행 중일 때 클라이언트 측 코드를 컴파일하기 위해 웹 팩을 초기화하겠습니다. devBundle.js에서는 익스프레스 앱을 취하여 웹팩 미들웨어를 사용하여 코드를 컴파일, 번들링 및 서비스하고 개발 모드에서 핫 재로딩을 가능하게 하는 컴파일 방식을 설정할 것이다. mern-app-setup/server/devBundle.js ```js import webpack from 'webpack' import webpackMiddleware from 'webpack-dev-middleware' import webpackHotMiddleware from 'webpack-hot-middleware' import webpackConfig from './../webpack.config.client.js' import dotenv from 'dotenv'; dotenv.config(); const compile = (app) => { if(process.env.NODE_ENV == "development"){ const compiler = webpack(webpackConfig) const middleware = webpackMiddleware(compiler, { publicPath: webpackConfig.output.publicPath }) app.use(middleware) app.use(webpackHotMiddleware(compiler)) } } export default { compile } ``` 우리는 환경변수를 .env 파일에서 프로세스.env로 로드하기 위해 dotenv라는 또 다른 모듈을 수입했습니다. 명령줄에서 npm install dotenv를 실행하여 설치합니다. 이제 개발 모드에서 다음 줄을 추가하여 server.js에서 컴파일 메서드를 호출하겠습니다. mern-app-hap/server/server.js ```js import devBundle from './devBundle' const app = express() devBundle.compile(app) ``` dist 폴더에서 정적 파일 제공 웹팩은 클라이언트 쪽 코드를 개발 모드와 프로덕션 모드로 컴파일하고 번들 파일을 dist 폴더에 넣습니다. 클라이언트 측의 요청에 따라 이러한 정적 파일을 사용할 수 있도록 dist 폴더의 정적 파일을 제공하도록 server.js 파일을 업데이트합니다. mern-app-hap/server/server.js ```js import path from 'path' const CURRENT_WORKING_DIR = process.cwd() app.use('/dist', express.static(path.join(CURRENT_WORKING_DIR, 'dist'))) ``` 루트의 렌더링 템플릿 서버가 루트 URL / 에서 요청을 받으면 브라우저에 template.js를 렌더링합니다. server.js에서 다음 경로 처리 코드를 Express 앱에 추가하여 /에서 GET 요청을 수신하십시오. ```js import template from './../template' app.get('/', (req, res) => { res.status(200).send(template()) }) ``` 이제 지정된 포트에서 수신 요청을 수신하는 서버를 시작하도록 Express 앱을 구성하여 서버측 앱을 마무리하겠습니다. ```js let port = process.env.PORT || 3000 app.listen(port, (err) =>{ if (err) { console.log(err) } console.info('Server started on port %s.', port) }) ``` 이 코드를 사용하면 서버가 실행 중일 때 루트 경로에서 요청을 수락하고 "Hello!"로 응답 보기를 렌더링할 수 있습니다. 우리는 실제 애플리케이션을 설정하고 있습니다!"라고 브라우저에 있는 텍스트입니다. MERN Stack 애플리케이션 구성이 완료되었습니다. 이제 우리는 패키지에 스크립트를 추가해야 합니다.json 파일을 사용하면 응용 프로그램을 실행할 수 있습니다. 머른-앱-페어/페어제이슨 ```js "scripts": { "development": "nodemon", "build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js", "start": "NODE_ENV=production node ./dist/server.generated.js" } , ``` 지금까지 개발된 코드를 실행하고 모든 것이 작동하는지 확인하려면 다음 단계를 수행하십시오. - npm run development를 사용하여 명령줄에서 애플리케이션을 실행하여 개발을 위해 Nodemon , Webpack 및 서버를 시작합니다. 그런 다음 로컬 컴퓨터를 사용하는 경우 브라우저에서 루트 URL(http://localhost:3000)을 엽니다. "안녕하세요! 우리는 실제 애플리케이션을 설정하고 있습니다." - npm 실행 빌드를 사용하여 명령줄에서 애플리케이션을 실행하여 운영 모드에 사용할 클라이언트 및 서버 코드 번들을 생성합니다. - 프로덕션에서 번들 코드를 실행하는 npm start를 사용하여 명령줄에서 애플리케이션을 실행합니다. 결론: 우리는 웹팩 , 바벨, 노데몬으로 MERN 어플리케이션 설정을 마쳤습니다. 그러나 우리는 코드 품질을 개선하고 오류를 방지할 방법을 구현하지 않았습니다. 프리처와 에슬린트를 사용하면 만들 수 있습니다. 이 기사를 읽고 이를 위한 과정에 대한 아이디어를 얻으십시오. 이 리포지토리에서 전체 소스 코드를 찾을 수 있습니다. 더 놀라운 팁, 요령, 기사로 알림을 받기 위해 구독하는 것을 잊지 마세요.

from http://it-view.tistory.com/7 by ccl(A) rewrite - 2021-12-29 19:00:56