몽땅뚝딱 개발자

📄 tsconfig.js { "compilerOptions": { "allowJs": true, "checkJs": true, // 모든 타입에 대해 최소한 any라도 지정해야한다는 옵션 "noImplicitAny": true } } /** checkJs는 // @ts-check 와 같은 기능을 한다. */ 다른 옵션은 여기서 확인해보자! TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project. ..

◽ 타입스크립트란? 자바스크립트에 타입을 부여한, 자바스크립트의 확장된 언어이다. 브라우저에서 실행하기 위해 파일을 한 번 변환해주어야하는데 이것을 컴파일이라고 한다. ◽ 타입스크립트를 사용하는 이유 에러의 사전방지와 자동완성을 손쉽게 하기 위함이다. // Address는 Obejct 타입으로 객체로 한번 더 지정해 줌! // 하지만 이렇게 쓰는건 재활용과 가독성 관점에서 추천하지 않는다. /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * @property {string} email * @prop..

◽ 비트(Vite)가 나오게 된 배경 브라우저에서 ESM(ES Modules)을 지원하기 전까지는 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었다. 따라서 개발자들은 웹팩, Rollup, Parcel과 같은 도구를 이용하여 번들링(Bundling)이라는 우회적인 방법을 사용해야 했다. 하지만 자바스크립트 모듈이 1000개가 넘어가는 프로젝트라면 병목현상이 발생할 수 밖에 없다. 그래서 비트는 전 과정에 ESM을 이용하여 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않도록 했다. 📄 예제 번들러 없이 이 코드는 실행되지 않는다. // app.js import { sum } from './math.js'; console.log(sum(10, 20)); 📄 예제 type="module"을 추가하면..

◽ FOUT vs FOIT FOUT(flash of unstyled text) 기본폰트 => 다운로드 된 시점에서 폰트를 적용하는 것 IE, Edge에서 사용 FOIT(flash of invisible text) 다운로드 전에는 해당 폰트가 적용된 텍스트를 보여주지 않음 Chrome, Safari에서 사용 => 우리는 폰트 최적화를 통해 이 두 현상을 해결 ◽ 폰트 최적화 방법 2가지 1. 폰트 적용 시점 컨트롤 하기: FOUT, FOIT 2. 폰트 사이즈 줄이기 ◽ 폰트 시점 컨트롤 속성 font-display 속성을 사용한다. - auto: 브라우저에서 설정한 기본 동작 - block: FOIT (timeout = 3s) - swap: FOUT - fallback: FOIT (timeout = 0.1..

◽ 이미지 포맷 종류 PNG: 무손실 압축 JPG: 압축을 좀 더 하면서 화질이 저하됨 WEBP: jpg 보다 화질과 용량면에서 월등히 좋은 포맷 ◽ 이미지 최적화하기 구글이 Webp를 밀기위해 만든 사이트 Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app ◽ webp를 지원하지 않는 브라우저의 경우 ◽ 동영상 최적화하기 포맷을 webm으로 변경하고 용량을 줄인다. 지원하지 않는 브라우저를 고려하여 아래와 같이 사용한다. 출처 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(fea..

◽ 문제상황 동영상이 메인컨텐츠이지만 이미지가 먼저 다운로드되고 여유가 있을 때 동영상이 다운로드 된다. 따라서 그 전에는 pending 된 상태로 렌더링이 되지 않은 화면이 사용자에게 보여진다. 아래와 같은 해결책이 있다. 1. 이미지를 빠르게 다운로드한다. => 하지만 궁극적인 해결방법이 아니다. 2. ⭐️ lazy loading을 사용한다. ◽ lazy loading이란? element가 화면에 보여져야 할 타이밍에 element를 그린다. 이미지가 보여지는 부분까지 스크롤이 되었느냐 되지않았느냐로 판단하기때문에 스크롤 이벤트를 사용한다. ◽ Intersection Observer(=관찰자)의 사용 첫번째 인자는 콜백함수, 두번째 인자는 옵션을 사용한다. boxElement는 Dom Element로..

◽ 코드 스플리팅 덩치가 큰 번들파일을 쪼개서 작은 단위로 만드는 것으로, 페이지 단위 또는 모듈별로 chunk 파일을 쪼개어 로딩속도를 높인다. 불필요한 코드 또는 중복되는 코드 없이 적절한 코드가 적절한 타이밍에 로드 될 수 있도록 한다. 코드 스플리팅은 어떻게 모듈을 그루핑 할 것인지, 어떤 타이밍을 만들지 정해야한다. ◽ 코드 스플리팅하기 웹팩에 코드스플리팅을 위한 설정을 해주어야 한다. [수정 전] import React from 'react' import { Switch, Route } from 'react-router-dom' import './App.css' import ListPage from './pages/ListPage/index' import ViewPage from './page..

◽ Preload이란 필요한 리소스 자원을 서버에 요청할 때 여러자원을 동시에 요청하게 되고, 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때 우선순위를 부여하여 특정 리소스를 빠르게 로딩하도록 하는 것이 바로 preload이다. ◽ Preload 타이밍 1. 버튼 위에 마우스를 올려놨을 때 2. 최초페이지 로드 후 모든 컴포넌트의 마운트가 끝났을 때 모달 코드를 미리 로드한다. function App() { const [showModal, setShowModal] = useState(false) // 화면이 렌더링 된 후 특정함수를 실행하는 hook // 미리 import하여 화면이 미리 렌더링 될 수 있도록 한다. useEffect(() => { const Component ..

◽ 컴포넌트 Lazy Loading (Code Splitting) [전] import React, { useState } from 'react' import styled from 'styled-components' import Header from './components/Header' import InfoTable from './components/InfoTable' import SurveyChart from './components/SurveyChart' import Footer from './components/Footer' import ImageModal from './components/ImageModal' function App() { const [showModal, setShowModal] ..

◽ 애니메이션이 왜 버벅일까? 주사율은 초당 60frame이다. 브라우저도 그에 맞춰서 화면을 렌더링하려고 한다. 애니메이션이 버벅이는 이유는 초당 60frame의 화면을 그리지 못하기 때문이다. (=쟁크현상) ◽ 화면이 그려지는 과정 DOM + CSSOM > Render Tree > Layout > Paint > *Composite * Composite: 각 레이어를 합성하는 과정이다. 만약 완성된 화면에서 일부 스타일이 바뀐다면 브라우저는 화면을 이 과정을 다시 거친다. 이를 Reflow라고 하는데 비용이 많이 드는 Layout, Paint 과정을 건너뛰어야 성능이 좋아진다. - width나 height를 변경하는 경우: Reflow (5단계를 모두 재실행) - color, background-col..