혜르미온느

https://yozm.wishket.com/magazine/detail/1746/ 명탐정 ‘크롬 개발자 도구’의 성능 추리 | 요즘IT 버그를 잡기 위해 원인부터 찾듯이, 성능 개선 역시 원인인 병목 지점을 찾는 것부터 시작합니다. 이때 크롬 개발자 도구의 성능 탭은 매우 유의미한 인사이트를 제공합니다. 성능 악화 원인으 yozm.wishket.com

어느날 들어온 질문 하나. 전체 문구와 일부 단어를 드리면 해당 부분만 볼드처리해주실 수 있나요? 아마 될 것 같지만 확인은 한 번 해보겠다고 하고, 어떻게 풀어나갈까 생각했다. 생각해보니 검색창에 검색어를 입력할 때, 해당 부분만 표시된다거나 하는 코드라고 생각하면 쉬울 것 같아 어떻게 풀어내었는지 메모삼아 작성한다. ✔️ 정규식을 이용하자 // 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 사용방법 사용 방법은 ..

지난번 recoil로 todoList를 만드는 포스팅 그 제 2탄. ✔️ Recoil TodoList 1탄 https://hyermione.tistory.com/130 recoil 환경 세팅 및 RecoilRoot 설정, atom 정의 recoil은 몇 번 포스팅을 했었지만 사실 충분하게 이해하지 못했다. 거의 vuex만 써오던 나에게는 너무 생소한 스타일이기도 했고, 생각보다 레퍼런스가 많이 없었다고 핑계를 대본다... 하여 실무 hyermione.tistory.com ✔️ Recoil TodoList 1탄

bfcache란 js heap까지 포함하여 페이지 전체를 다 캐시로 저장한다. 고로 전체 페이지의 정보가 메모리에 저장되어 있기 때문에 사용자가 이전 페이지로 복귀했을 때, 메모리에 저장된 정보를 노출하여주고, 결론적으로 빠른 페이지 로드가 가능하다. bfcache 동작 방식 페이지 전체(heap 포함)를 스냅샷을 떠 메모리에 올린다. ( 이와 반대로 HTTP 캐시는 단순 이전 요청에서 이루어진 응답만 캐싱하기 때문에 둘의 동작 방식은 조금 다르다) 모든 페이지를 스냅샷 뜨기 때문에 bfcache는 항상 빠르다. 만약 setTimeout 등의 함수가 동작하는 경우에는 어떻게 될까? task queue에 있는 모든 작업을 일시정지하고, 페이지가 복원되었을 때 해당 작업을 재실행한다. (개인적으로 이게 항상..

Lottie란 로티란 에어비앤비에서 개발한 라이브러리이다. (그래서 로티 공식 홈페이지를 들어가면 에어비엔비 로고가 뜬다) 유명 프로그램 에프터 이팩트로 추출한 애니메이션 데이터를 json 형식으로 추출하여 웹/앱 등에 적용할 수 있게 해준다. Lottie 장점 백터 기반이다. (svg의 애니메이션화 라고 생각하면 된다. 백터기반이기 때문에 용량은 적고, 높은 해상도를 가지고 있다.) 적용이 쉽다. Lottie가 gif보다 나을까? 로티는 백터기반이기 때문에 기본적으로 적은 용량을 가지고 있다. 그라디언트 혹은 부드러운 움직임 등이 들어간 영상에서 gif는 그래픽을 수행하고 압축하는데 상당한 어려움을 겪는다. gif는 lottie 파일보다 약 3,000배 작다. https://airbnb.io/lotti..

프론트앤드 개발자라면 아마 높은 확률로 사파리 브라우저를 좋아하지 않을거라 생각이 든다. 혹은 크롬을 좋아하지 않거나. 아무튼 두 개를 동시에 좋아할 수는 없다. 왜냐면 둘은 함께 할 수 없으니까! 개발을 하며, 브라우저 호환성에 대해 고민해보지 않은 개발자는 없을것이다. (만약 고민한 적이 없다면 반성해야 할 일..!) 그 차이 중 하나가 바로 bfcache이다. bfcache란 Back-Forward Cache로 사파리나 파이어폭스에서 이전 페이지를 빠르게 로딩하기 위해 스냅샷을 떠서 기억하고 있는 시스템이라고 생각하면 된다. (크롬에서는 96버전 이후부터 사용이 가능하다.) 이게 어떤 장점이 있는지 명확하게 보여주는 아주 좋은 유튜브를 찾았다. https://youtu.be/cuPsdRckkF0 크..

몇 주 전 백엔드 개발자가 npm쓰는지 yarn을 쓰는지 물어보았다. 그러면서 여러 이야기를 나누었는데, 그때 생각이 나 둘의 차이를 정리해보고자 한다. 참고로 나는 두 개의 경험이 다 있다. ✔️ 패키지 관리자란? 일단 npm과 yarn을 알려면 그 두 개가 무엇인지 부터 알아야 한다. npm과 yarn은 Node.js의 패키지 관리자이다. 즉, 전 세계의 개발자들이 js를 통하여 다양하게 만든 라이브러리 등의 패키지를 인터넷에 올리게 되면 npm이나 yarn 등과 같은 패키지 관리자를 통하여 설치 및 삭제 등의 관리를 하는 것이다. 더불어 CLI라고 불리는 command-line interface를 통하여 설치 및 삭제 뿐 만 아니라 버전 관리 등도 편하게 할 수 있다는 특징이 있다. 참고로 npm이..

이전에 스크롤을 부드럽게 하는 방법에 대해 포스팅을 했었는데, css로도 풀 수 있어서 기록용으로 남겨둔다. ✔️ 스크롤을 부드럽게 움직이는 JS 방법 https://hyermione.tistory.com/115 js scroll을 부드럽게 만드는 방법 (+ 사파리 적용) scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - hyermione.tistory.com ✔️ 스크롤을 부드럽게 움직이는 css 방법 css로 풀어내는것은 매우 간단한데, html에 다음과 같은 코드를 ..