몽땅뚝딱 개발자

react-lazyload를 사용한다. vue에도 vue-lazyload가 있다! ◽ react-lazyload 설치하기 npm i --save react-lazyload [사용예제] import React from 'react'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; import { showModal } from '../redux/imageModal'; import LazyLoad from 'react-lazyload'; function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ..

◽ Layout Shift 의도하지않은 클릭이 발생하는 등 사용성이 떨어진다. ◽ Layout Shift 확인하기 ◽ Layout Shift의 원인 - 사이즈가 정해져 있지 않은 이미지가 로딩되는 경우 - 사이즈가 정해져 있지 않은 광고가 있는 경우 - 동적으로 콘텐츠를 삽입하는 경우 - Web font (FOIT, FOUT): 폰트가 추가로 적용되는 경우 ◽ 사이즈가 정해져있지 않은 이미지가 로딩되는 경우 사이즈가 지정되어있는 경우(예를 들어 비율이 16:9로 정해진 경우) padding-bottom을 주고 미리 영역을 확보한다. const ImageWrap = styled.div` width: 100%; padding-bottom: 56.25%; position: relative; `; const I..

border를 주고 box-sizing: border-box;를 줘봐도 자꾸 영역밖으로 나갔다. box-shadow 속성으로 주면 깔끔하게 지정된 div 영역 안으로 들어간다. div { box-shadow: 0 0 0 3px #4872f4 inset; } 출처 HTML 레이아웃 잡을 때 박스 안쪽 테두리 실전 2가지 방법 웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다. 하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭 indienote.tistory.com

◽ Lighthouse Lighthouse 탭에서 이렇게 확인할 수 있다. ◽ 커버리지탭 각 파일을 더블클릭하면 사용하는 것, 사용하지 않는 css를 볼 수 있다. 따라서 사용하지 않는 css를 제외한다면 용량을 줄일 수 있다. ◽ purgecss 사용하여 사용하지않는 css 제거하기 npm i purgecss sass랑 같이 사용할 수 있는지? https://purgecss.com/css_modules.html CSS modules | PurgeCSS How to use with CSS modules PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using CSS ..

..🥺 ◽ props 📄 Vue2 📄 Vue3 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 캐시 설정하기 ◽ 캐시의 종류 1. 메모리 캐시 메모리상에(RAM) 저장 2. 디스크 캐시 디스크에 file로 저장 ◽ Cache-Control Http Header에 들어가는 값으로 서버에서 설정해야 한다. - 요청: 나 어떤 이미지가 필요해 - 서버: 니가 이미지가 필요하구나? 가져가 ◽ Cache-Control의 5가지 속성 1. no-cache 캐시를 사용하기 전에 서버에 검사 후 사용을 결정한다. 요청한 이미지가 다르면 캐시된 이미지를 사용하지않고 다시 보내준다. max-age=0과 같다. 캐시 시간이 만료되더라도 브라우저는 리소스를 갖고있다. 새로 다시 리소스를 요청할 때 만료된 데이터에 대해 다시 사용해도되는지 검사한다. 2. no-store 캐시를 사용하지 않음 3. public 모든 ..

◽ 폰트 Preload (다시보기) css가 로드된 이후에 로드되었지만 화면에 진입하자마자 폰트가 필요한 시점보다 더 먼저 load 될 수 있도록 한다. ◽ 웹팩에서 설정하기 const PreloadWebpackPlugin = require('preload-webpack-plugin') module.exports = function override(config, env) { config.plugins.push(new PreloadWebpackPlugin({ rel: 'preload', as: 'font', include: 'allAssets', fileWhiteList: [/(.woff2?)/] })) return config; } 출처 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. Reac..

◽ 제네릭 사용하기 function logText(text: T):T { console.log(text); return text; } logText('안녕') ◽ 제네릭의 장점 유니온을 사용하는 경우 명확한 변수타입이 지정되지않아 생기는 문제들이 있었다. 제네릭은 호출시점에 타입을 지정하므로 이런 문제점을 해결할 수 있다. function logText(text: T):T { console.log(text); return text; } logText('안녕') logText(123) logText(true) ◽ 제네릭 적용하기 [before] // 이렇게 선언하는 경우 type에 따라 여러개의 인터페이스를 만들어주어야 한다. // 유지보수면에서 효율성이 떨어진다. interface DropdownStr ..

◽ 이넘(enum)이란? 이넘은 특정 값들의 집합을 의미하는 자료형이다. ◽ 예제 숫자형 이넘을 살펴보자. enum Shoes { Nike, // 0 Adidas // 1 } const shoes = Shoes.Nike; console.log(shoes); // 0 문자형 이넘을 살펴보자. enum Shoes { Nike = '나이키', Adidas = '아디다스' } const shoes = Shoes.Nike; console.log(shoes); // '나이키' ◽ enum을 사용해보자 enum Answer { Yes = 'Y', No = 'N' } function askQuestion(answer: Answer) { if(answer === Answer.Yes) { console.log('정답입..

◽ 유니온 타입 여러가지의 타입을 파이브로 연결하여 지정할 수 있다. // 변수에 사용하기 const user = string | number // 함수에 사용하기 function logMessage(value: string | number) { console.log(value); } logMessage('hello') logMessage(10) 📄 예제 // 유니온 타입 function logMessage(value: string | number) { if(typeof value === 'number') { value.toLocaleString() } if(typeof value === 'string') { value.toString() } throw new TypeError('value must be..