분류 javascript

MERN stack A to Z: Part 1 (1)

컨텐츠 정보

  • 조회 250 (작성일 )

본문

이 튜토리얼은 MERN 스택에 관한 것입니다. 우리는 이 인기 있는 스택과 간단한 CRUD (만들기, 읽기, 업데이트 및 삭제) 애플리케이션을 처음부터 개발하여 사용하는 방법을 살펴볼 것입니다.


응용 프로그램 자체에 중점을 두지 않고 MERN 설정에 중점을 둘 것입니다. 프로젝트는 매우 간단하지만, 가능한 최고의 프로젝트 구조를 따라 산업 표준 수준으로 향상 시켜 누구나 보일러 플레이트 프로젝트로 사용할 수 있도록 노력할 것입니다.


https://blog.logrocket.com/mern-stack-a-to-z-part-1/ 


"MERN 스택"이라는 문구는 다음 기술을 나타냅니다.

  • MongoDB : MongoDB는 크로스 플랫폼 문서 지향 데이터베이스 프로그램입니다.
  • Express.js : Express.js 또는 간단히 Express는 Node.js를 위한 웹 애플리케이션 프레임워크입니다.
  • React : React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
  • Node.js : Node.js는 브라우저 외부에서 JavaScript 코드를 실행하는 오픈 소스, 크로스 플랫폼 JavaScript 런타임 환경입니다.

이 자습서를 간단하게 만들기 위해 두 부분으로 나누어 보겠습니다.

  • 1 부 :이 파트에서는 ​​서버 측 작업을 완료하려고 합니다. 우리는 Node와 Express를 사용하여 MongoDB와 연결할 것입니다. 그런 다음 몇 가지 API를 만듭니다.
  • 2 부 : 다음 섹션에서는 React를 사용하여 사용자 인터페이스를 구축하는 프론트 엔드 부분에 중점을 둘 것입니다. 그런 다음 프런트 엔드를 백엔드에 연결합니다.

참고 :이 시리즈에서는 Node.js, Express, MongoDB 및 React에 대한 기본적인 이해를 가정합니다. 


Express 및 노드로 서버 설정 


npm 패키지 초기화 


첫 번째 작업은 프로젝트 폴더를 만드는 것입니다. 터미널을 통해 폴더를 입력 한 후 다음 명령을 실행하십시오.


$ npm init

이제 패키지 이름, 버전, 진입 점 등에 대한 몇 가지 질문을 합니다. 기본값을 유지하려면 Enter 키를 누르십시오. 그 후에, 당신은 다음과 같은 것을 얻을 것이다 :


Creating Our package.json File 


예를 선택하면 준비가 되었습니다. package.json이라는 파일을 작성합니다.


종속성 패키지 설치 


이제 몇 가지 종속성을 추가하고 싶습니다.


$ npm i express mongoose body-parser bcryptjs validation

위의 명령을 입력하거나 복사하고 Enter 버튼을 누르십시오. 다음과 같은 것을 보게 될 것입니다 :


Adding Project File Dependencies 

  • bcryptjs는 Niels Provos와 David Mazières가 디자인한 암호 해싱 기능입니다.
  • body-parser를 사용하면 요청 전체에서 데이터를 얻을 수 있습니다.
  • express는 우리의 주요 틀입니다.
  • mongoose는 MongoDB와 연결 / 상호 작용하는 데 사용됩니다
  • validation (이름에서 알 수 있듯이)는 유효성 검사에 사용됩니다.

이제 dev 종속성으로 nodemon을 추가하려고 합니다. 추가하지 않으려면 생략해도 됩니다 (선택 사항).


$ npm i -D nodemon

nodemon은 소스의 변경 사항을 모니터링하고 서버를 자동으로 다시 시작하는 유틸리티입니다.


이 시점에서 package.json은 다음과 같아야 합니다.


package.json File With Dependencies 


진입 점 설정하기 


이제 진입 점으로 app.js라는 파일을 만듭니다. 아래 명령 (Mac의 경우)을 사용하여 프로젝트 폴더에서 이 파일을 만들 수 있습니다.


$ touch app.js

그런 다음 아래 코드를 붙여 넣으십시오.


// app.js

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Hello world!'));

const port = process.env.PORT || 8082;

app.listen(port, () => console.log(`Server running on port ${port}`));

이제 명령을 실행하십시오.


$ node app

서버가 포트 8082에서 실행되는 것을 볼 수 있습니다. 또한 브라우저에서 확인할 수도 있습니다. 브라우저를 열고 http : // localhost : 8082를 입력하십시오.


이 시점에서 변경 사항이 있으면 서버를 수동으로 다시 시작해야 합니다. 그러나 우리가 nodemon을 설정하면 매번 다시 시작할 필요가 없습니다. nodemon은 변경 사항이 있는지 확인하고 서버를 자동으로 다시 시작합니다.


따라서 package.json 파일의 스크립트를 조금 변경하면 됩니다. 아래를 보십시오 :

 

// package.json

{
  "name": "mern_a_to_z",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "app": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nurislam03/MERN_A_to_Z.git"
  },
  "author": "Nur Islam",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nurislam03/MERN_A_to_Z/issues"
  },
  "homepage": "https://github.com/nurislam03/MERN_A_to_Z#readme",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mongoose": "^5.5.15",
    "validation": "0.0.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

이제 다음 명령을 사용하여 프로젝트를 실행할 수 있습니다.


$ npm run app

이 시점에서 오류가 발생하면 아래 명령을 실행하십시오.


$ npm install
$ npm run app

모든 것이 올바르게 되면 터미널에 다음과 같은 변화가 나타납니다.


Running Project Successfully