![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bNLUXT/btrQK2eINsV/fkpqZ0w8jGyUqYyg4x5mLk/img.png)
문자열을 자르기 위해 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..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bdmgIa/btrQJHCnLc0/rEc3s4R2PAKeJWDaBv95bk/img.png)
노드의 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
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/k4uvQ/btrQJwnxypK/VpIV7WKm4VoQWkSmdlxAq0/img.png)
특정 문자열을 볼드 처리 하는 방안을 테스트해보던 중 innerHTML이 react는 조금 다른 방식으로 써야 한 다는 것을 알게되었다. ✔️ 리액트 공식문서 dangerouslySetInnerHTMLinnerHTML브라우저 DOM에서 사용하기 위한 React의 대체품입니다 . 일반적으로 코드에서 HTML을 설정하는 것은 실수로 사용자를 XSS(교차 사이트 스크립팅) 공격 에 노출시키기 쉽기 때문에 위험합니다 . 따라서 React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 스스로에게 상기시키기 위해 키 dangerouslySetInnerHTML와 함께 객체를 입력하고 전달해야 합니다 . function createMarkup() { return {__html: 'First · Second'};..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/GzWkc/btrQHA5Bkcb/WRK5F4rlO1YntG0lExGXTK/img.png)
어느날 들어온 질문 하나. 전체 문구와 일부 단어를 드리면 해당 부분만 볼드처리해주실 수 있나요? 아마 될 것 같지만 확인은 한 번 해보겠다고 하고, 어떻게 풀어나갈까 생각했다. 생각해보니 검색창에 검색어를 입력할 때, 해당 부분만 표시된다거나 하는 코드라고 생각하면 쉬울 것 같아 어떻게 풀어내었는지 메모삼아 작성한다. ✔️ 정규식을 이용하자 // const text = '웹 애플리케이션 보안 완벽 가이드'; // const bold = '보안'; if (text.includes(bold)) { // 매치되는 단어가 있는지 확인한다. // true일 때, const regex = new RegExp(bold, "g"); text.replace(regex, "" + bold + ""); // 전체문장.re..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bN9seP/btrQsDU6qHK/rjhry4SPRQqkmdKrpCMoMK/img.png)
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 (..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/SzDan/btrQyv9oyiz/ZH1ky11zzDUl9JnACMp291/img.png)
어떤 스택 오버 플로우 글을 읽다가 처음 보는듯한... 혹은 잘 사용하지 않아 잊은 듯한 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..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bqoMFz/btrQvNWZLQn/naTnHDVpFd95k2ugfF332k/img.png)
모바일 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..
- Total
- Today
- Yesterday
- 모바일사파리
- frontend
- 리액트
- storybookUI
- gitRebase
- reacthook
- js테스트
- 사파리
- javascript
- 리액트상태관리
- 깃
- 프론트엔드
- BFCache
- 김민태
- 센트리
- TIL
- vue
- npm
- 프론트앤드
- react
- 크롬
- js
- 자바스크립트
- CSS
- sentry
- 리코일
- 깃명령어
- 리액트훅
- 센트리모니터링
- Git
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |