포트폴리오 리뷰: AI 갤러리 프로젝트 - Node.js, MongoDB, EJS 템플릿 엔진을 활용한 웹 개발

안녕하세요 

 

오늘은 포트폴리오에 사용한 기술들을 리뷰하고 복습하는 시간을 가져 보도록 하겠습니다.

 

제가 가장 좋아하는 사이트입니다. 

 

https://aigallery-5rhm.onrender.com/

AI 갤러리

 

해당 웹페이지는 node.js 기반 서버로 만들었습니다.

 

express, mongodb, ejs 템플릿 엔진 등이 사용되었습니다.

 

기본 서버 세팅 구성입니다. 

const express = require("express");
const MongoClient = require("mongodb").MongoClient;
const moment = require("moment");
const momentTimezone = require("moment-timezone");

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');
const multer  = require('multer');

const app = express();
const port = process.env.PORT || 5000;

app.set("view engine","ejs");
app.use(express.urlencoded({extended: true}));
app.use(express.static('public'));
app.use(session({secret : 'secret', resave : true, saveUninitialized: false}));
app.use(passport.initialize());
app.use(passport.session());

MongoClient.connect("mongodb+srv://DB명:패스워드@cluster0.6lrvtzo.mongodb.net/?retryWrites=true&w=majority",function(err,result){
    //에러가 발생했을경우 메세지 출력(선택사항)
    if(err) { return console.log(err); }

    //위에서 만든 db변수에 최종연결 ()안에는 mongodb atlas 사이트에서 생성한 데이터베이스 이름
    db = result.db("port2");

    //db연결이 제대로 됬다면 서버실행
    app.listen(port,function(){
        console.log("서버연결 성공");
    });
});

 

mongodb 세팅의 자세한 사항은 DB 카테고리에서 작성하겠습니다.

 

이제 CRUD를 할 수 있으며 ejs 템플릿 엔진을 통해 프론트엔드(html)와 소통할 수 있습니다.

 

 

 

get 요청 예시입니다. 

//메인페이지 get 요청
app.get("/",function(req,res){
  db.collection("brdlist").find({}).toArray(function(err,result){
    res.render("index",{brdData:result});
  });
});

 

index.ejs을 렌더링 하는데 DB의 brdlist라는 콜렉션에서 모든 데이터를 가져와 brdData 라는 객체로

index.ejs에 전달합니다.

 

 

index.ejs의 뉴스라는 태그에 위의 데이터가 쓰이는 예시입니다. 

 

<div class="news">
            <div class="news_title">
                <h2>공지사항 &<br>이벤트</h2>
            </div>
            <div class="right_info">
                <% for(let i=0; i < 3; i++){ %>
                <a href="/brddetail/<%-brdData[i].num%>" style="color: #0F5FA6;">
                    <div class="news_list">
                        <div>
                            <p>뉴스</p>
                            <h3><%- brdData[i].name %></h3>
                            <p><%- brdData[i].time %></p>
                        </div>
                        <div><i class="fa-solid fa-arrow-right-long"></i></div>
                    </div>
                </a>
                <% } %>
            </div>
            <div class="sns_circle"><a href="/board"><i class="fa-solid fa-arrow-right-long"></i></a><img src="/img/ani_logo.png"></div>
        </div>

 

위의 예시를 보면 일반 자바스크립트 연산에는 <%%> 안에 작성하는것을 볼 수 있고

 

서버와 소통하는 동적 data는 <%-%> 안에 작성한다는 것을 명심해 주시면 됩니다.

 

 

이런 방식으로 웹페이지를 확장할 수 있습니다. 

 

감사합니다.