무엇을 난 한
일어난/한 일(이벤트)을 정리하면 이렇다:
- 1부 (09:00 ~ 13:00)
- 웹개발 종합반 강의 수강 (5주차)
- 미니 프로젝트 메인 페이지 개선
- 2부 (14:00 ~ 18:00)
- 미니 프로젝트 메인 페이지 개선
- 3부 (19:00 ~ 21:00)
- 미니 프로젝트 메인 페이지 개선
웹개발 종합반 강의 5주차에선 작성한 웹 페이지를 온라인으로 - 로컬에서 열었던 웹 페이지를 도메인을 통해 - 볼 수 있게 배포하는 방법에 대해서 배웠다(상세하겐 GitHub Pages를 사용해서).
이외의 시간이라고 했지만 사실상 오늘 하루 종일이 맞는 것 같다엔 메인 페이지에서 기능적인 보강을 진행하였다.
삽질 포인트
생각보다 컸던 navbar의 중요성
위에서부터 차례대로, 미니 프로젝트에 존재하는 페이지들의 흐름도, 내가 만들었던 메인 페이지의 와이어프레임, 그리고 그걸 실체화한 후의 스크린샷이다.
스크린샷에서 아크릴 판 효과의 문단 - 소속 로고와 팀 선언문 - 을 제외하고 나머지 부분들 - 배경과 상단 navbar - 을 다른 페이지에서도 사용해야 했다. 그러니까, 다른 페이지에서도 똑같이 정상적으로 돌아가야 했기에 빠르게 navbar의 구현을 완료해야 했다(그래야 다른 조원들도 이 navbar 코드를 쓸 수 있으니까). 문제는 이 navbar가 외관 상으로만 돌아가는 거였단 것이다.
- 쿠키를 사용해야 했다(어젠 페이지에 관련 코드를 하나도 넣지 않았다).
- 우측의 ‘로그인’ 버튼은 실제로 로그인한 이후 ‘로그아웃’으로 바뀌어야 한다(하지만 그냥 로그인 페이지로 넘어간다). 이걸 확인하기 위해선 로그인 여부 확인이 필요했고, 그러기 위해서 쿠키에 로그인 정보(로그인 한 사용자 이름)를 저장하기로 했다.
- 로그인 된 상태에서 ‘로그아웃’을 시도할 경우 쿠키에서 로그인 정보를 제거해야 했다.
- 중앙의 제목을 클릭하면 메인 페이지로 돌아가야 한다(하지만 같은 페이지에 그대로 머문다).
2번 문제는 그렇게 큰 문제가 아니라서 - 간단하게 제목이 들어간 a 태그의 href 속성을 바꾸면 됐었다(어젠 그냥 #으로만 놔뒀었던 걸 메인 페이지가 있는 곳으로 바꿔주면 됐다) - 빠르게 끝냈다. 문제는 1번이었다.
C o o k i e, 놔둔 곳과 그 부스러기
서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각 - MDN Web Docs / HTTP 쿠키
-을 통해 사용자의 로그인 상태를 유지할 수 있는데, 진행 중인 미니 프로젝트에선 JavaScript를 통해 쿠키를 만들고 삭제하는 방식을 택했다. document.cookie를 이용해,
- 쿠키를 추가하고(
document.cookie = "key=value;") - 쿠키를 불러오고(아래의 코드 블럭은 특정 쿠키를 가져오는 코드이다),
function getCookie(cookieName) {
let matches = document.cookie.match(
new RegExp(
"(?:^|; )" +
cookieName.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") +
"=([^;]*)"
)
);
return matches ? decodeURIComponent(matches[1]) : undefined;
}- 쿠키를 지우고(
document.cookie = "key=;")
-하는 방법을 새로 알고 활용하였다. 그렇게 위의 1번 문제를 해결하기 위해 추가한 코드가 이렇게 되었다:
let usernameSignedIn = getCookie("user");
$("#signButton").text(
typeof usernameSignedIn !== "undefined" && usernameSignedIn.length !== 0
? "로그아웃"
: "로그인"
);
$("#signButton").click(async function () {
if (
typeof usernameSignedIn !== "undefined" &&
usernameSignedIn.length !== 0
) {
document.cookie = 'user=;';
location.href = "../mainpage/mainpage.html";
} else location.href = "../login/login.html";
});- 로그인 한 사용자의 정보(이름)을
user쿠키를 통해 가져온다. - 해당 쿠키가 존재하지 않거나 빈 값을 가질 경우 사용자가 로그인하지 않았다고 간주한다:
- ‘로그인’ 버튼을 만들고(
signButtonID를 가진button의text변경) - 누를 경우 로그인 페이지(
login.html)로 넘어가게 한다.
- ‘로그인’ 버튼을 만들고(
- 존재할 경우 사용자가 로그인했다고 간주한다:
- ‘로그아웃’ 버튼을 만든다(
signButtonID를 가진button의text변경) - 누를 경우
user쿠키를 지우고 메인 페이지(mainpage.html)로 넘어가게 한다.
- ‘로그아웃’ 버튼을 만든다(
이 코드엔 2개의 문제가 있었는데,
- 쿠키의 경로(
path)를 지정하지 않아 - 기본적으로는 쿠키를 만든 페이지의 현재 경로로 정해진다 - 다른 페이지에서 이 쿠키를 접근할 수 없었다. 페이지 별로 폴더가 따로 존재했기에, “해당 경로 혹은 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다”는 특성을 활용할 수 없었다. - 코드 상으로
user쿠키에 담긴 값이 비어있을 상황에도 대응할 수 있게 했지만 다른 페이지에선 이를 구현한 로직이 달랐다(한 페이지에선 아예document.cookie의 길이가 0이 아닌지를 체크했다). 이게 의미하는 건, 쿠키를 지우는 코드(document.cookie = 'user=;')를 써도 다른 곳에서 쿠키가 지워지지 않았다고 간주될 수 있는 것이다.
해당 문제를 아래의 코드
document.cookie = 'user=; expires=Thu, 01 Jan 1999 00:00:10 GMT; path=/';로 해결했다(원래의 document.cookie = 'user=;';를 변경했다):
- 쿠키가 있는 경로를
/, 즉 사이트의 최상위 경로에 두어, 모든 하위 페이지에서 쿠키에 접근할 수 있게 하였다. - 쿠키의 특성으로
expires, 즉유통기한만료일자를 두어 쿠키를 삭제시켰다. (다른 페이지에선max-age특성을 사용하여 삭제하였다).쿠키가 상한 건 동일하다고 생각했다.