Full-Stack React & Node.js - 서버에서 데이터 가져오기

node-server 폴더 안에 "controllers"라는 새 폴더를 만듭니다. 내부에 note.controller.js라는 파일을 추가하고 다음 코드를 추가합니다.

const note = {
    id: 1,
    title: 'A Note',
    content: 'Lorem ipsum dolor sit amet',
    author: 'neohed',
    lang: 'en',
    isLive: true,
    category: '',
}

async function getNote(req, res) {
    res.json({ note });
}

module.exports = {
    getNote
}

Why .controller.js? In a complex app, you will have many entities and associated route, controller, middleware and data files. Tagging each file with .controller, .route, .middleware, .data, etc., makes it much less confusing when you have many files open in your editor.

다음으로 node-server 폴더 안에 "routes"라는 또 다른 폴더를 만듭니다. 내부에 index.js라는 파일을 추가하고 다음 코드를 추가합니다.

const express = require('express');
const noteRouter = express.Router();
const noteController = require('../controllers/note.controller');

noteRouter.get('', noteController.getNote);

const routes = app => {
  app.use('/note', noteRouter);
};

module.exports = routes;

마지막으로 app.js를 다음과 같이 변경합니다.

const express = require('express');
const cors = require('cors');
const morganLogger = require('morgan');
const bodyParser = require('body-parser');
const initRoutes = require('./routes/index');

const env = process.env.NODE_ENV || 'development';
const app = express();

if (env === 'development') {
  app.use(cors());
}

app.use(morganLogger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

initRoutes(app);

app.use(function (req, res, next) {
  const error = 'Here be dragons. Route not found';
  console.info(`404 error! ${error}`)
  res.status(404).send(error);
});

const port = 4011;

app.listen({port}, async () => {
  const baseUrl = `http://localhost:${port}`;

  console.log(`Server running at: \t @ ${baseUrl}/`);
});

이제 다음 명령으로 Node.js 서버를 실행하십시오.

npm run start

콘솔이 서버가 실행 중이라는 메시지를 출력할 때 이 URL을 브라우저에 붙여넣습니다. "http://localhost:4011/note "그러면 다음 개체가 표시되어야 합니다.

{
  note: {
    id: 1,
    title: "A Note",
    content: "Lorem ipsum dolor sit amet",
    author: "neohed",
    lang: "en",
    isLive: true,
    category: ""
  }
}

이제 작동하는 클라이언트와 서버가 있습니다. , 우리는 마침내 클라이언트와 서버가 통신하도록 할 것입니다...

코드 저장소: Github Repository