혜르미온느

.

.

.

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

styled component에 대해서는 이전 회사에서 익히 들었었지만 한 번도 적용하지 않았던 부분이다. 그렇게 잊고 살다가 우연히 스켈레톤 ui의 예시를 보며 styled component 사용을 확인하였고, 간단하게나마 한 번 정리해 보고자 한다. styled-component에 대하여 검색을 하다보면 CSS-in-JS라는 말을 쉽게 접할 수 있다. 스타일드 컴포넌트에 대하여 알아보기 전 CSS-in-JS의 개념부터 정리해보자. CSS-in-JS CSS-in-JS는 직관전인 의미 그대로 JS 안에서 CSS를 작성하겠다는 뜻이다. TMI로 2014년 facebook 개발자인 Vjeux가 이러한 방법으로 문제를 해결한 방식을 발표하였으며, 이후 개념이 확립/정립되며 많은 라이브러리가 등장하게 되었다. ..

연휴를 앞 둔 직전. 팀장님께서 공지하신 말씀 XX 페이지가 많이 느리다는 의견이 있어 연휴동안 해결 방안을 생각해보고 연휴 후에 이야기를 나눠봅시다. 그래서 근래 연휴동안 대체 어떻게 해야하지! 라는 고민밖에 없었다... (사실은 해당 페이지가 느리다는 것에 별로 공감이 가지 않는 것이 가장 큰 이유이다.) 그러다가 정리해보는 lightHouse! Lighthouse란? 구글에서 제공하는 lighthouse는 웹페이지 품질 측정 도구라고 생각하면 된다. 모든 웹페이지에서 실행할 수 있으며, 이때 해당 페이지의 성능/접근성/검색엔진 등에 대한 분야들을 체크하여 점수로 나타내준다. 다만 이 점 수가 절대적인 점수는 아님으로 측정 할 때마다 조금씩 달라질 수 있다. lighthouse 사용방법 사용 방법은 ..

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