혜르미온느

문자열을 자르기 위해 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

특정 문자열을 볼드 처리 하는 방안을 테스트해보던 중 innerHTML이 react는 조금 다른 방식으로 써야 한 다는 것을 알게되었다. ✔️ 리액트 공식문서 dangerouslySetInnerHTMLinnerHTML브라우저 DOM에서 사용하기 위한 React의 대체품입니다 . 일반적으로 코드에서 HTML을 설정하는 것은 실수로 사용자를 XSS(교차 사이트 스크립팅) 공격 에 노출시키기 쉽기 때문에 위험합니다 . 따라서 React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 스스로에게 상기시키기 위해 키 dangerouslySetInnerHTML와 함께 객체를 입력하고 전달해야 합니다 . function createMarkup() { return {__html: 'First · Second'};..

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

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..