9.5.1 스스로 해보기 관련

안녕하세요

9.5.1 스스로 해보기에 추가 학습으로

좋아요/좋아요 취소 버튼을 만들었습니다.

이제

각 게시물에 좋아요 누른 사람의 목록을 input 창에 나열시키고 싶습니다.

전제조건 : 로그인과 관계없이 누구나 그 목록을 볼 수 있습니다.

1. models/post.js

 db.Post.belongsToMany(db.User, { as: "User2", through: "Like" });

2. models/user.js

db.User.belongsToMany(db.Post, { as: "Post2", through: "Like" });
  }

3. routes/page.js

router.get("/", async (req, res, next) => {
  try {
    const posts = await Post.findAll({
      include: [
        {
          model: User,
          attributes: ["id", "nick"],
        },
        {         
          model: User,
          attributes: ["nick"],
          as: "User2",
        },
      ],
      order: [["createdAt", "DESC"]],
    });

    res.render("main", {
      title: "NodeBird",
      twits: posts,
     });
  } catch (err) {
    console.error(err);
    next(err);
  }
});

추가한 코드는 아래와 같습니다.

{          
          model: User,
          attributes: ["nick"],
          as: "User2",
        },

4. views/main.html

    {% for twit in twits %}
      <div class="twit">
      <input type="hidden" value="{{twit.User.id}}" class="twit-user-id" />
      <input type="hidden" value="{{twit.id}}" class="twit-id" />
      <div class="twit-author">{{twit.User.nick}}</div>

      {% if not followingIdList.includes(twit.User.id) and twit.User.id
      !==user.id %}
      <button class="twit-follow">팔로우하기</button>
      {% endif %}
      <!-- '수정', '삭제' 버튼 -->
      {% if user.id === twit.User.id %}
      <button class="twit-delete">삭제</button>
      <button class="twit-update">수정</button>
      {% endif %}
      <!-- 게시글, 이미지 -->
      <br />
      <br />
      <div class="twit-content">{{twit.content}}</div>
      {% if twit.img %}
      <br />
      <div class="twit-img"><img src="{{twit.img}}" alt="섬네일" /></div>
      {% endif %}
      <br />
      {% if not likeIdList.includes(twit.id) %}
      <!-- 좋아요 안 누른 상태 -->
      <button class="twit-like" style="cursor: pointer">
        <img src="../notlike.png" class="twit-notlike-icon" />
      </button>
      {% else %}
      <!-- 좋아요 이미 누른 상태 (취소하고 싶다면) -->
      <button class="twit-notlike" style="cursor: pointer">
        <img src="../like.png" class="twit-like-icon" />
      </button>
      {% endif %}
      <!-- 좋아요를 누른 사람들 목록 -->
      <input type="text" value="{{twit.User2.nick}}" />
    </div>
    {% endfor %}

추가한 코드는 아래와 같습니다

      <input type="text" value="{{twit.User2.nick}}" />

[결과]

• 웹에서 input 상자가 빈 상자로 나옵니다.

• 개발자 도구 Elements에는 다음과 같이 나옵니다

어디부터 잘못된 걸까요..?