https://dev-seolleung2.netlify.app/COMONGUS/comong-chatterbox-client/
https://www.youtube.com/watch?v=oEFPFc36weY
Cross-Site Scripting Explained with Examples and How to Prevent XSS with Content Security Policy
https://www.youtube.com/watch?v=pD6C1-zSxIM
WHAT IS CORS CROSS ORIGIN RESOURCE SHARING | Explain CORS Tutorials | InterviewDOT
https://www.youtube.com/watch?v=YAvnt-32W8M
룸을 만들어주고 나니까 또 안됬다.
게다가 클리어 메세지도 안되었다..
도저히 어떻게 하는건지 머리를 싸매고 풀어보았다.
What Is A Single Page Application?
https://www.youtube.com/watch?v=xfGciVdbktI
https://www.youtube.com/watch?v=iYM2zFP3Zn0
오늘한 것 리뷰
fetch: () => {
window
.fetch(app.server)
.then((res) => {
return res.json();
})
.then((data) => {
data.forEach(app.renderMessage);
});
},
fetch를 하는데 render까지 같이 해줬다. 그래서
편하게 하는것같다.
send: (data, callback) => {
window
.fetch(app.server, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => {
return res.json;
})
.then(callback);
}
send 는 콜백을 왜해주는걸까? 아직도 이해가 잘안간다.
이게 POST랑 똑같은건데..
공부하다 보니까 알게 되었는데
send를 할때는 data를 넣어주고
() => {
콜백함수들로 API에 표현을 해야하니까 callback을 해주는거구나
}
POSTMAN도 써보았는데 조금 헷갈린다.
renderMessage: (message) => {
const divUser = document.createElement("div");
divUser.classList.add("username");
divUser.textContent = message.username;
const divText = document.createElement("div");
divText.classList.add("text");
divText.textContent = message.text;
const divRoom = document.createElement("div");
divRoom.classList.add("roomname");
divRoom.textContent = message.roomname;
const divTime = document.createElement("div");
divTime.classList.add("date");
divTime.textContent = message.date;
const divSingleChat = document.createElement("div");
divSingleChat.classList.add("chat");
divSingleChat.appendChild(divUser);
divSingleChat.appendChild(divText);
divSingleChat.appendChild(divRoom);
divSingleChat.appendChild(divTime);
const elChat = document.querySelector("#chats");
elChat.appendChild(divSingleChat);
},
이게 아니고
renderMessage: ({ username, text, date, roomname }) => {
const tmpl = `<div class="chat">
<div class="username">${username
.replace(/</g, "<")
.replace(/>/g, ">")}</div>
<div>${text.replace(/</g, "<").replace(/>/g, ">")}</div>
<div>${date}</div>
<div>${roomname.replace(/</g, "<").replace(/>/g, ">")}</div>
</div>`;
document.querySelector("#chats").innerHTML =
tmpl + document.querySelector("#chats").innerHTML;
}
이거라고 한다.
정규표현식을 공부해야겠다.
전체 코드 한번 더 리뷰
const githubID = "jtlim0414"; // 여러분의 아이디로 바꿔주세요
const app = {
server: `http://3.36.72.17:3000/jtlim414/messages`,
// 초기에 roomname을 안만들었을때 post를 했는데
// 그게 오류가 걸려서 rendering이 안되었다.
// 그래서 서버를 바꿔서 해보았는데 되던데
// 기존에 있던 서버에서 어떻게 삭제를 해야하는지 연구해봐야겠다.
init: () => {
app.addEventHandlers();
// init으로 처음부터 하겠다라는것인데
// 이거를 왜 여기에 넣어줘야하는지는 모르겠다. 왜 초기값으로 설정하지?
app.fetch();
},
addEventHandlers: () => {
let submit = document.querySelector("#send .submit");
// 여기서 한참 헤맸다. 그냥 #으로 가져오니까 안되더라.
if (submit) {
submit.addEventListener("submit", app.addNewTweet);
}
},
fetch: () => {
window
.fetch(app.server)
.then((resp) => {
return resp.json();
})
.then((data) => {
data.forEach(app.renderMessage);
});
// fetch하는 김에 renderMessage까지 해준다.
},
renderMessage: ({ username, text, date, roomname }) => {
const tmpl = `<div class="chat">
<div class="username">${username
.replace(/</g, "<")
.replace(/>/g, ">")}</div>
<div>${text.replace(/</g, "<").replace(/>/g, ">")}</div>
<div>${date}</div>
<div>${roomname.replace(/</g, "<").replace(/>/g, ">")}</div>
</div>`;
// 이거는 정규식 표현이라고 하는데 유투브로 학습할 예정.
document.querySelector("#chats").innerHTML =
tmpl + document.querySelector("#chats").innerHTML;
// 이 코드가 최신순으로 만들어주는 코드다.
console.log(tmpl);
},
send: (data, callback) => {
window
.fetch(app.server, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json)
.catch((err) => {
console.log(err);
})
.then(callback);
},
addNewTweet: (e) => {
e.preventDefault();
app.send(
{
username: document.querySelector(".inputUser").value,
text: document.querySelector(".inputChat").value,
date: new Date().toLocaleString(),
roomname: document.querySelector(".inputRoomName").value,
},
() => {
app.clearMessages();
app.fetch();
app.clearForm();
}
);
},
clearMessages: () => {
document.querySelector("#chats").innerHTML = "";
},
clearForm: () => {
document.querySelector(".inputUser").value = "";
document.querySelector(".inputChat").value = "";
document.querySelector(".inputRoomName").value = "";
// 여기서 1개 더 만들어주는 것이 중요하다.
},
XSS: () => {
window
.fetch(`http://3.36.72.17:3000/${githubID}/malicious`, {
method: "POST",
})
.then((res) => res.json())
.then((data) => {
console.log("OMG!!!!!!XSS CONFLICT");
});
},
// 이거는 잘 모르겠다 공부할 예정
};
app.init();
// 물론 실행도 시켜야한다.
// 테스트를 위한 코드입니다. 아래 내용은 지우지 마세요
if (window.isNodeENV) {
module.exports = app;
}
이게 뭔소리인지 아시는분?