오늘 면접 카타 때는 데드록(교착 상태)에 대해서 학습했다. 튜터님들의 조언(운영 체제에서 많이 배우는 개념, 데드락 사전 방지와 해결 방법, 스탑에이션 추가 공부)을 들을 수 있어서 좋았으나 내 허약한 목에는 좋지 않은 시간이었다... (팀원이 감기걸렸냐는 걱정까지 함 ㅋ)
🥔🥔🥔 오늘 마주한 에러들
1. req, res 둘다 같이 작성하면 생기는 에러
원래 목표는 프론트 쪽 콘솔에서 쿠키를 받아오고, access token 쿠키 존재 여부를 따져 회원가입 로그인 버튼 / 채팅, dm 버튼이 뜨도록 하려고 했다. 하지만 document.cookie를 콘솔 로그로 찍어보니 빈칸만 나왔고, 알고보니 브라우저에서는 쿠키를 보안 정책으로 인해 조회, 가공할 수 없다는 것이었다. (httpOnly 문제인 줄 알았더니 그냥 브라우저에서 막은 것이었다. 어쩐지 주말동안 용을 써도 안되더라...) 결국 서버에서 쿠키를 조회하고 있으면(로그인 한 유저) true, 없으면 false를 반환하려 했더니...
controller에서 req.cookie를 받아오고 res.status(200).json(어쩌고저쩌고)를 작성했더니 발생했다. 구글링해보니 res를 return으로 주라 해서 주었더니
converting circular structure to json --> starting at object with constructor 'socket' | property 'parser' -> object with constructor 'httpparser' --- property 'socket' closes the circle에러가 발생했다. 환장했다. 하필 하나의 js가 아닌 로그인과 메인 페이지를 오가는 상황이라 더욱 복잡했다.
이 방법을 구글링해보면 console.log()와 for문을 사용하라 하지만 나는 백엔드에서 보낸 true와 false만 필요한 사람이다. promise 객체로 받아오는 것도 지겹다 (fetch를 이용해서 어쩔 수 없이 비동기가 받아진다.) 아무튼 4시간 넘게 실랑이 한 결과 해결하였는데 아래의 코드는 해결된 코드이다.
// mainPage.js
// 실행되자마자 로그인 했는지 안했는지 판별하는 함수 실행
window.onload = function() {
checkLoginStatus();
};
function checkLoginStatus(){
fetch('http://localhost:3000/user/checkLogin',{
method:'GET',
})
.then(res =>{return res.json()})
.then((json)=>{
if(json.isLoggedIn){
showLoggedInUI()
}else{
showLoggedOutUI()
}
}
).catch(error=>{
console.error('mainPage checkLogin에서 일어난 에러: ', error);
})
}//user.controller.ts
// 로그인했는지 안했는지 확인하기
@Get('checkLogin')
async checkLogin(@Req() req: Request) {
const check = await this.userService.checkLogin(req.cookies);
if (check) {
return { isLoggedIn: true };
} else {
return { isLoggedIn: false };
}
}//user.service.ts
async checkLogin(cookies) {
const key = Object.keys(cookies);
if (key[0] === 'authorization') {
return true;
} else {
return false;
}
}사실 서비스 부분에서 키의 맨 처음 값을 받아버렸는데 이는 지금 쿠키에 넣은 값이 jwt 쿠키밖에 없기 때문이다... 만약 다른 정보도 쿠키에 넣는다면 service의 수정이 필요할 것이다.
우선 해결 방법으로는 res.status().json()으로 보내지 말고 바로 return {}을 사용해서 내보내는 방법이었다. json을 사용하니 Socket에서 http에서 다시 socket으로 어쩌고 저쩌고 에러들이 쫘락 나와서 그냥 배열로 전해줬다. 다행히 잘 받아오고 잘 실행되었다!
⭐ 오늘 얻은 교훈: 브라우저 창에서 쿠키 다루지 말자 ⭐
2. 채팅방을 옮길 때 이전 방에서 남겼던 채팅 기록들이 유지됨
우리 멍충한 자바스크립트... 눈치 빠르게 행동하지 못하고 이전에 남겼던 것들은 새로고침 하기 전까지 남겨줄 거란 의지를 가지고 있다. 결국 직접 삭제하라는 코드 명령을 내려줘야 한다.
우선 hbs 파일은 이렇다.
여기서 ul id='newChats'에 li들이 생길건데 이 li들을 모조리 지워야하는 것.
문제는 이들이 node이기 때문에 getElemetsByTagName으로 가져오면 지울 수 없다는 문제가 발생한다.
liElementes.forEach is not a function
분명 타입이 object인걸 찍었거늘 forEach와 map 모두 안된다고 한다.
우선 해결한 코드는 다음과 같다.
const newChats = document.getElementById('newChats');
const pastChats = newChats.querySelectorAll('li');
const chatsArray = Array.from(pastChats);
chatsArray.forEach((li)=>{
li.remove();
})querySelectorAll로 받아오고 배열로 만들어버리기... 정말 프론트의 세계는 알다가도 모르겠다.
