MERN에서 백엔드 및 프런트엔드의 파일 구조를 구성하는 방법

MERN에서 백엔드 및 프런트엔드의 파일 구조를 구성하는 방법

express + mongoose 기반의 백엔드가 있습니다.파일 구조:

- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

또한 프런트 엔드용 일반 Create-React-App 기반 폴더:

- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

나는 그것을 함께 적절한 방법으로 사용하고 싶다.저는 이렇게 정리하고 싶었습니다.

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

이 단계에서 나는 꼼짝하지 않았다.서버 폴더 내의 클라이언트 폴더 또는 클라이언트 내의 서버 폴더인 경우 만들 수 있습니다. 1. 그러나 두 폴더가 형제자매일 때 실행하는 방법? 2. 패키지는 무엇입니까?json 및 node.displaces 위치(서버와 클라이언트 모두 자체 패키지를 가져야 하는지 여부)를 지정합니다.json 및 모듈)

가장 기본적인 구조는 다음과 같습니다.root「」가 격납되어 있는 frontend ★★★★★★★★★★★★★★★★★」backend폴더.MERN 스택에 대해 언급하면,package.json백엔드 환경의 내부 및package.json당신 편이에요.백엔드 서버와 프런트엔드 클라이언트는 완전히 다른 두 가지이므로 둘 다 자체 node_modules 폴더를 가지고 있습니다.백엔드에는 아마 다음과 같은 것이 설치되어 있을 것입니다.Express런타임에 는, 「」를 참조해 주세요.Mongoose 더 할 수 MongoDB 「이더넷」이 React로서 「 」를 참조해 주세요.Redux패키지에 되어 있는 에 따라 달라집니다.json 실행 시, jsonjson npm install 이 2개의 폴더에 개별적으로 인스톨 됩니다.추가 패키지를 설치하려면 실행하기만 하면 됩니다.npm install + "the name of the package"('+'와 따옴표 없이) 필요한 특정 폴더(프론트 엔드 또는 프론트 엔드) 내에서 사용할 수 있습니다.

이게 도움이 됐으면 좋겠어요.사진을 보세요. 특히 두 번째 사진을요.

앱 구조

폴더 구조

갱신:

개발 중에 다음 두 가지를 추가로 설치하는 것이 좋습니다.

1. npm i -D nodemon
2. npm i -D concurrently

★★★★★★-Dflag는 이들을 로 설치합니다.

nodemon 는 모든 파일 변경을 추적하여 백엔드 서버를 재시작합니다.따라서 "백엔드" 폴더 내에 설치해야 합니다.당신이 해야 할 일은 단지 내부로 들어가는 것이다.package.json및새 scriptfile(파일)을 합니다.다음과 같이 합니다.

"scripts": {
"start": "node app.js",  // in production
"dev": "nodemon app.js", // in development
}

---

concurrently 그럼 프런트엔드와 백엔드를 동시에 시작할 수 있습니다.최상위 루트 폴더(프런트 엔드 및 백엔드를 모두 포함하는 폴더) 내에서 새로운 노드 프로젝트를 초기화할 것을 제안합니다.이 작업을 수행할 경우,npm init명령어를 설치한 후concurrently패키지는 이쪽입니다.

이제 새로 만든 파일을 엽니다.package.json다음과 같이 루트 폴더 내의 파일을 편집하고 시작 섹션을 편집합니다.

   "scripts": {
       "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
   }

이렇게 하면 백엔드 폴더 안으로 들어가dev(지금 설정한 명령과 동일) 명령어가 기동합니다.nodemon또한 프런트 엔드 폴더 안쪽으로 이동하여 기본 설정을 실행합니다.start명령어 - 이것이 바로 우리가 원하는 것입니다.

폴더 구조를 유지하고 모든 종속성(상기 언급한 추가 2개 포함)을 설치한 경우,package.json폴더 내의 파일을 사용하면 간단한 명령으로 둘 다 시작할 수 있습니다.

npm run dev // 루트 폴더 내에 있는지 확인합니다. : )

또한 프런트 엔드 및 백엔드 내부의 폴더 구조 분할이 기술 로직이 아닌 비즈니스 로직을 기반으로 하는 경우 더욱 유용합니다.

전체 스택을 파일을 공유하지 않는 자체 구성 요소로 나누는 것이 앱의 테스트 가능성과 업데이트 용이성을 높이는 가장 좋은 방법입니다.이는 일반적으로 마이크로 서비스 아키텍처로 알려진 가능한 한 작은 방법입니다.

잘못된 설계: 업데이트 및 테스트하기 어려움:

우수한 설계: 업데이트 및 테스트가 용이함:

프로젝트 범위 또는 깊이 등에 따라 요건에 따라 구조를 사용합니다.단, 엔드포인트와 모델을 분리하여 처음에 이와 같은 설정을 하도록 하십시오.

src/
controllers - for the endpoints
models - for the schema
server.js - or index.js

언급URL : https://stackoverflow.com/questions/51126472/how-to-organise-file-structure-of-backend-and-frontend-in-mern