몽땅뚝딱 개발자

◽ 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..

◽ 예제 인터페이스는 '상호간의 약속'으로 특정 형식으로 지정해준다. interface User { age: number; name: string; } 변수에 인터페이스를 활용해보자. const thor: User = { age: 50000, name: '토르' } 함수에 인터페이스를 활용해보자. // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } API의 스펙을 지정하는 것에 가장 많이 사용한다. // 함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction { (a: number, b: number): number; } let sum: SumFunction; sum = function (a: number, b:..

각 변수에 *타이핑(Typing) 한다. * 타이핑(Typing): 타입이 정의되지 않은 코드에 타입을 입혀주는 행위 📄 문자열 // JS const str = 'hello'; // TS const str:string = 'hello' 📄 숫자 // JS const num = 1 // TS const num:number = 1 📄 배열 // JS const arr = [1, 2, 3]; // TS const arr: Array = [1, 2, 3]; const arr:number[] = [1, 2, 3]; 📄 튜플: 길이와 타입이 고정된 배열 // TS // 모든 index의 타입이 지정되어있는 배열 let address: [string, number] = ['강남', 1]; 📄 객체 // TS let ..

◽ 테스트 사이트 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org ◽ 코드 변환해보기 class Student { name: string; constructor(name: string) { this.name = name; } } 📄 ES5로 변환 "use strict"; var Student = /** @class */ (function () { function Student(name) { this.name = name; }..