혜르미온느

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

어느날 들어온 질문 하나. 전체 문구와 일부 단어를 드리면 해당 부분만 볼드처리해주실 수 있나요? 아마 될 것 같지만 확인은 한 번 해보겠다고 하고, 어떻게 풀어나갈까 생각했다. 생각해보니 검색창에 검색어를 입력할 때, 해당 부분만 표시된다거나 하는 코드라고 생각하면 쉬울 것 같아 어떻게 풀어내었는지 메모삼아 작성한다. ✔️ 정규식을 이용하자 // const text = '웹 애플리케이션 보안 완벽 가이드'; // const bold = '보안'; if (text.includes(bold)) { // 매치되는 단어가 있는지 확인한다. // true일 때, const regex = new RegExp(bold, "g"); text.replace(regex, "" + bold + ""); // 전체문장.re..

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

어떤 스택 오버 플로우 글을 읽다가 처음 보는듯한... 혹은 잘 사용하지 않아 잊은 듯한 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..

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