전체 글

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..

Next.js - Data Fetching ( getStaticProps, getStaticPaths )

getStaticProps 만약 우리가 'getStaticProps'라는 함수를 export했다면 Next.js는해당 페이지를 build-time에 pre-render할 것이다. getServerSideProps는 request시에라는 점에서 차이가 있다. 그래서 Next.js에서 SSG인 getStaticProps를 추천하는 이유도 여기에 있는 것 같다. - use의 request전에 build-time에 pre-rendering되어있으면 좋겠는 곳 - 데이터가 공공적으로 캐싱될 수 있는 곳 - SEO최적화가 필요하고 매우 빠르게 접속될 수 있는 곳, 그리고 CND에 의해 빠르게 캐싱될 수 있는 CDN의 작동 원리 1. 웹 브라우저가 ..

Next.js - Data Fetching ( getServerSideProps )

getServerSideProps getServerSideProps는 오직 server-side에서만 동작하며 browser에서는 동작하지 않습니다. 만약 페이지가 getServerSideProps를 사용하게 된다면 - 페이지에 직접 들어갔을 때, 페이지는 return된 props에 의해 pre-rendering된다. - 만약 'next/link'나 'next/router'와 같은 client-side page를 통해 들어가게 되었다면 Next server에 API요청을 보내서 실행한다 ( pre-rendering 진행) 여기서 중요한 것은 getServerSideProps는 'JSON'데이터를 반환하는데 이는 pre-rendering하는..

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..

Next.js - Getting Started - 2

Static Generation without data 기본적으로 Next.js의 아무런 fetching이 필요없는 페이지는 Static Generation을 사용하는 pre-render기법을 사용합니다. 예시를 들면 function About() { return About } export default About; 이러한 경우에는 Next.js는 하나의 HTML파일을 빌드타임떄 생성합니다. Static Generation with data 어떠한 페이지는 당연히 pre-rendering되기 위해 외부의 fetching되는 데이터가 필요합니다. 이 경우에는 두가지 시나리오가 존재합니다. 이 중 하나 또는 둘다 적용될 수 있습니다. 그렇다면 다시 CNA프로젝트로 돌아가서 S..