혜르미온느

IOS에서 페이지가 오픈되었을 때, PageShow event가 실행되는데 이때 bfcache로 페이지가 열렸는지 아니면 아예 처음 새롭게 열린건치 체크할 수 있는 방법이 있다. 바로 다음과 같은 속성을 이용하면 된다. https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/persisted PageTransitionEvent.persisted - Web APIs | MDN The persisted read-only property indicates if a webpage is loading from a cache. developer.mozilla.org addEventListener('pageshow', (event) => { if (..

회사에서 운영중인 무한스크롤에 오류가 있는듯 하였다. (나는 재현되지 않음) 해당 오류를 파악하려다 보니 구현되어있는 intersection Observer API와 밀접한 관련이 있다는 것을 알게되었고, IO api에 대하여 대충만 이해하고 있다는 느낌이 들어 정리해 보기로 하였다. ✔️ Intersection Observer API란? intersection Observer API는 관찰하고자 하는 element가 viewport에 진입하거나 사라질 때, 즉 element를 관찰하다가 viewport에서 교차 될 때마다 콜백함수를 실행할 수 있게 해주는 api이다. 한 마디로는 내가 궁금한 element가 뷰포트 내에 진입했는지를 확인하고, 진입했다면 지정한 함수를 호출해 준다. IO api는 비동기..

어떤 스택 오버 플로우 글을 읽다가 처음 보는듯한... 혹은 잘 사용하지 않아 잊은 듯한 event를 발견하였다. 게다가 며칠 전 팀장님께서 한 번 알려주신 이벤트라 또 잊지 말자는 의미에서 기록용으로 남겨둔다! https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event Document: visibilitychange event - Web APIs | MDN The visibilitychange event is fired at the document when the contents of its tab have become visible or have been hidden. developer.mozilla.org http..

히스토리 복원 관련한 기능을 구현하던 중 스크롤 이슈에 부딪혔다. 페이지로 다시 복귀했을 때, 스크롤 위치값을 가지고 있는데에도 불구하고 스크롤이 최상단으로 가는 문제였다. 분명 흔하게 사용되는 기능이기 때문에 해결하는 방법이 있을 것 같아 이리저리 찾아 해결한 방법을 소개하고자 한다. 참고로 해결방법은 너무 쉬웠으며, 심지어 이전에 포스팅 했던 내용중에 잠깐 언급된 적도 있었다. (반성해 ㅜㅜ...) ✔️ 정확하게 어떤 상황이었을까? 내가 마주한 상황은 이러했다. 사용자가 페이지에서 스크롤을 내리고, 창을 켜는 등의 어떠한 액션을 한다 -> 해당 페이지를 떠날 때, sessionstorage에 해당 페이지를 특정할 수 있는 고유의 key값과 데이터, 창 오픈 값(T/F), 스크롤 위치 등의 정보를 저장..

지난번 recoil로 todoList를 만드는 포스팅 그 제 2탄. ✔️ Recoil TodoList 1탄 https://hyermione.tistory.com/130 recoil 환경 세팅 및 RecoilRoot 설정, atom 정의 recoil은 몇 번 포스팅을 했었지만 사실 충분하게 이해하지 못했다. 거의 vuex만 써오던 나에게는 너무 생소한 스타일이기도 했고, 생각보다 레퍼런스가 많이 없었다고 핑계를 대본다... 하여 실무 hyermione.tistory.com ✔️ Recoil TodoList 1탄

recoil은 몇 번 포스팅을 했었지만 사실 충분하게 이해하지 못했다. 거의 vuex만 써오던 나에게는 너무 생소한 스타일이기도 했고, 생각보다 레퍼런스가 많이 없었다고 핑계를 대본다... 하여 실무에서 리코일을 사용하며 애를 먹었고, 관련 작업을 할 때 너무 작아지는 기분이 들었다. 아직도 recoil은 어떻게 다루어야할지는 모르겠지만 공식 문서에 나온 todoList 예제를 보며 차분하게 따라해 볼 생각이다. ✔️ Recoil 테스트 환경 세팅 npx create-react-app 프로젝트명 npm install recoil ✔️ Recoil 사용 설정 단순 recoil 다운받았다. 사용시작! 이라고 하면 너무 좋겠지만 recoil을 사용하겠다는 일종의 세팅과정이 한 번 더 필요하다. recoil 상..

모바일 safari에서는 beforeunload 대신에, pagehide 함수가 사용된다. - pagehide MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event Window: pagehide event - Web APIs | MDN The pagehide event is sent to a Window when the browser hides the current page in the process of presenting a different page from the session's history. developer.mozilla.org 반대의 개념으로는 pageshow가 있다. https://developer.mozi..

문득 useEffect return과 beforeunload의 실행 순서가 궁금해져서 직접 실험해보았다. useEffect의 개념과 beforeunload 개념을 안다는 조건으로 포스팅을 작성해본다. ✔️ useEffect 관련 링크 https://hyermione.tistory.com/56 [뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자 [!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번 hyermione.tistory.com https://hyermione.tistory...

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가 사용되는 조건이 있었다. 버튼을 눌러 레이어를 오픈한다. 레이어 닫기 버튼이 lottie로 animation 동작을한다. 레이어 닫기 버튼이 유지된다. 레이어가 닫힐 때, lottie로 animation 동작을 한다. 의 시나리오를 가지고 있었다. 여기서 문제가 발생했는데, 레이어가 열고 닫힐 때마다 로띠를 실행시켜주려면 play 후, onComplate 되었을 때 destroy를 시켜주어야한다. 이때, destroy되며 lottie svg가 사라진다. (json을 svg형식으로 랜더링함) 멈추어있는 버전의..

bfcache란 js heap까지 포함하여 페이지 전체를 다 캐시로 저장한다. 고로 전체 페이지의 정보가 메모리에 저장되어 있기 때문에 사용자가 이전 페이지로 복귀했을 때, 메모리에 저장된 정보를 노출하여주고, 결론적으로 빠른 페이지 로드가 가능하다. bfcache 동작 방식 페이지 전체(heap 포함)를 스냅샷을 떠 메모리에 올린다. ( 이와 반대로 HTTP 캐시는 단순 이전 요청에서 이루어진 응답만 캐싱하기 때문에 둘의 동작 방식은 조금 다르다) 모든 페이지를 스냅샷 뜨기 때문에 bfcache는 항상 빠르다. 만약 setTimeout 등의 함수가 동작하는 경우에는 어떻게 될까? task queue에 있는 모든 작업을 일시정지하고, 페이지가 복원되었을 때 해당 작업을 재실행한다. (개인적으로 이게 항상..