2022stale-while-revalidate (SWR)stale-while-revalidate 해당 아티클을 번역, 요약하여 쓴 글입니다. What shipped? stale-while-revalidate…
2022React react-virtualized Example무한 스크롤을 사용해서 데이터를 계속 불러오다 보면 모바일 화면에 백화현상이 일어났다. 리액트 공식 문서 살펴보기 리액트 공식 문서에도 관련된 내용이 있었다. → Virtualize Long Lists 100개 또는 100…
2021Gatsby-Netlify SEOGatsby-Netlify 블로그에서 SEO 설정하기 1. 내 사이트가 Google에서 검색되는지 확인하기 2. 로봇 텍스트 파일과 사이트맵 파일을 준비한다. Gatsby SEO 관련 공식 문서(SEO with Gatsby)를 읽어보면 Gatsby…
2021React with GraphQL Pagination이 포스트에서는 프론트엔드 관련 코드만을 다룹니다. Relay’s Cursor Based Connection Pattern으로 pagination을 구현합니다. 데이터 가져오기 GraphQL query 작성 서버에서 pagination…
2021Tailwindcss Bouncing Ball Preloader로딩 애니메이션을 찾아다니다가 통통 튀는 공모양 preloader를 발견했는데, 가장 심플하고 재미있어서 tailwindcss로 비슷하게 만들어보았다. 공 모양 만들기 : 너비, 높이 16px의 원 모양을 만든다. 통통 튀는 bounce…
2021React react-hook-form Examplereact-hook-form을 사용해서 사용자 입력 데이터를 서버로 전송하는 기능 구현하기 설치 Form 영역 사용자가 입력하는 form 영역은 다음 사진에서 표시한 부분이다. Readable이라는 interest를 선택하고, tag1, tag…
2021Git Stashcommit하기 껄끄러울 때 사용하는 stash Stash? 작업 파일들을 스택에 잠시 저장할 수 있도록 하는 것, stash 명령을 사용하면 워킹 디렉토리에서 수정한 파일들만 저장한다. Stash 원리 를 실행하면 스택에 새로운 Stash…
2021React Custom Popover Component간단한 Popover 컴포넌트 만들기 Popover 컴포넌트 데모 우선, Material-UI 사이트의 Popover 컴포넌트가 어떻게 구현되어 있는지 확인했다. Material-UI 사이트의 Popover…