축스피드 프로젝트 4 게시글 생성, 수정, 삭제 (프론트엔드)

사실 여태껏 우리가 배웠던 건 백엔드에서 몽고디비든, MySQL이든 서버에 저장하는 것만 했고, 그걸 프론트에서 연결하는것은 해본적이 없었다. 그저 CSS만들고 로컬스토리지를 활용한 바닐라자바스크립트 구현이 내가 해본 허접한 프론트엔드가 있는 CRUD구현의 전부였다. 그래서 프론트를 만들기가 막막했다. 특히 텍스트가 아닌 이미지형식의 파일와 radio타입의 버튼클릭을 한 카테고리 설정 (두개 또는 여러개 버튼중 하나만 선택하고 그 값만 가져오기)도 있어서 더 그랬다.

 

첫번째방법은 따로js파일을 연결시켜 Fetch문이나 Ajax등을 활용하는 것이었고, 두번째 방법은 html내에서 form태그를 쓰는 것이었다. 전자로 먼저 했으나, Ajax로 이미지저장만 단독으로 할순있겠으나 그것을 타이틀, 컨텐트, 카테고리와 함께 가져오는 것은 도저히 며칠 밤샘을 해도 구현을 할 기미조차 안보여서 결국 form태그로 했다. 특히 백엔드에서 multer s3를 이용하는 것은 거의 다른분들의 도움으로 성공할 수 있었다.

 

원래 첫번째 방법으로는 form태그가 없는 상태에서, JQuery로 각 입력값들이 있는 태그들의 id값을 가져와서,

js파일을 새로 만들어서, src로 html과 연결했었다.

// JQuery (게시글 생성)

async function upload() {  
    const title = $('#title').val();
    const content = $('#content').val();
    const category = $('input[name=radio]:checked').val(); 

    const response = await fetch(`http://localhost:3018/api/news`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({title, content, category}), // 셋다 업로드 됨
        });
        
        const result = await response.json();
        console.log(result.message);
        return alert(result.message);
        
        

// 게시글 수정

function correct() {
    const title = $('#title').val();
    const content = $('#content').val();
    const category = $('input[name=radio]:checked').val(); 

    async function upload() {  
        const title = $('#title').val();
        const content = $('#content').val();
        const category = $('input[name=radio]:checked').val(); 

    
        const response = await fetch(`http://localhost:3018/api/news/${newsId}`, {
            method: 'PUT', //POST인지 모르겠음
            headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({title, content, category}), // 셋다 업로드 됨
            });
            
            const result = await response.json();
            console.log(result.message);
            return alert(result.message);
    
    
    }
}

 

하지만 결국 위의 onclick버튼을 활용해 함수를 이용하는 방식은 사용하지 않았다. 아래 폼태그를 사용헀다.

 

우선 프론트에서 생성과 수정의 프론트는 둘다 다음과 같은 형식이다. form태그부분만 가져오면 아래와 같다.

 

 생성
 
 <form class="form-group" action="/api/news" method="POST" enctype="multipart/form-data">
        <div class="label" style="float: left">
          <!-- 제목 입력 -->
          <label class="post" style="font-weight: bold">제목 :</label>
          <input type="text" id="title" name="title" placeholder="제목을 입력해 주세요." />
        </div>

        <!-- 카테고리 설정 -->
        <div class="content" style="float: right">
          <input class="form-check-input" type="radio" name="category" id="flexRadioDefault1" value="해외" checked>
          <label class="form-check-label" for="flexRadioDefault1" value="해외">해외축구</label>
          <br />
          <input class="form-check-input" type="radio" name="category" id="flexRadioDefault2" value="국내" checked>
          <label class="form-check-label" for="flexRadioDefault2" value="국내">국내축구</label>
          <div id="categoryresult"></div>
        </div>
        <br />

         <!-- 게시글 내용 입력 -->
        <div class="label">
          <label style="float: left"></label>
          <textarea id="content" class="form-control" type="text" name ="content" rows="20" placeholder="내용을 입력해 주세요."></textarea>
          <!-- <script src='./js/post.js'></script> -->
        </div>

        <!-- 사진 업로드 -->
      <div class="btncls" style="float: left">
          <label for='files'></label>
          <input type="file" name="image" id="image"> 
      </div>

      <!-- 게시글 전체 업로드 -->
        <button style="float: right" class="btn btn-primary" type="submit">작성 </button>
      </form>
      <button style="float: right" class="btn btn-primary" onclick="back()">뒤로 가기 </button>
    </div>

 

하지만 게시글 수정에서는 html에 api.js와 연결해서 ajax를 활용했다.

순서대로 html 하단 연결부분, 그리고 api.js에 있는 ajax매서드.

<script src="./js/api.js"></script>
  <script>

    $(document).ready(function () {
        getNewsDetail(newsId, function (n) { // n을 구조분해할다
            const [news] = n;
            $("#title").attr("value", news.title);  //attribute (태그값)에서 value를 건드리고, 그 뒤는 parameter값.
            $("#content").text(news.content);
            console.log(news.category);
            if(news.category === "국내")
              $("input:radio[name='category']:radio[value='국내']").prop('checked', true);
            else
              $("input:radio[name='category']:radio[value='해외']").prop('checked', true);
        });
    });
    
</script>

// 게시글 수정 기능
function editPost(newsId) {
  const title = document.querySelector('#title').value
  const content = document.querySelector('#content').value

  const categoryRadio = document.getElementsByName('category');
  let category;
  categoryRadio.forEach((node) => {
    if(node.checked)  {
      category = node.value;
    }
  }) 

  // const content = prompt("수정할 내용을 입력해주세요.",beforeContent);
  if(title && content && category){
    $.ajax({
      type: 'PUT',
      url: `/api/news/${newsId}`,
      data: {title, content, category},
      success: function () {
        alert('뉴스 수정에 성공했습니다.');
      },
      error: function () {
        alert('뉴스 수정에 실패했습니다.');
      }
    });
    location.href = "http://localhost:3018/newsDetail.html?newsId=" + newsId;
  }else{
    alert("내용을 입력해주세요");
  }
}

 

프론트엔드 화면

 

 

 

 

참고로, open with live server를 하면 127.0.0.1 이런식으로 뜨고, 서버를 켜고 브라우저에서는 localhost:3018/~이렇게 써야 한다. 두개는 주소가 다르다. 브라우저에서 localhost로 프론트엔드가 나오게 하려면

app.js를 보시면 static이라는 부분이 있는데 그부분을 통해 서버 안에서 html을 호출하면 불러올 수 있다.

app.js

const express = require("express");
const cookieParser = require("cookie-parser");
const newsRouter = require("./routes/news.js");
const homeRouter = require("./routes/home.js");
const userCreateRouter = require("./routes/userCreate.js");
const userInfoeRouter = require("./routes/userInfo.js");
const newspostRouter = require("./routes/newspost.js");
const commentRouter = require("./routes/comment.js");
// const authRouther = require("./routes/auth.js"); // 이메일인증


const app = express();
const port = 3018;

app.use(express.json());
app.use(express.static("assets"));  ===>> 바로 이 부분!
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use("/", [homeRouter]);
app.use("/api", [
  userCreateRouter,
  userInfoeRouter,
  newspostRouter,
  newsRouter,
  commentRouter,
  // authRouther
]);

app.listen(port, () => {
  console.log(port, "포트로 서버가 열렸어요!");
});