[TIL] 항해 99 3주차 주특기 기본 회고록_10일차

Today I Learnd 

 

(2021. 11. 18. 목)

 

 

1.  3주차 4일차 소감

기본적인 전체 목록 조회용 페이지와 글을 작성할 수 있는 페이지를 만들었고, 오늘부터는 DB를 다뤄서 API를 요청하고 서버와 연결하는 작업을 해주려고 한다.

 

전에 만들었던 나만의 쇼핑몰은 강의를 보면서 만들어서 재밌게? 느껴졌는데, 지금 해보니까 생각이 잘 안나서 전에 내가 사용했던 코드를 가져와서 서버 틀을 만들고 DB와 DB필드 값? 같은 것의 틀을 만들어줬다.

 

우선은 해줘야될게 글을 작성해서 전체 목록 조회용 페이지에 담겨질 수 있도록 해주는 것이었다. 조금 해봤던 사람들은 템플릿 엔진 언어를 사용했지만, 나는 그렇게 하면 이해가 조금 어려워서 Ajax를 사용해줬다. 

 

이제 서버 쪽에서 localhost:3000을 지정해줘서 내가 만든 페이지를 들어갈 수 있도록 서버쪽에 res.render를 사용해서 서버에 페이지를 넣어줬다. 그 후에 schema를 이용해서 router에 API를 이용해서 클라이언트에서 요청을 하면 서버쪽에 받아서 응답을 해줄 router를 만들어줬다.

 

자신있게 만들고 클라이언트 쪽에서 Ajax를 사용해서 요청을 할 수 있게 해줬다. 그러고 나서 localhost:3000을 실행시켜서 글을 작성하고 담긴 목록에 조회된 것을 봤는데 날짜가 이상하게 나왔다. 그래서 수정해준게 moment().format()을 사용해줬다.

 

Ajax에서 date라는 변수안에 moment().format()을 사용해서 moment에는 받을 DB를 넣어주고, format안에는 날짜 표현 방식을 넣어줬다. 그리고 다시 해보니 내가 원하는 기능 구현이 잘 되면서, 날짜도 잘 나왔다. 

 

이제 남은 페이지는 수정 페이지와 상세 조회 페이지다. 우선 전체 목록 조회  페이지에서 조회가 된 게시글을 누르면 상세 조회 페이지를 들어가서  내가 썼던 내용을 그대로 담겨져서 보여주게 하는 게 조건이었다.

 

상세 조회 페이지를 만들고 router에서 API를 만들어주고, 클라이언트에서 똑같이 Ajax를 사용해줬고, GET 방식을 이용해서 조회를 해줄 수 있게 해줬다. 여기도 날짜가 이상하게 나올 것 같아서 위에 했던 moment().format()를 사용하고 $("id").val(schema['DB필드값'])을 써줘서 작성해서 POST해준 DB를 가져올 수 있도록 해줬다.

 

이 문제를 열심히 해결했지만 이제 문제는 수정페이지였다... 원하는 대로 수정하기 버튼을 눌렀을 때, 상세 조회페이지에 나왔던 내용이 그대로 나오지 않고 열심히 날짜만 뜬 것이었다. 정말 미치는 줄 알았다. 5시간동안 붙잡아도 해결이 되질 않았다.

 

계속해도 문제가 해결이 되지 않으니 내일 팀원 분들께 여쭤봐야겠다...

 

 

 

 

2. 3주차 3일차 개인 프로젝트

 

 

../schemas/posts.js

const mongoose = require("mongoose");

const { Schema } = mongoose;
    const postsSchema = new Schema({
        name: {
            type: String,
            required: true,
            unique: true
        },
        title: {
            type: String,
            required: true
        },
        content: {
            type: String,
            required: true
        },
        password: {
   
            type: Number && String,
            required: true
        },
        date: {
            type: Date,
            default: Date.now
        },
        //   update: {
        //     type: Date
        // }
    });

module.exports = mongoose.model("Posts", postsSchema);

 

 

../schemas/index.js

const mongoose = require("mongoose");

const connect = () => {
  mongoose
    .connect("mongodb://localhost/posts", {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      ignoreUndefined: true,
    })
    .catch(err => console.log(err));
};

mongoose.connection.on("error", err => {
  console.error("몽고디비 연결 에러", err);
});
module.exports = connect;

 

 

 

index.js - 전제 목록 조회페이지 서버

app.get('/home', async (req, res) => {
    const posts = await Posts.find()
    res.render('home', {posts: posts})
})

router에서 해줄 수 있었지만 서버 쪽에서 모든 DB를 끌고 오기 위해서 서버에서도 써줬다.

 

 

../routers/posts.js - 전체 목록 조회페이지  API

router.get("/posts", async (req, res, next) => {
  try {
    const { date } = req.query;
    const posts = await Posts.find({ date }).sort("-date");
    // 제일 최근에 작성한 글이 목록 맨 위에 오게 하기 위해서 내림차순 정렬을 해줬다.
    
    res.json({ posts: posts });
  } catch (err) {
    console.error(err);
    next(err);
  }
});

 

 

..views/home.ejs - 전체 목록 조회 페이지 <script>

$(document).ready(function () {
            get_posts()
            })

        function get_posts() {
            $("#postlist").empty()
            $.ajax({
                type: "GET",
                url: '/api/posts',
                data: {},
                success: function (response) {
                    let posts = response["posts"]
                    for (let i = 0; i <posts.length; i++) {

                        let date = moment(posts[i]['date']).format('YYYY-MM-DD HH:mm')
                        make_card(posts[i], date)

                    }
                }
            })
        }

        function make_card(posts, date) {
            let htmlTemp = `<tr class ="posts" onclick = "window.location.href = '/comment/${posts["name"]}'">
                                <td>${posts["name"]}</td>
                                <td>${posts["title"]}</td>
                                <td>${date}</td>
                            </tr>`
            $("#postlist").append(htmlTemp)
        }

htmltemp 부분 중에 이 게시글을 누르면 상세 조회 페이지로 넘어 갈 수 있도록 onclick을 걸어줬다.

 

 

 

index.js - 상제 조회 페이지 서버

app.get('/comment/:name', (req, res) => {
    let name  = req.params;
    res.render('comment', { name: name })
})

이 부분에서 조금 문제가 있었는데 상세 조회가 안돼서 date값을 활용해서 DB를 가져오려고 했으나,

잘 안돼서 결국에는 name에 unique를 걸어줘서 서버 쪽에서도 name으로 응답을 보내게끔 해뒀다.

 

 

../routers/posts.js - 상세 조회 페이지 API

router.get("/posts/:name", async (req, res) => { 
  const { name } = req.params;

  const posts = await Posts.findOne({ name: name });
  res.json({ posts: posts });
});

 

 

..views/comment.js - 상세 조회 페이지 script

$(document).ready(function () {
            get_comment()
        })

      function get_comment() {
    $.ajax({
      type: "GET",
      url: `/api/posts/<%= name["name"] %>`,
      data: {},
      success: function (response) {
        console.log(response)
        let posts = response["posts"]

        let date = moment(posts['date']).format('YYYY-MM-DD HH:mm')

        $("#title").val(posts['title'])
        $("#name").val(posts['name'])
        $("#content").val(posts['content'])
        $("#date").val(date)
      }
    });
  }

  function updating(posts) {
    location.href="/update/<%= name['name'] %>"
  }