배운것들
1. LocalStorage, SessionStorage, Cookie 차이점
WebStorage vs Cookie
-
쿠키는 매번 서버로 전송된다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.flask 프로젝트때를 생각하면 따로 쿠키를 전송해주지 않아도 서버에서 쿠키를 꺼내 썼는데 이번 프로젝트의 경우에는 localStorage에 토큰을 저장해 두었다 필요할때만 꺼내 헤더에 담아 보내주었다. 그렇기 때문에 쿠키에 비해 네트워크 트래픽 비용이 절약된다.
-
WebStorage는 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
-
WebStorage는 용량의 제한이 없다
쿠키는 용량과 개수에 제한이 있다. -
WebStorage는 영구 데이터 저장이 가능하다.
쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다.
WebStorage(LocalStorage, SessionStorage)
-
LocalStorage는 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
세션 스토리지는 데이터가 지속적으로 보관되지 않는다.
현재 브라우징 되고있는 브라우저 내에서만 데이터가 유지된다.따라서 LocalStorage는 브라우저를 종료해도 다음에 접속시 데이터가 보관되어 유지되는 반면 SessionStorage는 브라우저가 종료되면 데이터도 지워진다.
-
도메인마다 별도로 로컬 스토로지, 세션 스토리지가 생성된다. 다만 세션 스토리지는 새로운 브라우저로 접속하면 같은 화면에서도 새로운 스토리지도 인식된다.
- Windows 전역 객체의 LocalStorage, SessionStorage 라는 컬렉션을 통해 저장과 조회가 이루어진다.
이번 과제에서도
localStorage.setItem("token", response.token);
localStorage.getItem("token");
과 같은 코드를 이용해 token을 localStorage에 저장해 두었다 필요한
경우에만 꺼내 쓰도록 하는 부분이 있었다2.mongoose cascade 방법
//schmas/article.js
ArticleSchema.pre(
"deleteOne", { document: false, query: true },
async function (next) {
// post id
const { _id } = this.getFilter();
// 관련 댓글 삭제
await Comment.deleteMany({ articleId: _id });
next();
}
);
//routes/articles
//게시글 삭제
router.delete("/articles", authMiddleware, async (req, res) => {
.....
await Article.deleteOne({ _id: articleId });
//이 부분에서 매개변수로 준 _id:articleId 가
//ArticleSchema 에서 this.getFilter() 로 받았을때 넘어갔다.
....
})mongoose 의 middleware를 통해 article 삭제시 관련된 댓글들을 함께 지워주도록 스키마단에서 조작이 가능했다.
또 pre 뿐만 아니라 post 기능도 존재했다.
RDB에서 CASCADE라 부르던 기능이다.
+) 추가 Query.prototype.getFilter()
Model.find() , Query#find() , Model.findOne() 등 의 첫 번째 매개 변수를 filter 라고 한다.
getFilter는 현재 쿼리의 filter ( = conditions) 을 POJO로 반환한다. * POJO = Plain Old JavaScript Object
Parameters :
- nothing
Returns :
- <> current query filter
example :
const query = TodoModel.find({ subject: '테스트' }).where('startDate').gte('2020-01-01'); return query.getFilter();
===========================================
3. 이벤트 리스너
let e = document.getElementById("comment_contents"); e.addEventListener('click',function(event){ alert('로그인 후 이용하시오'); window.location.href='/login'; });4. 콜백함수 Promise async await
5. 이벤트 루프 내부 동작
https://www.youtube.com/watch?v=QFHyPInNhbo
참고:
https://velog.io/@hadam/DB-Mongoose-Cascade-Delete https://runebook.dev/ko/docs/mongoose/tutorials/query_casting
