MERN을 사용하는 ECOMMERCE 웹 사이트 Part-1 ( 프로젝트 설정 )

1단계 프로젝트에서 작업할 폴더를 만들고 이름을 전자상거래로 지정합니다.

Step-2 두 개의 폴더를 백엔드와 프론트엔드로 만드는 내부

3단계 백엔드 폴더 안에 app.js & server.js라는 두 개의 파일을 만듭니다.

4단계 이제 루트 디렉터리 내에서 터미널/명령줄을 열고 npm init를 입력합니다.

이것은 프로젝트 이름 등과 같은 몇 가지 질문을 할 것입니다. entry point를 작성해야 하는 backend/server.js를 제외하고 Enter 키를 눌러 기본값으로 둘 수 있습니다.

이렇게 하면 백엔드 폴더의 package.json 파일에 대한 진입점이 있는 server.js 파일이 생성됩니다.



5단계 이제 프로젝트에 다음 패키지를 추가합니다.

익스프레스(서버제작용)

몽구스(데이터베이스)

DotEnv(_환경_변수 초과)

Nodemon(개발 서버를 원활하게 실행하기 위해)

서면으로 npm i express mongoose dotenv nodemon
이렇게 하면 모든 종속성 및 패키지가 포함된 node_modules 파일이 생성됩니다.

6단계 package.json 파일에서 scripts
섹션을 다음으로 바꿉니다.

 scripts:{
   "dev": "nodemon backend/server.js",
   "start": "node backend/server.js"
 }, 

이렇게 하면 서버를 시작하기 위한 dev 명령을 실행하는 데 도움이 됩니다.

7단계 app.js 파일에서 다음 코드를 작성합니다.

const express = require("express");
const app = express();

app.use(express.json());

module.exports = app;

여기서는 익스프레스를 임포트하여 익스프레스 앱을 만들어 server.js 파일에서 사용할 수 있도록 익스포트하고 있습니다.

8단계

const app = require("./app");
const dotenv = require("dotenv");

dotenv.config({ path: "backend/config/config.env" });

app.listen(process.env.PORT, () => {
  console.log(`server working at PORT ${process.env.PORT}`);
});

이 단계에서는 app.js 파일에서 내보낸 앱을 가져오고 5단계에서 설치한 dotenv도 가져옵니다.

그런 다음 config 폴더에 만들 env 파일의 경로를 전달합니다.

그런 다음 두 개의 매개변수 PORT와 콜백 함수를 사용하는 작성app.listen()을 통해 서버를 만들고 있습니다.
콜백 함수에서 우리는 서버가 주어진 PORT에서 작동하고 있음을 콘솔에 기록할 뿐입니다.

다음은 두 파일의 스크린샷입니다.


9 단계 이제 config.env라는 구성 폴더 안에 새 파일을 만들 것입니다.


.env 파일 안에 PORT = 4000 를 작성할 것입니다. 이렇게 하면 8단계에서 필요한 PORT 매개변수가 제공됩니다.


Step-10 서버 설정이 완료되었습니다. 터미널에 npm run dev를 작성하여 테스트할 수 있습니다. 모든 것이 정상이면 Server is working at PORT 4000 라는 콘솔 로그를 볼 수 있습니다.



2부 -> .