milliwonkim의 블로그

요약 - 페이지 내용이 자주 바뀐다? => SSR 사용 - 페이지 내용이 거의 안바뀐다? => SSG 사용 Next.js에서 SSG와 SSR이 무엇인가! 1. Static Site Generation(SSG) - 빌드 타임에 페이지를 서버에서 사전에 HTML을 생성해둠 - getStaticProps, getStaticPaths를 이용함 - 생성된 정적페이지는 모든 요청에 동일하게 제공됨 - 서버 측에서 사전렌더링 => 클라이언트에서 추가적인 데이터 요청 안해도됨 - 캐싱 => 성능향상, 서버 부하 감소 가능 - 주로 변경이 적은 페이지, 공통 데이터를 사용하는 정적 컨텐츠에 적합함 2. Static Site Generation(SSG) - 각 페이지 요청이 올 때마다 HTML을 생성함 - getServe..

영상은 사진에 비해 용량이 큽니다. 예를 들어 png 사진 파일의 경우, 5MB이지만, 영상의 경우 짧아도 50MB는 합니다. 그래서 웹에서 영상을 다 업로드하지 않고, 아래의 이미지와 당장 필요한 부분을 잘라서 필요할 때 다운로드하는 형식입니다. 영상은 다음과 같이 다운로드 한 이후에 바로 재생이 되는 것이 아니라 시간이 지나고 나서 재생이 됩니다. 여기서는 Media.io라는 서비스를 이용해서 동영상 용량을 낮춰보도록 하겠습니다. https://www.media.io/ Media.io - Online Free Video Editor, Converter, Compressor Use Media.io free online tools to edit, convert, or compress video/audio..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..

import React from "react"; import { Switch, Route } from "react-router-dom"; import "./App.css"; import ListPage from "./pages/ListPage/index"; import ViewPage from "./pages/ViewPage/index"; function App() { return ( ); } export default App; 다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다. 퍼포먼스 앱이 로드 되자마자 ListPage, ViewPage에 관련된 모든 js 파일이 다 업로드 됐습니다. 0.chunk.js의 로딩 시간이 22ms 다음의 상황에서 퍼포먼스 ..

webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일) 따라서 직접 worker-plugin을 설치해서 webpack에 적용하면 다음과 같은 에러를 만납니다 Module parse failed: ParserHelpers.addParsedVariableToModule is not a function 따라서 다음과 같이 해줍니다. // 이 라이브러리는 원하는 RPC와 같은 경험을 제공한다. // worker-plugin에 wrap해서 사용 yarn add comlink // App.css body { margin: 0; overflow: hidden; font-size: 3rem; } button { font-size: 1.2re..

DOM(Document Object Model = 문서객체모델) - 자바스크립트가 p, a 태그 등을 조작할 수 있게 만든 트리구조 객체모델 - HTML/CSS DOM JavaScript 가상돔이 필요한 이유 - 매번 document 객체를 이용해서 DOM 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..

git init 후에 code .git/config // .git/config [user] email = you@example.com name = my name * 가장 처음 커밋은 되돌릴 수 없는 것으로 알고 있음 => 이럴 경우 rm -rf .git 후 다시 code .git/config를 해서 프로젝트 내부의 .git 파일에 유저 정보를 적은 후 커밋하기 rm -rf .git git init code .git/config // .git/config [user] email = you@example.com name = something

// package.json { "name": "esbuild-react", "version": "1.0.0", "main": "index.js", "author": "김기원", "license": "MIT", "scripts": { "build": "rm -rf build && node build.js", "start": "node start.js -w && open http://localhost:3000" }, "devDependencies": { "esbuild": "^0.15.8", "esbuild-plugin-inline-image": "^0.0.8" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } // build.js c..

// react-monorepo라는 폴더를 만들고 yarn init mkdir react-monorepo && yarn init // react-monorepo안에서 packages 폴더를 만든다 cd react-monorepo && mkdir packages // packages 폴더 안에서 이용할 패키지들을 구성한다 // 예시로 CRA로 web, common 패키지를 구성한다 cd packages && npx create-react-app web && npx create-react-app common packages /web: 페이지를 렌더링 할 프로젝트(이걸 deploy 해야함) /common: web에 사용할 컴포넌트 제공 // react-monorepo 맨 상위 루트로 돌아온다 cd react-..