[TIL 2024. 04. 04] 댓글 수정 토글 오류

이 글은 아래의 글과 이어진다.

[TIL 2024. 04. 03] 게시물 수정,삭제 | 댓글 수정, 삭제

---

페이지 내에서 토글로 댓글 수정을 가능하게 했다고 생각했는데, 웹 내에서 테스트 해보다 보니 오류가 있다는 것을 알게 됐다. 그건 바로 여러 개의 댓글이 작성되어 있는 경우에 제일 처음의 댓글을 토글이 잘 작동하는데, 그 이후의 댓글들은 '수정'버튼을 눌러도 토글이 제대로 작동하지 않는다는 것이었다.

 

코드 수정과 개발자 도구로 확인해본 결과, 첫번째 이후의 댓글들도 토글창에서 수정은 정상적으로 이루어졌다.

즉, (첫 번째 댓글 제외) 이미 작성된 댓글의 '수정'버튼과 토글이 연결되어 있지 않아 토글이 기능하지 않았다.

 

게시물 조회 내에서 자바스크립트(제이쿼리)가 쓰인 부분은 토글과 관련된 부분밖에 없었기 때문에 scripts태그 내의 코드들의 변경해보며 오류를 해결해보려 했다. console.log()문을 찍어보며 수정해본 결과, 첫번째 수정토글만 버튼과 연결되어제대로 로그가 들어오고, 나머지 댓글들은 버튼 클릭시에도 로그 자체가 들어오지 않았다;;

 

이 때의 코드가 다음과 같았다.

 <script>
        $(document).ready(function () {
            // 처음에는 토글 닫혀있게
            $("#comment-edit-box").hide();
            $("#update-comment-btn").click(function () {
                $("#comment-edit-box").toggle();
            });
        });
    </script>
    
      </div>
        {% if comments %}
            {% for comment in comments %}
                <div class="comments">
                    <h3>{{ comment.user_id }}</h3>
                    <div class="comment">
                        <p>{{ comment.detail }}</p>
                        <p>{{ comment.date.strftime("%Y-%m-%d %H:%M:%S") }}</p>
                        <div class="comment-buttons">
                            <button type="submit" class="update-comment-btn" id="update-comment-btn">수정</button>
                            <form method="POST" action="/delete_comment/{{ comment.id }}">
                                <button type="submit" class="delete-comment-btn">삭제</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="comment-edit" id="comment-edit-box">
                    <h3>댓글 수정</h3>
                    <form action="/update_comment/{{ comment.id }}" method="POST">
                        <label>
                            <textarea name="detail" rows="4" cols="50" placeholder="댓글을 수정하세요...">{{ comment.detail }}</textarea>
                        </label><br>
                        <button type="submit">댓글 수정</button>
                    </form>
                </div>
            {% endfor %}
        {% endif %}
    </div>

 

---

 

수정버튼과 (2번째 이후부터의)토글 자체에 연결이 안되어있으니, 문제는 script태그 내에 있다는 생각으로 이 부분을 계속 수정하던 중에 아래와 같이 수정하니 이제는 모든 댓글(2번째 이후의 댓글들 포함)의 수정버튼을 클릭하면 모든 댓글의 토글이 열리거나 닫히는 현상을 보였다

 

그때의 코드가 아래와 같았다.

127, 129, 131줄 모두 유효한 수정이었음

 

어떤 댓글의 수정버튼을 눌러도 모든 댓글의 토글이 통으로 열리고 닫힘

 

---

 

참고로 중간에 아래와 같이 수정했을 때는 웹상에서 1번째 수정버튼 클릭시에 첫번째 댓글의 수정버튼을 누를 때 모든 댓글의 토글이 열리고 닫혔다. (오류를 처음 발견했을 때는 1번째 댓글 수정버튼은 해당 토글 수정창이랑만 연동됐었음)

반면, 2번째 부터의 댓글은 수정버튼 자체가 여전히 먹히지 않았다.

다시 말해, 1번째 댓글의 버튼만 갑자기 통으로 토글이 열리고 닫히는 것으로 바뀌고, 다른 댓글의 버튼은 여전히 연결 자체가 안되어 있었다.

            $("#update-comment-btn").click(function () {

---

두 번째 이후의 댓글들은 수정버튼 눌러도 토글 반응 없음

---

첫번째 댓글의 수정버튼을 눌렀을 때 모든 토글이 통으로 열리고 닫힘

 

---

최종적으로 찾은 문제의 원인은 comment.id가 인덱스로 처리되지 않고, 하나로 처리되고 있어서 통으로 열리고 닫힐 수 밖에 없다는 것이었다. 그래서 각 댓글 인덱스별로 구분이 가능하도록 {{ loop.index }}를 사용해서 코드를 수정했다. 또 중요했던 것이 script태그를 반복문 내로 이동한 것이었다.

 

{{ loop.index }}로 모두 수정한 후에도 script태그 코드가 반복문 밖에 있으면 loop가 정의되지 않았다는 오류가 발생했다.

loop.index 적용했지만 script태그의 코드가 반복문 밖에 있을 때_오류

---

최종적으로 오류를 수정한 코드는 아래와 같다.