혜르미온느

문자열을 자르기 위해 split 함수를 사용하여 다음과 같은 코드를 작성하였을 때, jumps는 어떻게 될까? const str = 'The quick brown fox jumps over the lazy dog.'; const strCopy = str.split('jumps'); console.log(strCopy); 순간적으로 나는 다음과 같이 기대하였으나 Array ["The quick brown fox ", "jumps", " over the lazy dog."] 결론은 다음과 같다. (기본적인 함수가 헷갈릴 때가 더러있다...ㅠ) Array ["The quick brown fox ", " over the lazy dog."] https://developer.mozilla.org/en-US/doc..

노드의 class 변경을 감지해야 할 일이 있었다. 순간 어떻게 해야하는지 도무지 방법이 생각나지 않아 검색을 했는데, M/O가 나왔다. 알고 있었던 부분이지만 아직 완전히 익숙하게 생각하지 않았었나보다. 기록용으로 남겨둔다! ✔️ Mutation Observer https://developer.mozilla.org/ko/docs/Web/API/MutationObserver MutationObserver - Web API | MDN MutationObserver 는 개발자들에게 DOM 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 Mutation Events 를 대체합니다. developer.mozilla.org

css style 중 overflow는 상자에 맞추어 내용물을 조정할 수 있는 코드이다. 예를 들어 이런식으로 말이다. overflow 속성 중에 'hidden'이라는 속성은 상자에 맞게 콘텐츠가 잘리는 속성으로 스크롤 막대가 제공되지 않으며, 사용자의 스크롤 액션을 막아준다. 그래서 많은 실무자들이 모달 등을 띄웠을 때, 배경이 스크롤 되지 않게 하기 위하여 overflow: hidden을 통해 스크롤을 막아준다. 여기서 문제는 overflow: hidden은 모바일 사파리에서 지원되지 않는다는 점이다. 사파리 렌더링 엔진인 Webkit의 버그라고 한다. (혹시나 그럴리가 없는데? 우리는 overflow hidden을 통해서 스크롤을 잘 막고 있었는데?! 라고 생각하는 서비스가 있다면 두 손가락으로 스..

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), 스크롤 위치 등의 정보를 저장..

모바일 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..

프론트엔드에서 많이 사용되는 lodash. 몇 년을 들어왔지만 막상 정의하려 하니 뭐라고 정의할지 모르겠는 막막함에 갇혔다.(아무도 정의하라고 한 적 없음) 그래서 정리해보는 로다쉬! 혹은 로대쉬? https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com lodash란? 모듈..

scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - Web APIs | MDN Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 상단 MDN을 참고하여 보면 원하는 스크롤로 움직이기 위해서는 다음과 같은 형식으로 스크롤 위치를 지정하여주면 된다. // window.scrollTo(X, Y); window.scrollTo(0, 1000); windo..