dev

stale-while-revalidate (SWR)

stale-while-revalidate 해당 아티클을 번역, 요약하여 쓴 글입니다. What shipped? stale-while-revalidate…

dev

Programmers 합승 택시 요금 자바스크립트 문제 풀이

다익스트라 알고리즘 기억하기 프로그래머스 level3 문제 프로그래머스 - 합승 택시 요금 n이 최대 20…

dev

React react-virtualized Example

무한 스크롤을 사용해서 데이터를 계속 불러오다 보면 모바일 화면에 백화현상이 일어났다. 리액트 공식 문서 살펴보기 리액트 공식 문서에도 관련된 내용이 있었다. → Virtualize Long Lists 100개 또는 100…

dev

Gatsby-Netlify SEO

Gatsby-Netlify 블로그에서 SEO 설정하기 1. 내 사이트가 Google에서 검색되는지 확인하기 2. 로봇 텍스트 파일과 사이트맵 파일을 준비한다. Gatsby SEO 관련 공식 문서(SEO with Gatsby)를 읽어보면 Gatsby…

dev

React with GraphQL Pagination

이 포스트에서는 프론트엔드 관련 코드만을 다룹니다. Relay’s Cursor Based Connection Pattern으로 pagination을 구현합니다. 데이터 가져오기 GraphQL query 작성 서버에서 pagination…

dev

Tailwindcss Bouncing Ball Preloader

로딩 애니메이션을 찾아다니다가 통통 튀는 공모양 preloader를 발견했는데, 가장 심플하고 재미있어서 tailwindcss로 비슷하게 만들어보았다. 공 모양 만들기 : 너비, 높이 16px의 원 모양을 만든다. 통통 튀는 bounce…

dev

React react-hook-form Example

react-hook-form을 사용해서 사용자 입력 데이터를 서버로 전송하는 기능 구현하기 설치 Form 영역 사용자가 입력하는 form 영역은 다음 사진에서 표시한 부분이다. Readable이라는 interest를 선택하고, tag1, tag…

dev

Git Stash

commit하기 껄끄러울 때 사용하는 stash Stash? 작업 파일들을 스택에 잠시 저장할 수 있도록 하는 것, stash 명령을 사용하면 워킹 디렉토리에서 수정한 파일들만 저장한다. Stash 원리 를 실행하면 스택에 새로운 Stash…

dev

Git Rebase

Rebase란? 리베이스는 커밋의 베이스를 똑 떼서 다른 곳으로 붙이는 것이다. Merge와 Rebase…

dev

React Custom Popover Component

간단한 Popover 컴포넌트 만들기 Popover 컴포넌트 데모 우선, Material-UI 사이트의 Popover 컴포넌트가 어떻게 구현되어 있는지 확인했다. Material-UI 사이트의 Popover…