혜르미온느

노드의 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

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

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

recoil은 몇 번 포스팅을 했었지만 사실 충분하게 이해하지 못했다. 거의 vuex만 써오던 나에게는 너무 생소한 스타일이기도 했고, 생각보다 레퍼런스가 많이 없었다고 핑계를 대본다... 하여 실무에서 리코일을 사용하며 애를 먹었고, 관련 작업을 할 때 너무 작아지는 기분이 들었다. 아직도 recoil은 어떻게 다루어야할지는 모르겠지만 공식 문서에 나온 todoList 예제를 보며 차분하게 따라해 볼 생각이다. ✔️ Recoil 테스트 환경 세팅 npx create-react-app 프로젝트명 npm install recoil ✔️ Recoil 사용 설정 단순 recoil 다운받았다. 사용시작! 이라고 하면 너무 좋겠지만 recoil을 사용하겠다는 일종의 세팅과정이 한 번 더 필요하다. recoil 상..

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가 사용되는 조건이 있었다. 버튼을 눌러 레이어를 오픈한다. 레이어 닫기 버튼이 lottie로 animation 동작을한다. 레이어 닫기 버튼이 유지된다. 레이어가 닫힐 때, lottie로 animation 동작을 한다. 의 시나리오를 가지고 있었다. 여기서 문제가 발생했는데, 레이어가 열고 닫힐 때마다 로띠를 실행시켜주려면 play 후, onComplate 되었을 때 destroy를 시켜주어야한다. 이때, destroy되며 lottie svg가 사라진다. (json을 svg형식으로 랜더링함) 멈추어있는 버전의..

프론트엔드에서 많이 사용되는 lodash. 몇 년을 들어왔지만 막상 정의하려 하니 뭐라고 정의할지 모르겠는 막막함에 갇혔다.(아무도 정의하라고 한 적 없음) 그래서 정리해보는 로다쉬! 혹은 로대쉬? https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com lodash란? 모듈..

화면에서 안 보이게 하는 스타일 속성에는 여러가지가 있다. 퍼블리셔님이 width: 1px, height: 1px인 div를 overflow: hidden 처리를 하여 잡아준 스타일이 있다. 1px인 정사각형을 화면에 노출시켜주고, 넘치는 부분을 잘라줬는데, 이상하게 화면에서는 렌더링 되었다고 인지하지 못한다. 그래서 알아본 화면에서 안 보이게 하는 방법 포스팅인데, 이제 overflow를 곁들인 이야기이다. overflow overflow는 사실 화면 노출에 관한 스타일은 아니고, 콘텐츠 요소가 블록의 크기를 초과할 때 처리에 관한 속성이다. 다만 퍼블리셔님이 작성해준 것 처럼 1px 크기의 정사각형에 overflow hidden을 통해 넘치는 콘텐츠 요소를 잘라주면 마치 화면에서 사라진 듯한 효과를 ..

윗분들의 슬랙 채팅 중 나온 Retry. 뭔지 모르겠어서 한참 헤매고, 한참을 검색했는데, Re-try였다. 분명 아는 단어인데, 왜 이해하지 못했을까. 사실 이럴때가 많은데, 나의 결론은 '정확하게 알지 못하기 때문에 인지에 시간이 걸린다.' 였다. 그래서 정리해보는 Retry-! Retry란? retry는 말 그대로 재시도를 의미한다. 가령 한 사이트에 접속햇는데, 페이지가 제대로 로드되지 않았다. 이 경우 사용자는 새로고침을 하거나 해당 사이트를 나가버릴 것이다. 이것은 사용자가 직접적으로 액션을 취하는 방법인데, 만약 사용자가 아무런 액션을 취하지 않는 경우 혹은 어떠한 액션도 취할 수 없는 경우라면 어떨까. 이러한 경우 알아서 재시도 요청을 보내는 것. 이것을 retry라고 한다. 보통 클라이언..

scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - Web APIs | MDN Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 상단 MDN을 참고하여 보면 원하는 스크롤로 움직이기 위해서는 다음과 같은 형식으로 스크롤 위치를 지정하여주면 된다. // window.scrollTo(X, Y); window.scrollTo(0, 1000); windo..

https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C 프론트엔드 추천 자료 모음 사이트 MDN - 가장 유명한 MDN 모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음. 타입스크립트 핸드북 - TS 공식문서 번역 본 웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북 fontawesome - 다양한 ICON을 가져 velog.io 더보기 관심있는것 https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io htt..