mobi-community · keeprok · Mar 25, 2024 · Mar 26, 2024 · Mar 27, 2024 · Mar 27, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/React-profiler/1/README.md b/React-profiler/1/README.md
@@ -0,0 +1,37 @@
+핵심 웹 지표의 정의란 핵심 웹 지표 자체로는 웹 사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표 라고 하는 용어라고 합니다
+그중 저희는 5가지 지표로 나눠서 정의를 나누곤 하고 각자의 개선방향이있습니다
+
+핵심적인 웹 지표로는
+1.LCP : 최대 콘텐츠풀 페인트
+2.FID : 최초 입력 지연
+3.CLS : 누적 레이아웃 이동
+
+특정 문제를 진단하는데 사용될 수 있는 지표
+1.TTFB : 최초 바이트까지의 시간
+2.FCP : 최초 컨텐츠풀 시간
+
+정의
+
+1. 페이지가 처음으로 로드를 시작한시점으로 부터 가장 큰 콘텐츠가 화면에 표시되는데 걸리는시간=>
+   페이지 로딩 선응을 평가하는데 중요합니다 ,일반적으로 LCP 는 2.5초이내 가 바람직
+2. 사용자가 페이지와 처음 상호 작용할때부터 해당상호작용의 응답이 실제로 작동할때까지 걸리는 시간 => 주로 js실행이 길어질때 영향을 받는다 , 일반적으로FID100밀리초 이내
+3. 페이지 로드중 요소가 얼마나 자주 얼마나 심하게 이동하는 지 측정 =>일반적으로 CLS는 0.1이하가 바람직하다고 간주된다고 한다텍스트
+4. 브라우저가 페이지를 요청한 시점과 서버로부터 첫번째 바이트를 수신하기 까지의 시간 =>일반적으로 TTFB는 200밀리초 이내가 바람직하다고 간주된다고 한다
+5. 브라우가가 DOM에서 첫 번째 콘텐츠 비트를 랜더링하여 페이지에서 첫 번째 콘텐츠가 화면에 표시되기까지의 시간
+   =>일반적으로 FCP는 1.8초 이내가 바람직하다고 간주된다고 한다
+
+개선방안
+
+LCP :
+랜더 차단 리소스 제거: 사용하지 않는 CSS 제거, 간결한 스타일 작성, 라이브러리 의존도 줄이기로 랜더링을 가속화합니다.
+이미지 최적화: 태그 사용, 이미지 지연 로딩, 스프라이트 이미지 사용 등을 통해 이미지 로딩 시간을 단축합니다.
+FID :
+긴 작업 분리: 실행 시간이 긴 작업을 분리하여 메인 스레드의 부하를 줄여 반응성을 향상시킵니다.
+자바스크립트 코드 최적화: 불필요한 자바스크립트 제거, 비동기 로딩, 코드 분할을 통해 자바스크립트 실행 시간을 최적화합니다.
+타사 자바스크립트 코드 실행의 지연 : 코드 분할 , 비동기 로딩 , 웹 워커 사용 등이있습니다
+CLS : 1.삽입이 예상되는 요소를 위한 추가적인 공간확보 :콘텐츠 삽입이 예상되는 위치에 미리 공간을 확보하여 레이아웃 이동을 최소화합니다. 2. 폰트 로딩 최적화 : 웹 폰트의 FOIT/FOUT 문제를 방지하기 위해 폰트 디스플레이 옵션을 최적화합니다. 3. 적절한 이미지 크기 설정 ( 크기 할당 , 동적 콘텐츠 주의 )
+
+TTFB: 1.서버 성능 최적화 :서버 응답 시간을 개선하기 위해 서버 리소스를 최적화합니다. 2. 캐싱전략 : 자주 요청되는 데이터에 대한 캐싱을 통해 빠르게 응답할 수 있도록 합니다. 3. 네트워크 최적화 : CDN 사용, TCP및TLS최적화 등이 있습니다
+
+FCP : 1.리소스 우선순위 조정 : 중요 리소스에 preload를 사용하여 브라우저가 우선적으로 로딩하도록 설정합니다. 2. 최적의 리소스 전송 : HTTP/2를 활용하여 리소스를 효율적으로 병렬로 전송합니다.
+링크: https://velog.io/@keeprok/%ED%95%B5%EC%8B%AC-%EC%9B%B9-%EC%A7%80%ED%91%9C-%EC%A0%95%EC%9D%98-%EC%A0%95%EB%A6%AC-%EC%88%98%EC%A0%95%EC%98%88%EC%A0%95
diff --git a/React-profiler/radimage/domy b/React-profiler/radimage/domy
@@ -0,0 +1 @@
+공동 repo로 해결할예정
diff --git a/Suspense,Errorboundary/.DS_Store b/Suspense,Errorboundary/.DS_Store
diff --git a/Suspense,Errorboundary/4MobiSuspense/README.md b/Suspense,Errorboundary/4MobiSuspense/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/Suspense,Errorboundary/4MobiSuspense/index.html b/Suspense,Errorboundary/4MobiSuspense/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Suspense,Errorboundary/4MobiSuspense/package.json b/Suspense,Errorboundary/4MobiSuspense/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@mobi/susepense",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/Suspense,Errorboundary/4MobiSuspense/public/vite.svg b/Suspense,Errorboundary/4MobiSuspense/public/vite.svg
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/App.css b/Suspense,Errorboundary/4MobiSuspense/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/App.jsx b/Suspense,Errorboundary/4MobiSuspense/src/App.jsx
@@ -0,0 +1,13 @@
+import { Suspense } from 'react';
+import './App.css';
+import RootLazyLoading from './component/RootLazyLoading';
+
+function App() {
+  return (
+    <Suspense fallback={<h1>Loading...</h1>}>
+      <RootLazyLoading />
+    </Suspense>
+  );
+}
+
+export default App;
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/assets/react.svg b/Suspense,Errorboundary/4MobiSuspense/src/assets/react.svg
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/component/RootLazyLoading.jsx b/Suspense,Errorboundary/4MobiSuspense/src/component/RootLazyLoading.jsx
@@ -0,0 +1,20 @@
+import { Suspense } from 'react';
+import { createDelayedPromise } from '../utils/delay-helper';
+import { promiseWrapper } from '../utils/promise-wrapper';
+import SpittingLazyLoading from './SplittingLazyLoading';
+
+const fetchingData = promiseWrapper(createDelayedPromise('hello', 3000));
+
+const RootLazyLoading = () => {
+  const data = fetchingData.read();
+
+  return (
+    <div>
+      {data}
+      <Suspense fallback={<div>Loading</div>}>
+        <SpittingLazyLoading />
+      </Suspense>
+    </div>
+  );
+};
+export default RootLazyLoading;
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/component/SplittingLazyLoading.jsx b/Suspense,Errorboundary/4MobiSuspense/src/component/SplittingLazyLoading.jsx
@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+import { createDelayedPromise } from '../utils/delay-helper';
+import { promiseWrapper } from '../utils/promise-wrapper';
+
+const fetchingData = promiseWrapper(createDelayedPromise('my name is mobi', 5000));
+
+const SpittingLazyLoading = () => {
+  const data = fetchingData.read();
+
+  return <div>{data}</div>;
+};
+export default SpittingLazyLoading;
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/index.css b/Suspense,Errorboundary/4MobiSuspense/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/main.jsx b/Suspense,Errorboundary/4MobiSuspense/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/utils/delay-helper.js b/Suspense,Errorboundary/4MobiSuspense/src/utils/delay-helper.js
@@ -0,0 +1,2 @@
+export const createDelayedPromise = (value, delay) =>
+  new Promise((resolve) => setTimeout(() => resolve(value), delay));
diff --git a/Suspense,Errorboundary/4MobiSuspense/src/utils/promise-wrapper.js b/Suspense,Errorboundary/4MobiSuspense/src/utils/promise-wrapper.js
@@ -0,0 +1,30 @@
+export const promiseWrapper = (promise) => {
+  let status = "pending";
+  let result;
+
+  const s = promise.then(
+    (value) => {
+      status = "success";
+      result = value;
+    },
+    (error) => {
+      status = "error";
+      result = error;
+    }
+  );
+
+  return {
+    read() {
+      switch (status) {
+        case "pending":
+          throw s; //Suspense rendering
+        case "success":
+          return result;
+        case "error":
+          throw result;
+        default:
+          throw new Error("Unknown status");
+      }
+    },
+  };
+};
diff --git a/Suspense,Errorboundary/4MobiSuspense/vite.config.js b/Suspense,Errorboundary/4MobiSuspense/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})