React/ReactJs

React - Code-spliting, Lazy Reloading

지금은 Webpack으로 구축한 React서버에 Code-spliting을 적용해 보겠습니다. 일단 코드부터 보시겠습니다. Code-spliting // src/Root.js import React, { Suspense, lazy, useState } from "react"; import "./style.scss"; import { Route, Routes } from "react-router-dom"; import Menu from "./components/Menu"; const RedPage = lazy(() => import("./pages/RedPage")); const BluePage = lazy(() => import("./pages/BluePage")); const Root = () => {..

Webpack을 통한 React개발환경 구축하기

오늘은 React에서 SSR을 구현을 목적으로 리액트에서 적용되는 webpack에 대해 학습하고 CRA에서 적용되는 webpack설정을 따라하면서 webpack에 대해서 자세하게 공부해보도록 하겠습니다. 우선 완성된 코드는 >> https://github.com/LE123123/webpack-reactconfig 에서 확인하실 수 있습니다. package.json // package.json { "name": "webpack-react", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "@babel/core": "^7.17.5", "@babel/preset-env": "^7.16.11", "@babel/pres..

useMemo, useCallback, ( React.memo )

기존의 Rendering의 문제점 1. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다. 2. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경되었을 때마다 리렌더링 된다. ( 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받은 props가 변경되지 않았더라도 리렌더링 되는게 기본이다. ) 이제 이를 이해하기 위한 간단한 예시를 보자 /src/component/test.tsx import React, { useState } from "react"; import axios from "axios"; import Bl..

Webpack 설정

자바스크립트 개발자의 딜레마 자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기 힘들 정도이고, 노드 (NodeJS)의 경우에도 버전별로 지원하는 언어 문법이 다르기 때문에 브라우저 만큼은 아니지만 비슷한 문제를 겪게 됩니다. Babel: JavaScript transpiler/Compiler 컴파일(compile)은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스파일(transpile)은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 ..