https://jaylab.link/tags/javascript/Recent content in Javascript on jaylab-logHugoko-krTue, 01 Aug 2023 00:00:00 +0000https://jaylab.link/js-input-upper-lower-case/Tue, 01 Aug 2023 00:00:00 +0000https://jaylab.link/js-input-upper-lower-case/Thinking about user usability for &lsquo;input box’https://jaylab.link/js-cookie/Fri, 21 Jul 2023 00:00:00 +0000https://jaylab.link/js-cookie/<h2 id="documentcookie">document.cookie</h2> <hr> <h4 id="들어가며">들어가며</h4> <p>Frontend에서 Cookie를 다룰 때, 일반적으로 javascript의 <code>document.cookie</code> 를 통해 get, set, delete 할 수 있다. 이러한 cookie는 같은 브라우저 내에서 값을 저장, 전달, 공유할 수 있다는 점에서 유용하게 사용된다. 현재 투입되어있는 프로젝트에서도 <code>document.cookie</code>로 쿠키가 관리되고있으며, 다음과 같은 용도로 사용되고있다.</p> <ul> <li> <p>다른 화면으로 파라미터를 넘기기 위해</p> </li> <li> <p>뒤로가기 시 이전의 검색조건 값을 다시 불러오기 위해</p> </li> <li> <p><code>window.open</code> 을 통한 팝업 창에서 부모 창으로 값을 전달하기 위해</p> </li> </ul> <h4 id="문제점">문제점</h4> <p>이러한 <code>document.cookie</code>를 단순하게 사용하기에는 한 가지 문제가 있었다. 사용자가 목록페이지에서 “각기 다른 여러 글”을 <code>Ctrl</code>을 누른채 클릭하여 새로운 탭으로 띄울때, 그리고 이 과정이 짧은 시간에 이루어질때 몇가지 문제가 발생했다. A, B, C 글을 짧은시간에 ‘거의’ 동시에 띄울경우 A, B, C 글에 대한 각각의 탭이 열리는게 아닌, C의 글만 3개가 띄워진 것. 이는 A탭이 열린 직 후 A에 대한 파라미터를 담은 쿠키를 조회하기 전, C에 대한 쿠키로 덮어쓰기되어 발생된 현상이었다.</p>