항해(현직자 부스트캠프) WIL 시리즈WIL (Weekly I Learned) ”한 번의 실수는 배움이, 두 번의 실수는 실력이 된다.” ”경험이 없다면 창조도 없다.” “I may be wrong.”
Built-in 제네릭 타입 직접 구현해보기TypeScript의 Pick, Readonly, Exclude, Awaited, Parameters, ReturnType, Omit 같은 내장 제네릭 타입들을 직접 구현해보며, Conditional Types…
Nx generator로 자주 하는 작업 자동화하기Nx는 Monorepo를 지원하는 빌드 시스템입니다. Nx generator를 사용하면 파일 생성, 수정, 이동, 삭제가 필요한 코드를 쉽게 작성할 수 있습니다. 또한 자주 하는 작업을 간단한 command로 자동화할 수 있습니다. Generator…
Next.js에서 Lodash 번들 사이즈 최적화하기Bundle Analyzer를 돌려보고 Lodash가 이상한 모양새로 꽤 큰 사이즈로 자리 잡고 있다는 것을 알게 되었습니다. Gzipped size: 33.81KB Lodash 모듈 용량 최적화 방법 lodash…
stale-while-revalidate (SWR)stale-while-revalidate 해당 아티클을 번역, 요약하여 쓴 글입니다. What shipped? stale-while-revalidate…
React react-virtualized Example무한 스크롤을 사용해서 데이터를 계속 불러오다 보면 모바일 화면에 백화현상이 일어났다. 리액트 공식 문서 살펴보기 리액트 공식 문서에도 관련된 내용이 있었다. → Virtualize Long Lists 100개 또는 100…
Gatsby-Netlify SEOGatsby-Netlify 블로그에서 SEO 설정하기 1. 내 사이트가 Google에서 검색되는지 확인하기 2. 로봇 텍스트 파일과 사이트맵 파일을 준비한다. Gatsby SEO 관련 공식 문서(SEO with Gatsby)를 읽어보면 Gatsby…
React with GraphQL Pagination이 포스트에서는 프론트엔드 관련 코드만을 다룹니다. Relay’s Cursor Based Connection Pattern으로 pagination을 구현합니다. 데이터 가져오기 GraphQL query 작성 서버에서 pagination…
Tailwindcss Bouncing Ball Preloader로딩 애니메이션을 찾아다니다가 통통 튀는 공모양 preloader를 발견했는데, 가장 심플하고 재미있어서 tailwindcss로 비슷하게 만들어보았다. 공 모양 만들기 : 너비, 높이 16px의 원 모양을 만든다. 통통 튀는 bounce…
React react-hook-form Examplereact-hook-form을 사용해서 사용자 입력 데이터를 서버로 전송하는 기능 구현하기 설치 Form 영역 사용자가 입력하는 form 영역은 다음 사진에서 표시한 부분이다. Readable이라는 interest를 선택하고, tag1, tag…
Git Stashcommit하기 껄끄러울 때 사용하는 stash Stash? 작업 파일들을 스택에 잠시 저장할 수 있도록 하는 것, stash 명령을 사용하면 워킹 디렉토리에서 수정한 파일들만 저장한다. Stash 원리 를 실행하면 스택에 새로운 Stash…
React Custom Popover Component간단한 Popover 컴포넌트 만들기 Popover 컴포넌트 데모 우선, Material-UI 사이트의 Popover 컴포넌트가 어떻게 구현되어 있는지 확인했다. Material-UI 사이트의 Popover…
