현서의 개발 일지📚

나만의 Webpack 개발환경 만들기 plugin ( React )

우선 이전 블로그에서 React의 개발 환경을 갖춘 바 있다. 이에 기반해서 유용한 plugin에 대해 소개 하고자 한다. 우선 완성된 코드를 여러분들에게 보여주고 이에대한 설명을 진행하도록 하겠다. Source Code // components/Home.js import React, { useState } from "react"; import "../styles/Home.css"; import loadable from "@loadable/component"; import testImg from "../public/test.svg"; const LoadableComponent = loadable(() => import("./Loadable")); const Home = () =..

Next.js - Static File Serving

Next.js는 정적 파일을 제공합니다. 'public'아래에 있는 폴더를 이용하면 됩니다. 'public'폴더 아래에 있는 파일들은 '/'을 통해 접근 가능합니다. import type { ReactElement } from "react"; import type { NextPageWithLayout } from "../_app"; import styles from "../../scss-styles/HomePage.module.scss"; import Image from "next/image"; import profilePic from "../../public/happy.jpg"; const Home: NextPageWithLayout = () => { return ( My Homepage Welcome..

Next.js - Font Optimization

기본적으로 Next.js는 빌드 시 자동으로 인라인 글꼴 CSS를 사용하여 글꼴 선언을 가져오는 추가 라운드 트립을 제거합니다, ㄷ따라서 첫 번째 내용물 페인트(FCP)와 최대 내용물 페인트(LCP)가 개선됩니다. HTML 태그 태그는 해당 문서와 외부 소스(external resource)사이의 관계를 정의할 때 사용합니다. 요소는 빈 태그이며, 속성만을 포함합니다. 또한, 이 요소는 ) } } export default MyDocument

Next.js - Image Optimization

Next.js의 'next/image'는 HTML의 ''을 계승한 컴포넌트이다 ( 최신의 웹을 위해 진화된 것 ). 이는 엄청난 퍼포먼스를 지닌 이미 최적화되어 갖추어진 변수들이 많다. 이는 사용자 경험에 엄청나게 많은 평가 지표가 될 이다. Improved Performance 어떠한 기기든 정확하게 사이징 된 이미지를 보여준다. Visual Stability 누적 레이아웃 이동 자동 방지 Faster Page Loads 이미지가 오직 viewport를 들어왔을 떄만 로딩된다. Asset Flexibility 멀리 떨어진 서버에 캐싱된다. Local Images 우린 'next/image'를 import하면 우리의 local파일들을 import해 올 수 있다. 또한 Dynamic 'await impo..

Next.js - useSWR

전통적을 최상위 레벨 컴포넌트에서 useEffect를 사용해 데이터를 한 번 가져오고, 이를 props를 통해 자식 컴포넌트에 전달합니다. // 페이지 컴포넌트 function Page () { const [user, setUser] = useState(null) // 데이터 가져오기 useEffect(() => { fetch('/api/user') .then(res => res.json()) .then(data => setUser(data)) }, []) // 전역 로딩 상태 if (!user) return return } // 자식 컴포넌트 function Navbar ({ user }) { return ... } function Content ({ user }) { return Welcome bac..