Bleeding edge

고민한 이유 최근에 회사에서 채팅로그를 새로고침을 한 경우에는 저장을 하고, 창을 끄는 경우 없애자는 이야기가 나왔었다. 평소에 이런 비슷한 케이스가 있으면 window addeventlistener에서 beforeunload를 이용해서 해결했는데, 문제는 이 방법은 새로고침과 창을 끄는 경우 모두 포함한다. 검색 결과 reload와 close에 대해 검색하다보면 꺼질 때의 position에 따라 처리해라 이런 다양한 글들이 보였었는데,안될꺼같아서 우선 다 제외하고, 둘의 차이에 대해 검색을 하다가 다음과 같은 글을 보았다 https://stackoverflow.com/questions/568977/identifying-between-refresh-and-close-browser-actions Ident..

고민한 이유 Single Page Application을 만들다가, 서버에서 모든 Single Page Application에 대한 초기 정보를 저장하는 것이 너무 부담되어서, Local Storage에서 초기 State를 관리하기로 하였다. 이 문제를 해결하기 위해 만났던 문제들 nextjs에서 localStorage is not defined 이 문제는 nextjs에서는 window가 undefined인 순간이 있을 수 있는 nextjs에서 나올 수 있는 케이스로 해결 방법은 심플하다(단지 언제 undefined 인지 시점을 지정하는게 타이트할수록 번거로울 수 있다..) function App(){ if(typeof window==="undefined") return //...localStorage에..

문제가 생기는 이유 특히 싱글페이지로 웹을 개발하는 경우에 많이 만날 수 있는데, 100vh를 적용하면 모바일에 알맞지 않게 나오는 현상이 있다. 이 이유는 device의 높이를 잡을 때 주소창과 같은 dynamic한 요소들 때문에 생긴다. 해결책? 사실 인터넷을 검색하면, webkit fill이나 100%를 이용해서 해결하는 방법과 자바스크립트를 이용해서 vh를 지속적으로 변화시키는 방법이 있는데, 이 방법들은 너무 번거로워서 항상 귀찮았었는데, 요번에 검색을 하다가 새로운 방법을 찾게되었다. dvh, svh https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/ Incoming: ..