ch12 views/chat.html script 오타

[JaeseokWoo]

12장 chat.html 소스 코드를 보던 중 오타라고 생각하여 issue를 올리게 되었습니다. 오타라고 생각하는 부분은 사용자의 입장과 퇴장에 관한 데이터가 웹 소켓으로 전송될 때 호출되는 join과 exit 이벤트 리스너 부분 중 화면에 메시지를 생성하는 부분입니다.

chat.html script 소스 코드 부분

socket.on('join', function (data) {
    const div = document.createElement('div');
    div.classList.add('system');
    const chat = document.createElement('div');
    div.textContent = data.chat; // 오타라고 생각하는 부분
    div.appendChild(chat);
    document.querySelector('#chat-list').appendChild(div);
});
socket.on('exit', function (data) {
    const div = document.createElement('div');
    div.classList.add('system');
    const chat = document.createElement('div');
    div.textContent = data.chat; // 오타라고 생각하는 부분
    div.appendChild(chat);
    document.querySelector('#chat-list').appendChild(div);
});

오타라고 생각하는 이유

views/chat.html의 서버 사이드에서 렌더링 소스 코드 부분
...
{% elif chat.user === 'system' %}
    <div class="system">
        <div>{{chat.chat}}</div>
    </div>
{% else %}
...

views/chat.html의 서버 사이드에서 렌더링 소스 코드 부분에서는 class이름이 "system"인 div 태그의 자식인 div 태그의 textContent에 메시지가 렌더링되도록 작성되어있지만, 이벤트 리스너에서 생성되는 메시지는 class이름이 "system"인 div 태그의 textContent에 메시지가 들어가는 것을 발견하게 되었습니다. script 부분에서 document.createElement('div')로 생성한 chat은 단순히 div.appendChild(chat)으로 사용됩니다.

그래서 div.textContent를 chat.textContent로 수정해야 된다고 생각합니다.

div.textContent = data.chat; // div.textContent -> chat.textContent

솔직히 프로젝트를 진행함에 있어 아무 문제가 없는 정말 사소한 부분이라 생각하고 우연히 소스 코드를 보던 중에 발견하여 작성하게 되었습니다. 감사합니다.

[ZeroCho]

그렇네요~ 감사합니다!