4-3. 220612 게시글 작성 후 작성한 게시글 내용 보기

게시글을 작성하고 나서 해당 게시글의 내용을 확인하면 내용을 확인할 수 없었는데, 서버에서 해당 게시글의 내용을 확인할 수 있는 컨트롤러가 없어서였다.

그래서 라우트에 get요청을 하는 viewRoute를 하나 만들고, 그에 따른 viewController를 생성하여 코드를 작성했다.

 

1. 서버 viewController 코드 작성

전체 게시글을 가져오는 기능과는 달리 viewController(이하 view)는 내가 원하는 내용의 게시글의 데이터만 가져올 수 있어야 하기 때문에, req.params로 posts.id를 뒤에 붙였다.

// 1차 작성코드
const { 게시물 } = require('../../models');

module.exports = async (req, res) => {
  try {
    const thisPost = await 게시물.findAll({
      // 변수를 하나 선언하여 게시물 모델에서 req.params.id로 가져올 게시물을 찾는다
      where: { id: req.params.id },
    });
    if (thisPost) {
      // thisPost를 filter해주어 내가 원하는 데이터의 내용만 가져올 수 있도록 한다
      });
      // 잘 가져온 경우이므로 200코드로 응답한다
    } else {
      // 가져오지 못한 경우(게시글이 없는 경우) 404코드로 응답한다
    }
  } catch (err) {
    // 서버에러이므로 500코드로 응답한다
  }
};

 

2. 클라이언트 코드 수정

view를 작성하고 바로 브라우저에서 확인해보니

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

에러 메시지가 출력되었다.

레퍼런스를 참조했더니 headers를 넣지 않아 나오는 에러 메시지라고 했다.

// 제일 처음에 작성한 코드
  const getDetail = async () => {
    const json = await (
      await fetch(`http://localhost:8080/posts/${id}`)
    ).json();
    setSelectedPost(json.data);
  };

// 레퍼런스를 참조하여 작성한 코드
  const getDetail = async () => {
    const config = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    };
    const json = await (
      await fetch(`http://localhost:8080/posts/view/${id}`, config)
    ).json();
    setSelectedPost(json.data);
  };

이렇게 고쳐주었더니 에러 메시지가 나오지 않았다.

 

그러나 headers를 넣지 않아도 '해당 게시글을 찾을 수 없습니다'라는 문구는 제대로 브라우저에 출력이 되었던 것을 바탕으로 코드를 재수정했다. 그랬더니 headers를 넣지 않고 해결할 수 있었다.

// 2차 수정 코드
// config를 없애고 /view를 추가함
  const getDetail = async () => {
    const json = await (
      await fetch(`http://localhost:8080/posts/view/${id}`)
    ).json();
    setSelectedPost(json.data);
  };

처음 fetch에는 /posts/${id}라고만 작성되어있었다.

이 부분을 /posts/view/${id}로 바꿔 주었을 때 해결이 되는 것을 확인할 수 있었다.

서버에서 /view/:id로 라우트를 작성해주어 클라이언트에서도 똑같이 수정을 해주어서 해결이 된 것으로 보인다.

 

3. 해결되지 않은 부분과 그에 대한 해결

일단 클라이언트에서 작성한 <div> 태그 안에 있는 제목, 내용, 사진 등의 글씨는 출력이 되지만 정작 필요한 내용들은 출력이 되지 않는 상황이다.

게시글을 작성할 때의 제목과 내용, 사진 등이 출력되어야 하는데 나오지 않는다.

 

이에 대한 해결 방법으로 클라이언트 부분의 코드를 수정해주었다.

서버의 포트를 8080으로 미리 지정해주어 8080 포트로 접속하여 서버의 데이터 형식 확인한 후 코드를 수정해주었다.

// setSelectedPost(json.data[0])으로 수정함
  const getDetail = async () => {
    const json = await (
      await fetch(`http://localhost:8080/posts/view/${id}`)
    ).json();
    setSelectedPost(json.data[0]);
  };

 

그 결과

데이터는 잘 받아와지지만 사진이 제대로 뜨지 않는다.

일단 1차적으로 데이터를 잘 받아오고 있으니 그다음은 사진에 대한 데이터도 제대로 받아와 사진을 뜨게 해야겠다.