본문 바로가기

FrontEnd92

[Next.js] NextJS SSG로 빌드하기 SSG(Static-Site-Generation)이란? Next는 브라우저에서 렌더링 할 때 기본적으로 pre-rendering(사전 렌더링)을 한다고 소개한다.(Next default 설정) pre-rendering이란 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 즉 Pure React에서 CSR 방식은 번들링된 js가 클라이언트 단에서 모든 추가 렌더링을 담당했다면 Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해준다. Next에서 pre-rendering을 하기 위해 두 가지 형식을 제안하고 있는데, 이는 다음과 같다. 1. Static-G.. 2022. 4. 15.
[React.js] Yarn berry 적용하며 발생한 에러 정리 Failed to load config "react-app" to extend from. .yarnrc.yml에 nodeLinker: node-modules를 제외하여 Plug'n'Play 기능을 활성화하려고 할 때 생기는 오류로 아래와 같이 Create React App에서 사용하는 ESLint 구성 패키지를 추가함으로써 해결했다. yarn add eslint-config-react-app -D 이 방법 이외에도 package.json의 extends에서 react-app를 삭제하는 방법도 사용하는 것 같다. "extends": [ "react-app" ] }, Plugin "react" was conflicted between "package.json » eslint-config-react-app 해.. 2022. 4. 13.
[React.js] Uncaught ReferenceError: process is not defined 오류 설명 이 오류는 react-error-overlay(react-scripts의 dependency이기 때문에 많은 사람들에게 생소함)의 결과로, 이 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었다. 해결 방법 첫 번째 방법, update react-scripts v5 npm install react-scripts@latest # or yarn upgrade --latest react-scripts 하지만 webpack 버전 5이상은 폴리필을 수동으로 구성해야하기 때문에 아래와 같은 에러가 발생할 수 있다. [Webpack] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.. 2022. 4. 12.
[React.js] React Hook의 등장 배경 React Hook이란? React 16.8v부터 추가된 기능으로, 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state 관리 및 라이프사이클등을 함수형 컴포넌트에서도 사용할 수 있다. 기존 클래스 컴포넌트에 대한 불만 사항 extends와 super(props)를 매번 작성해야 하는가? 클래스형 리액트 컴포넌트 사용을 위해서는 extends 키워드를 사용해 React.Component를 상속 받아야한다. 또한 state를 사용하기 위해서는 constructor 내부 최상단에 super(props)를 해야한다. (자바스크립트 상속 클래스의 규칙) 이렇게 반복되는 코드 작성을 줄일 수는 없을까? 다른 언어와는 다른 자바스크립트의 this class Foo extends Component { cons.. 2022. 4. 5.
HTTP/1.1과 HTTP/2 HTTP/1.1 HTTP/1.1의 동작방식 - 기본적으로 Connection당 하나의 요청을 처리하도록 설계 - 동시전송이 불가능하고 요청과 응답이 순차적으로 진행 - HTTP 문서 안에 포함된 다수의 리소스(Images, CSS, Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간) 증가 HTTP1.1의 단점 HOL(Head Of Line) Blocking : 특정 응답의 지연 HTTP/1.1의 connection당 하나의 요청처리를 개선할 수 있는 기법 중 pipelining이 존재한다. 이것은 하나의 connection을 통해 다수 개의 파일을 요청/응답 받을 수 있는 기법을 말하는데 이 기법을 통해서 어느 정도의 성능 향상이 가능하나 큰 문제점이 하나 있다. 하나의 .. 2022. 4. 4.
MSA 핵심 디자인 패턴-saga, event sourcing, CQRS, BFF, Api Gateway Two Phase Commit 분산 DB 환경에서 쓰는 방법으로 주로 RDBMS에서 기능을 제공한다. Two-Phase Commit은 말 그대로 2 단계에 거쳐서 데이터를 영속화 하는 작업이다. 위 그림과 같이 여러 DB가 분산되었을 때, 트랜잭션을 조율하는 조정자(Cooredinator)가 존재한다. 조정자의 역할은 트랜잭션 요청이 들어왔을 때 두 단계를 거쳐 트랜잭션 진행을 담당하는 것이다. 첫 번째 단계는 Prepare이며, 이는 쉽게 말해 연관된 DB에게 데이터를 저장할 수 있는 상태인지 묻는 과정이다. 메시지를 받은 DB에서는 Commit 작업을 위한 준비를 진행한다. 이후 데이터를 영속할 수 있는 준비가 완료되면 조정자에게 준비가 완료되었음을 알리고, 반대로 Commit 할 수 없다면 불가하다.. 2022. 4. 3.
반응형

티스토리툴바