분류 전체보기
[프론트엔드 성능 최적화 가이드] 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..
HTTP 상태 코드 정리된 웹사이트
https://www.webfx.com/web-development/glossary/http-status-codes/ HTTP Status Codes Glossary Wondering what an HTTP status code means? Browse this list of HTTP status codes for definitions and code references. www.webfx.com
시군구 단계별 주소 조회 api
https://sgis.kostat.go.kr/developer/html/newOpenApi/api/dataApi/addressBoundary.html 개발지원센터 단계별 주소 조회 즐겨찾기 등록 즐겨찾기 행정구역 및 도로명주소 단계별 조회 API 요청주소 https://sgisapi.kostat.go.kr/OpenAPI3/addr/stage.json 요청정보(Body) 요청변수 값 Optional 설명 accessToken String 필수 sgis.kostat.go.kr 주소를 입력할 때 많이 사용하는 시군구 조회 기능에 유용하게 사용 가능한 api다. 설명이 잘 되어 있어서 순서대로 따라하면 된다.....
Javascript는 싱글 스레드 언어인가?
https://velog.io/@devmag/Javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%8B%B1%EA%B8%80-%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%B8%EA%B0%80 [Javascript] 자바스크립트는 싱글 스레드인가? JS는 싱글 스레드 언어인데, 싱글 스레드의 특징은?한 번에 하나의 일만 수행할 수 있는 것문맥 교환(context switching)이 필요하지 않다.프로그래밍 난이도가 쉽고 CPU 및 메모리를 적게 사용한다.단 velog.io
Creating valid and accessible links
Quick tip: Creating valid and accessible links - The A11Y Project Links are used on almost every site on the web, however it is easy to create links that are not accessible to all. www.a11yproject.com
테이블이 꼼짝도 하지 않는다면 table-layout: fixed 를 조심하기
테이블 사이즈를 어떻게 바꿔도 (개발자도구에서 직접 바꿔봐도) 꼼짝도 하지 않는다면 table-layout: fixed; 로 설정한 부모나 조상이 없는지 확인할 것.............