WIL (Weekly I Learned) ”한 번의 실수는 배움이, 두 번의 실수는 실력이 된다.” ”경험이 없다면 창조도 없다.” “I may be wrong.”

배럴(Barrel) 파일에서 export * from 사용할 때 조심하자. 배럴(Barrel) 파일이란? 여러 모듈을 하나로 묶는 index.ts…

TypeScript의 Pick, Readonly, Exclude, Awaited, Parameters, ReturnType, Omit 같은 내장 제네릭 타입들을 직접 구현해보며, Conditional Types…

Nx는 Monorepo를 지원하는 빌드 시스템입니다. Nx generator를 사용하면 파일 생성, 수정, 이동, 삭제가 필요한 코드를 쉽게 작성할 수 있습니다. 또한 자주 하는 작업을 간단한 command로 자동화할 수 있습니다. Generator…

Bundle Analyzer를 돌려보고 Lodash가 이상한 모양새로 꽤 큰 사이즈로 자리 잡고 있다는 것을 알게 되었습니다. Gzipped size: 33.81KB Lodash 모듈 용량 최적화 방법 lodash…

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

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

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

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

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

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

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

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

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

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