1. 미니프로젝트: 쿠키/세션
로그인한 유저의 아이디를 소모임, 댓글 등 여러 기능에서 사용하므로 어딘가에 저장해 놓을 필요가 있다.
백엔드 서버를 구현하지 않은 상태에서 로그인 아이디를 저장하고 불러오는 방법으로 브라우저의 쿠키, localStorage, sessionStorage 가 있다. 그 중 직관적으로 떠오른 것이 쿠키였고 쿠키로 저장하는 방법을 제시하였다.
문제
쿠키의 생성 (Create)
// Name이 user고, Value가 John인 쿠키 추가
// 그리고 속성값으로 path와 expires를 설정해서 추가
// 이 속성값은 쿠키 스트링에 저장되지는 않고 속성정보에 저장된다.
document.cookie = "memberId=id1234; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"- 생성된 쿠키는 개발자 도구의 Application > Storage > Cookies 에서 확인 가능
쿠키의 생성은 직관적이다. 문제는, 쿠키의 읽기(Read)이다.
쿠키의 읽기 (Read)
var x = document.cookie; // cookie1=value1; cookie2=value2;...쿠키에 저장된 값은 ; 을 기준으로 key=value로 되어있는데 이것을 파싱해서 써야한다.
물론, 쿠키 함수 라이브러리를 사용하여 원하는 키의 값을 가져올 수 있다.
// 주어진 이름의 쿠키를 반환하는데,
// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}하지만 이 함수를 다시 공통화하여 여러 페이지에서 참조해야한다는 문제가 발생했다.
로그인한 유저의 아이디를 가져오기 위해 공통화된 함수를 또 각 페이지에서 써야한다는 것이다.
따라서, 미니프로젝트는 가벼운 서버리스 프로젝트이기 때문에 데이터의 불러오기가 더 용이한 sessionStorage를 사용하는 것으로 변경하였다. (사실 기존에 sessionStorage로 개발되어있는 부분이 있었는데 미처 파악하지 못하고 쿠키로 개발하자고 제안드려 혼선을 빚었다.🥲)
sessionStorage 의 생성 (Create)
sessionStorage.setItem('memberId', id);- 생성된 데이터는 개발자 도구의 Application > Storage > Session storage 에서 확인 가능
sessionStorage 의 읽기 (Read)
sessionStorage.getItem('memberId');쿠키와 비교했을 때 보다시피 훨씬 간단하다. 이렇게 간단히 해결할 수 있는 것을 먼 길 돌아갈 뻔했다!
(고생해 주신 팀원분들께 다시 한번 죄송과 감사의 말씀을 드린다.)
✨ 참고자료
[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교) [Inpa Dev 👨💻:티스토리]
📝 TO-DO
- 소모임 가입, 탈퇴 단위 테스트
- 통합 테스트
- 미니 프로젝트 피드백 받기
- 발표 준비하기
💭 Diary
팀원들에게 미리 프로젝트 구조에 대한 자세한 설명을 하지 못했는데 프로젝트 중 팀원들에게 혼란을 드린 것 같아 마음에 걸렸다.
웹 개발을 처음 하는 팀원들을 더 많이 배려하고 리펙터링을 진행하기 전 미리 의견을 나눴어야 했는데 프로젝트를 끝내야 한다는 조급함과 경력자라는 부담감 때문에 혼자 마음이 급해 팀에 악영향을 끼친 것 같다. 😰
앞으로는 말로 전달하는 것으로 끝내는 것이 아니라 모두가 이해할 수 있도록 팀 노션에 문서화하여 미리 공유할 수 있도록 해야겠다.
지금은 부트캠프 초반이고 프로젝트의 완벽보다는 모두가 적응하도록 노력하는 게 제일 중요하다! 같이 멀리 가는 것을 목표로 해야겠다.
