JavaScript : 오늘 하루 안보기 (면접후기)

면접을 보고 왔는데 왜 이거해?

왜냐면... 준비가 덜 되어있어서...
내가 분명히 구현한 경험이 있는 것인데 설명을 못했다는게 너무 아쉬워서...힝구리퐁퐁...☆

일주일 안보기 구현에 대해 설명할 수 있는가?

👶🏻 : 그...! 쿠키를 이용해서 만든다는 것으로 알고 있는데...!!
👩🏻‍💼 : 구현해본 적은 없나요?
👶🏻 : 있긴한데 정확하게 설명드리기는 조금 어렵네요.
👩🏻‍💼 : ...네, 알겠습니다.

면접 질문중에 일주일 안보기 (오늘 하루 안보기)에 대해서 어떻게 구현하는지 설명해보라는 것이 있었는데 이것에 대한 답변을 요따위로 했다. 그리고 추가로 null과 undefined의 차이도 답변을 정말 개떡같이 했는데...

null과 undefined의 차이를 설명해보세요.

👶🏻 : 그...! null은... 空이 아니고...! 제로가 아닌...!! 그...!
👩🏻‍💼 : ...네, 알겠습니다.

null은 값이 null이고 undefined는 값이 말그대로 없다고 말하고 싶었는데 저따위로 대답했다.
null은 널널nullnull하다로 외웠는데 왜 이걸 못써먹었니...

null과 undefined
두가지 모두 변수는 정해져 있는 상태이나 아래와 같은 차이가 있음.
undefiend : 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태.
null : null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태.

나중에 안 것인데 console에서 typeof로 찍어보면 undefined는 undefined 타입이, null은 object 타입이라고 표시된다고 한다.

웹표준 검사 사이트 알고 있는 것이 얼마나 있나요?

👶🏻 : 그...! w...!w...3....!
👩🏻‍💼 : w3c말씀하시는 거죠? 그것 말고 또 사용해본 적 있는 사이트가 있나요?
👶🏻 : 없습니당...
👩🏻‍💼 : ...네, 알겠습니다.

진짜 다양한 검사가 있었다.
크로스브라우징, 장애인과 비장애인 모두가 웹사이트를 이용할 수 있는 웹 접근성까지.

✨w3c마크업 유효성 검사
🌈CSS 문법 검사
👀웹 접근성 검사
😎명도대비검사
💻크로스브라우징

준비도 부족했고 당연히 면접도 망했지만 내가 부족한 부분이 무엇인지 조금 더 알게되는...경험을 했다고 생각해보기로 했다. 부족한 내탓이다. torr... 정☆신☆승☆리

---

오늘 하루 안보기 구현

내가 만든 쿡히...Cookie🍪

웹사이트에 접속을 하면 클라이언트와 서버에 정보가 저장되는데 이걸 쿠키라고 한다. (서버는 쿠키와 세션 두개가 저장됨) 개발자모드 > Application > cookie에서 접속한 사이트의 목록을 클릭하면 Expires / Max-Ages를 볼 수 있는데 이게 쿠키 만기일자다.

JavaScript를 통해서 쿠키를 만들어서 그 쿠키를 제어하면 오늘 하루 안보기(일주일 안보기)를 구현 할 수 있는 것이다.

밑작업
예전에 작업했던 산출물 중에 팝업이 없는 것이 있어서 그것을 활용하기로 했다.
일단 팝업 내용 추가...

💡개발자모드 > Application > cookie에서 보여지는 이름, 값, Expires / Max-Ages가 핵심!

button이 해야할 일

일단 팝업을 컨트롤하기 위한 변수를 잡아봤다.
내 경우에는 팝업자신, 닫기버튼, 쿠키를 저장할지 말지 결정할 체크박스까지 총 3개의 변수가 필요했다.

var popUp = document.querySelector('.popUp');
var inputCheck = document.getElementById('popUp');
var closeBtn = document.querySelector('.popBtn').children[1];

버튼을 클릭할 때, 만약 inputCheck가 checked:true라면 일정 기간동안 더이상 팝업을 보여주지 않아야하므로 Cookie를 만들고, checked:false라면 항상 처음 접속하는 것 처럼 팝업을 보여주어야하므로 Cookie를 삭제한다.

closeBtn.addEventListener('click', function(){
  console.log('inputCheck', inputCheck.checked)
  if(inputCheck.checked){
    //팝업닫고 쿠키 유지
    //쿠키생성함수('쿠키이름','쿠키값','기간')
    setCookie('GEPSthetititle','portfolio',1)
    popUp.style.display="none"
  }else{
    //팝업닫고 쿠키 삭제
    //쿠키삭제함수('쿠키이름')
    delCookie('GEPSthetititle');
    popUp.style.display="none"
  }
})

쿠키 존재유무 확인

쿠키를 만들기 전에 먼저 쿠키의 존재유무를 확인하는 스크립트를 구현해보기로 했다.

//현재 저장된 Cookie 확인
console.log(document.cookie)

현재 저장되어있는 쿠키는 document.cookie를 사용하여 확인할 수 있는데 문자열인 것을 볼 수 있다.

이 문자열을 ;세미콜론을 기준으로 나눠서 배열로 만들고, 함수안에서 반복문으로 배열안에서 전달인자GEPSthetititle가 포함된 요소를 찾으면 접속한 이력이 있는 것으로 처리하기로 했다.

만약 접속한 이력이 있다면 팝업을 display="none", 그렇지 않다면 display="block" 해보자.

function checkCookie(name){
  var cookieList = document.cookie.split(';');
  var isVisited = false;
  for(var i in cookieList){
    if(cookieList[i].indexOf(name) > -1){
      isVisited = true;
    }
    console.log('isVisited?', isVisited)
  }
  if(isVisited){
    popUp.style.display="none";
  }else{
    popUp.style.display="block";
  }
}
checkCookie('GEPSthetititle')

쿠키만들기

쿠키는 name, value, Expires / Max-Ages 등으로 구성되어 있다.
내 컴퓨터에서는 이름, 값, Expires / Max-Ages라고 적혀있지만 보통은 영문으로 적혀있다.

• 이름 : name
• 값 : value
• Epires / Max-Ages : Epires / Max-Ages

function setCookie(name, value, limit) {
  //기준이 될 현재 날짜(년월일) 지정
  var date = new Date();
  //리밋할 기간 지정 오늘부터 limit일간 유지한다면 limit
  date.setDate(date.getDate()+limit)
  var myCookie = '';
  myCookie += name + '=' + value+';';
  myCookie += 'Expires='+date.toUTCString();
  //쿠키 생성
  document.cookie = myCookie;
}

쿠키 삭제

쿠키삭제는 Expires / Max-Ages을 현재보다 과거로 바꿔주어 쿠키를 만료시켜 삭제하는 방식이다.

function delCookie(name){
  // 기준이 될 현재 날짜(년월일) 지정
  var date = new Date();
  date.setDate(date.getDate()-1);
  var myCookie = '';
  myCookie += name + '=portfolio;';
  myCookie += 'Expires='+date.toUTCString();
  // 쿠키 이니셜라이즈
  document.cookie = myCookie;
}

결과

학원다닐 때 jQuery로 한 두번 해본 것이 다여서 기억이 가물가물했는데, 스스로 공부할 기회가 와서 좋았다. 개념이 많이 부족했다는 생각이 든다. 아직 공부할 것이 너무 많다!