Bleeding edge

React Native와 웹뷰를 이용하여 어플리케이션을 만들다보니, 항상 QA를 많이 받는 것이 "앱처럼 만들어 주세요" 였다. 이번 주에는 앱처럼 "페이지가 없는 부분에서는 스크롤을 막아주세요" 라는 요청을 받았다. 해결 만일 x축 y축 모두 막고 싶다면 다음과 같이 사용하면 되지만, 나같은 경우에는 y만 막으면 ok이기 때문에 이 방법을 사용하였다. overscroll-behavior-y: none; 이 부분을 body와 해당하는 div에 추가적으로 적용하면 되지만, default가 되는 부분은 모두 막고 싶었기 때문에 *{ overscroll-behavior-y: none; } 모든 y에 대한 over scroll을 막아버렸다.

글을 쓴 이유 사실 이 코드를 작성하는 방법이 어렵다, 이런건 아니지만 보통 이 코드를 사용하는 순간은 너무나도 분노가 많을 때여서 붙여넣기 용으로 하나 작성한 코드이다. Object.keys(window).forEach(key => { if(/./.test(key)){ window.addEventListener(key.slice(2), event => { console.log(key, event) }) } }) 언제 사용하는게 좋은가 이전에 웹만 만들 때는 잘 몰랐었는데, React native로 웹뷰를 개발하면서 pc가 아닌 다른 기기에 대한 이벤트를 다루면서 어떤 이벤트가 어떤 순서 혹은 언제 발생하나를 보기 위해서 사용하게 되었다. (정확히는.. iOS에서 원하지 않는 순간에 alert가 발생했는..

문제점 이번에 React native와 Nextjs를 이용하여 앱을 만들고 있었다. 전역 상태로 window를 사용하는 함수가 있었고, SSR 에서 window 객체가 없는 순간에 에러가 나오기 때문에 빌드 에러가 발생한다. 에러 메세지 일반적인 window is not defined 해결 방법 처음부터 끝까지 내가 작성한 함수의 경우 window is not defined는 그 함수가 시작하는 지점 혹은, window 객체를 사용하는 지점에서 다음과 같이 return을 하면 문제가 없다. if(typeof window === 'undefined') return 하지만 이번에 문제를 일으킨 함수같은 경우 heic2any라는 라이브러리라서 import를 하는 순간 window is not defined가 ..