간단한 sns 만들기 - 07/18 틀만 잡음

진실·2021년 7월 18일

기본적인 레이아웃

routes

auth.js

const express = require('express');

const router = express.Router();

router.get('/join', (req, res, next)=>{
  res.render('join', {title : 'my app - join'});
  next();
});

router.get('/join/local', (req, res, next)=>{
  res.render('join_local', {title : 'my app - join'});
  next();
});

router.post('/join/local', (req, res, next)=>{

});

module.exports = router;

page.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next)=>{
  res.render('layout', {title : 'development'});
  next();
});

module.exports = router;

schemas

index.js

const mongoose = require('mongoose');

// connect functions 
const connect = ()=>{
  if(process.env.node_ENV !== 'production'){
    mongoose.set('debug', true);
  }
  // show mongoose queries only when not in a production environment

  mongoose.connect('mongodb://localhost:27017/sns', {
    //connnect to sns database
    useNewUrlParser : true,
    useCreateIndex : true,
    useUnifiedTopology: true,
  }, (err)=>{
    if(err){
      console.log('connection error occured', err);
    }
    else{
      console.log('connection success');
    }
  });
};

mongoose.connection.on('error', (err)=>{
  console.error('connection error occured', err);
});

mongoose.connection.on('disconnected', ()=>{
  console.log('the connection has been disrupted. Try connect to it again');
  connect();
});

module.exports = connect;

views

join_local.html

{% extends 'layout.html' %}

{% block content %}
<div class='join_local_container'>
  <form action="/auth/join/local" method="post">
    <div class='join_local_item'>
      <input type="text" class="join_local_input" name="username" placeholder = "username">
    </div>
    <div class='join_local_item'>
      <input type="text" class="join_local_input" name="id" placeholder = "id">
    </div>
    <div class='join_local_item'>
      <input type="password" class="join_local_input" name="password" placeholder ="password" onkeyup="confirmPW()">
    </div>
    <div class='join_local_item'>
      <input type="password" class="join_local_input" name="password_check" placeholder = "confirm password" onkeyup="confirmPW()">
    </div>
    <div class='join_local_item'>
      <span id="password_check_icon" style="font-size:12px; text-align:right;"></span>
    </div>
    <div class='join_button'>
      <input type="submit" value='registration'>
    </div>
  </form>
</div>
{% endblock %}

{% block script %}
  <script>
    confirmPW = ()=>{
      var pw = document.querySelector('input[name=password]');
      var pw_check = document.querySelector('input[name=password_check]');
      var pw_check_icon = document.querySelector('#password_check_icon');

      if(!pw.value && !pw_check.value){
        pw_check_icon.innerHTML = '';
      }
      else if(pw.value === pw_check.value){
        pw_check_icon.style.color = '#3c803c'
        pw_check_icon.innerText = 'Password Confirmed';
      
      }
      else{
        pw_check_icon.style.color = '#873636'
        pw_check_icon.innerText = 'Password Not Matched';
      }
    }
  </script>
{% endblock %}

join.html

{% extends 'layout.html' %}

{% block content %}
  <div class = join_container>
    <div class = "join_item" id = "join_local">
      <a href="/auth/join/local" style="text-decoration: none; color:black;">Join Us</a>
    </div>
    <div class="join_item" id="join_kakao">
      <a href="/auth/join/kakao" style="text-decoration: none; color:black;">Join with Kakao</a>
    </div>  
  </dxiv>
{% endblock %}

layout.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class = "top_container">
      <div class="logo_item" style="float:left; margin-left : 10px; width:10%;"><a href="/" style="text-decoration: none; color: black;">my app</a></div>
      <div class="search_item" style="float:left; width:75%; text-align: center;">
        <form action="/search">
          <input type="text" id="search_content" placeholder="search">
        </form>
      </div>
      <div class=auth_item" style="float:left; margin-right : 5px; width:10%; text-align:right">
        <a href="/auth/login" style="text-decoration: none; color: black;">login</a>&nbsp;&nbsp;<a href="/auth/join" style="text-decoration: none; color:black;">register</a>
      </div>
    </div>
    {% block content %}
    {% endblock %}

    {% block script %}
    {% endblock %}
    
  </body>
</html>

index.js

const express = require('express');
const morgan = require('morgan');
const path = require('path');
const nunjucks = require('nunjucks');
const connect = require('./schemas');

const pageRouter = require('./routes/page');
const authRouter = require('./routes/auth');

const app = express();
app.set('port', 3000);
app.set('view engine', 'html');
nunjucks.configure('views', {
  autoescape: true,
  express: app,
  watch : true,
}); 

connect();

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', pageRouter);
app.use('/auth', authRouter);

app.listen(app.get('port'), ()=>{
  console.log('app is listening to port 3000');
});