Must To Do List project 2일차(client/server 구조 생성)

20.01.14

client와 server의 기본 구조를 생성함.

 

- client

클라이언트는 react를 기반으로 구조를 생성.

npx create-react-app my-app

cd my-app
npm start

npm init
npm install --save react react-dom

위 코드를 통해 react를 설치한 후 필요한 컴포넌트를 정리.

vscode extension을 통해서 세부적인 세팅을 할 수 있으나 자세한 설명이 필요할 것 같아 좀더 알아보고 올 예정.

 

- server

index.js 에 express, morgan, bodyparser, session, cors 등 필요한 미들웨어, 모듈을 설치하고 controllers 정리.

const express = require('express');
require('./models');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const session = require('express-session');
const cors = require('cors');
const app = express();
const port = 4000;
const {
    logInController,
    logOutController,
    signUpController,
    myPageController,
    todoPageController,
    todoAdd,
    todoEdit,
    todoDelete
} = require('./controllers');
app.use(
    session({
        secret: 'secret',
        resave: false,
        saveUninitialized: true
    })
);
//세션을 사용하는 형식임
app.use(bodyParser.json());
//바디파서를 사용하는 형식
app.use(morgan('dev'));
//모건을 사용하는 형식
app.use(
    cors({
        origin: ['http://localhost:3000'],
        method: ['GET', 'POST', 'PUT', 'DELETE'],
        credentials: true
    })
);
//코어스를 사용하는 형식
app.get('/user', () => {
    console.log('helloworld');
});
/*
app.post('/user/login', logInController);
app.post('/user/signup', signUpController);
app.get('/user/logout', logOutController);
app.get('/user/mypage', myPageController);
app.get('/user/todopage', todoPageController);
app.post('/todo/add', todoAdd);
app.put('/todo/edit', todoEdit);
app.delete('/todo/delete', todoDelete);
*/
app.listen(port, () => {
    console.log(`server listen on ${port}`);
});
module.exports = app;

 

models > index.js 파일 정리

'use strict';

const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');
const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};

let sequelize;
if (config.use_env_variable) {
  sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
  sequelize = new Sequelize(config.database, config.username, config.password, config);
}

fs
  .readdirSync(__dirname)
  .filter(file => {
    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
  })
  .forEach(file => {
    const model = sequelize['import'](path.join(__dirname, file));
    db[model.name] = model;
  });

Object.keys(db).forEach(modelName => {
  if (db[modelName].associate) {
    db[modelName].associate(db);
  }
});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;

 

클라이언트와 마찬가지로 세부적인 세팅은 vscode extension을 통해서 할 수 있으나 자세한 설명이 필요할 것 같아 좀더 알아보고 올 예정.

 

이로써 기본 구조 생성은 마치고 다음엔 server 백엔드 작업을 작성할 예정임.