혜르미온느

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

RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소이다. import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); }​ Atom 아톰은 상태(state)의 일부를 나타낸다. Atoms는 어느 컴포넌트에서나 읽고 쓸 수 있다. 아톰의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 랜더링 되는 결과..

몇 주 전 백엔드 개발자가 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에 다음과 같은 코드를 ..

리액트에서는 JSX라는 문법을 사용한다. 이는 구성 요소 랜더링 구성 방법을 제공하는 방식으로 HTML처럼 생겼지만 Javascript의 확장된 문법이라고 말할 수 있다. (리액트에서 jsx 사용이 필수는 아니다.) JSX는 한 번에 하나의 element를 반환하기 때문에 반드시 최상위 하나의 DOM을 추가해줘야한다. 다음 코드에서 최상위는 div로 구성된 마크업이다. import "./styles.css"; export default function App() { return ( Hello CodeSandbox Start editing to see some magic happen! ); } 이 때, h1, h2 두 코드만 랜더링 하고 싶으면 어떻게 해야할까? Hello CodeSandbox Start ..

프론트엔드에서 많이 사용되는 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라고 한다. 보통 클라이언..

협업에서 빠질 수 없는 버전관리시스템 git. 다양한 사람들과 협업 할 수록 버전관리가 더욱 중요해지는데요. git kraken은 이러한 버전 관리의 히스토리, 머지, 컨플릭트 등을 더 쉽게 관리할 수 있도록 도와주는 툴입니다. https://www.gitkraken.com/ GitKraken Legendary Git Tools | GitKraken Meet GitKraken, the creator of legendary Git tools for developers and teams - like the GitKraken Client, with Git GUI and CLI, Git Integration for Jira, and GitLens for VS Code. www.gitkraken.com 커밋기록을..