프로젝트 구조 갖추기

NodeBird SNS 서비스 만들어보자.. 

 

기능: 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉

• express-generator 대신 직접 구조를 갖춤
• 프런트엔드 코드보다 노드 라우터 중심으로 볼 것
• 관계형 데이터베이스 MySQL 선택

 

1. 폴더 생성 (프로젝트 넣을 폴더)

 

2. npm init 작성

 

3. 필요한 패키기 설치

 

4. npx sequelize init <- config migration models 등 폴더가 생김 

 

5. npm i dotenv, multer

 

6. 폴더 public, routers, views 생성

 

7. app.js 생성후 프로젝트 작성

const express = require('express');
const cookieParser = require('cookie-parser');
const morgan = require('morgan');
const path = require('path');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

dotenv.config();
const pageRouter = require('./routes/page');

const app = express();
app.set('port', process.env.PORT || 8001); // port 나눔 

// 전부 전에 설명했던 것 
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
}));

// page router 연결
app.use('/', pageRouter);

// error 404 처리 
app.use((req, res, next) => {
  const error =  new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
  error.status = 404;
  next(error);    // error 미들웨어로 넘김
});

app.use((err, req, res, next) => {
  res.locals.message = err.message;   // 템플릿 엔진 변수 
  // error의 스택, 배포모드 일 때는 안보여줌
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};  
  res.status(err.status || 500);  // 아님 일반 에러 500
  res.render('error');
});

// port에서 대기 
app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기중');
});

 

8. 프로젝트 작성 

const express = require('express');
const cookieParser = require('cookie-parser');
const morgan = require('morgan');
const path = require('path');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

dotenv.config();
const pageRouter = require('./routes/page');

const app = express();
app.set('port', process.env.PORT || 8001); // port 나눔 

// 전부 전에 설명했던 것 
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
}));

// page router 연결
app.use('/', pageRouter);

// error 404 처리 
app.use((req, res, next) => {
  const error =  new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
  error.status = 404;
  next(error);    // error 미들웨어로 넘김
});

app.use((err, req, res, next) => {
  res.locals.message = err.message;   // 템플릿 엔진 변수 
  // error의 스택, 배포모드 일 때는 안보여줌
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};  
  res.status(err.status || 500);  // 아님 일반 에러 500
  res.render('error');
});

// port에서 대기 
app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기중');
});

 

9. config.json 을 이용하여 데이터 데이스에 연결 

 

10. models에 데이터 모델 생성 

 

11. 프로젝트 쭉 작성 (프론트 - 백)

 

12. npm start로 서버 가동