끄적끄적 보니타

Web Vitals는 구글이 정의한 웹사이트 사용자 경험(UX) 품질을 측정하는 핵심 지표웹페이지의 로딩 속도, 인터랙션 반응 속도, 시각적 안정성을 평가해서 SEO(검색엔진 최적화)와 사용자 경험을 개선하는 데 도움을 줌.✔ Core Web Vitals (핵심 지표 3가지)현재 가장 중요한 Web Vitals 지표는 LCP, FID, CLS✔ 각 Web Vitals 최적화 방법① LCP (Largest Contentful Paint) → 로딩 속도 최적화🚀 문제: 페이지에서 가장 큰 콘텐츠가 늦게 로드되면 사용자 체감 속도가 느려짐✅ 해결 방법:이미지 최적화 → WebP 사용, 크기 조정, loading="lazy" 적용Critical Rendering Path 최적화 → preload로 중요한 리소..

SSG(Static Site Generation)는 웹사이트를 빌드할 때 미리 HTML 파일을 생성하여 제공하는 방식서버에서 동적으로 HTML을 생성하는 SSR(Server-Side Rendering)과 달리, SSG는 정적인 HTML을 미리 만들어서 배포 속도가 빠르고 서버 부하가 적은 것이 특징✔ SSG의 특징✅ 미리 생성된 정적 HTML 제공 → 빠른 로딩 속도✅ CDN 캐싱 최적화 가능 → 트래픽이 많아도 안정적✅ 서버가 필요 없거나 최소한의 리소스만 사용✅ 데이터가 자주 바뀌지 않는 페이지에 적합✔ SSG vs SSR vs CSR 비교✔ SSG를 지원하는 대표적인 프레임워크Next.js (getStaticProps, getStaticPaths 활용)Gatsby (GraphQL로 데이터 페칭)Hu..

1. 코드 최적화① 불필요한 렌더링 최소화React의 경우, useMemo, useCallback, React.memo를 활용해 불필요한 리렌더링 방지Virtual DOM 업데이트 최소화② 코드 분할 (Code Splitting)Webpack의 Dynamic Import(import()), React의 React.lazy를 사용하여 필요한 부분만 로드예시 (React Lazy Loading):const LazyComponent = React.lazy(() => import('./LazyComponent'));③ Tree Shaking 적용Webpack, Rollup 등을 활용해 사용하지 않는 코드 제거ES6 모듈을 사용하면 자동으로 Tree Shaking 적용됨2. 네트워크 최적화④ 이미지 최적화WebP..

https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e https://github.com/acdlite/react-fiber-architecture https://www.geeksforgeeks.org/reactjs-virtual-dom/ https://www.pluralsight.com/guides/virtual-dom-difference-maker-react-js#module-efficientdiffalgorithm

https://javascript.plainenglish.io/differences-between-vue-2-and-vue-3-ee627e2c83a8 Differences Between Vue 2 And Vue 3 Vue 3 is latest version of Vue which is progressive Javascript framework, help developer create a approachable, versatile, performant… javascript.plainenglish.io https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info https://web.dev/howbrowserswork/ How browsers work..

에러메시지 node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXcursor.so.1: cannot open shared object file: No such file or directory 해결 방법 1. su - root 2. apt-get install -y wget unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2...

https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org

HTTP 프로토콜의 요청과 응답은 헤더(header, 부가 정보)와 바디(body, 실제 데이터)로 구성 HTTP의 헤더와 바디는 개행문자인 '\r\n'으로 구분 헤더와 바디 사이에 한 개의 빈 줄(line)이 존재 HTTP 헤더는 요청과 응답에 공통으로 사용되는 공통 헤더 / 요청 헤더 / 응답 헤더로 구분 HTTP 공통 헤더 주요 항목 Data - HTTP 메시지를 생성한 일시- RFC 1123을 따름 ex) Date : Tue, 19 Nov 2019 04:13:24 GMT Connection - Keep-Alive를 설정 ex) Connection : keep-alive Cache-Control - Cache 속성을 설정 no-store : 캐시를 저장하지 않음 no-cache : 서버에 확인 후 ..

https://developer.mozilla.org/ko/docs/Web/API/Selection selection - Web API | MDN A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection(). developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/API/Range range - Web API | MDN Range 객체는 주어진 document ..

HTTP 헤더 - 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 역할 - 대소문자를 구분하지 않는 키:줄바꿈이 없는 값 으로 이루어짐 (공백은 무시) - IANA 레지스트리에 신규 헤더 포함 모든 헤더가 나열되어 있음 (원본은 RFC 4229) ※ 커스텀 헤더는 'X-'를 앞에 붙여 추가 될 수 있었지만, RFC 6648에서 비표준 필드가 표준이 되었을 때 불편함을 유발해 2012년 6월 폐기 Context에 따른 Header 그룹화 General header - 요청과 응답 모두 적용 - body에 전송되는 데이터와 관련이 없는 헤더 Request header - patch될 리소스나 client에 대한 자세한 정보를 포함하는 헤더 Response header - 위치..