전체 글
[프론트엔드 성능 최적화 가이드] 1장 블로그 서비스 최적화
개발서적 스터디를 시작했는데 1장 발표자가 되었다. 한 번 날려먹어서 두 번 정리한 블로그 서비스 최적화 내용. 거의 복사 붙여넣기 수준으로 적었지만 타이핑을 하다보니 나름대로 좀 더 이해가 잘 되었다. 분석 툴 소개 크롬 개발자 도구의 Network 패널: 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줌 크롬 개발자 도구의 Performance 패널: 웹 페이지가 로드될 때 실행되는 모든 작업을 보여줌. 이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인할 수 있음 크롬 개발자 도구의 LightHouse 패널: 웹사이트의 성능 점수를 측정, 개선 가이드 확인 가능 webpack-bundle-analyzer: npm을 통해 설치. 완성된 번들 파일 중 불필요한 코드가 어떤 코드인지,..
RTK-query로 게시판 작성 시, formdata를 넘기고 싶은 경우
https://stackoverflow.com/questions/76340703/send-form-data-with-rtk-query send form data with rtk query I wanna send an image with form data to the nest js server with RTK query but the file didn't send. the code are: uploadImage: builder.mutation({ query: (imageFile) => { ... stackoverflow.com 이걸 보고 시도했지만 에러가 났다. 왤까... rtk-query 홈페이지에서 formdata를 검색해도 나오는게 없어서 좀 헤맸다. saveBoard: builder.mutation..
문제 있는 조상 엘리먼트 찾기 snippet
// Replace “.the-fixed-child” for a CSS selector // that matches the fixed-position element: const selector = '.the-fixed-child'; function findCulprits(elem) { if (!elem) { throw new Error( 'Could not find element with that selector' ); } let parent = elem.parentElement; while (parent) { const { transform, willChange, filter, } = getComputedStyle(parent); if ( transform !== 'none' || willChange ..
Un fixing fixed Elements with CSS transforms
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ Un-fixing Fixed Elements with CSS Transforms In the course of experimenting with some new artistic scripts to follow up meyerweb.com
vim
https://letyarch.blogspot.com/2021/01/vim.html vim 맛있습니까? 그거 독약입니다. ❮ vim 맛있습니까? 그거 독약입니다. 20210112 너넨 이런거 하지마라~ https://bengi.kr/1349 이 글을 보고 답글 쓰다가 날아가서 그냥 블로그에 씁니다. 먼저, 전 vim을 무조건 써야 된다고 강요하는 꼰대 letyarch.blogspot.com 요즘에는 웹 상에 vim을 잘 설명해둔 자료가 많습니다. 점진적으로 배우는 것은 좋지만 제대로 배워야 합니다. 아래 링크들을 추천합니다. 난이도 순 입니다. https://www.openvim.com/ https://github.com/iggredible/Learn-Vim https://danielmiessler.co..