Don’t worry about failures

정의 React 애플리케이션에서 SSR을 통해 HTML을 가져와서 React컴포넌트로 변환하고, 클라이언트 측에서 상호작용이 가능한 앱으로 만드는 과정을 말한다. 조금 더 풀어서 생각해보면, SSR은 서버에서 HTML을 생성해서 client에게 전달한다. 이 HTML은 JS가 없는 건조(dry)한 상태이다. 이러한 건조한 상태에서 Hydrate(수화)의 단어 의미 대로 JS를 통해 각 이벤트들을 연결해줌으로써 촉촉한 상태를 만들어 준다는 의미이다. 그럼 만약에 React 애플리케이션에서 SSR을 통해 렌더링을 진행하고자 했지만 Hydrate를 하지 않으면 어떻게 될까? 서버에서 만든 HTML을 무시하고 리액트가 새롭게 만든다. 즉, 서버측에서 생성된 HTML이 아닌 Javascript를 통해 UI를 생성..

React Strict Mode는 애플리케이션 내에서 개발 시 발견된 잠재적인 문제를 감지하고 경고를 출력하는 도구이다. *StrictMode는 development 환경에서만 동작한다. StrictMode가 제공해주는 기능에 대해 확인해보자. 1. 버그를 잡기위해 렌더링을 두번한다. 리액트의 컴포넌트는 순수함수이어야한다. 순수함수가 아닐 경우에는 예측 불가한 상황이나 오류가 생겨날 우려가 있기 때문에 순수함수를 지켜줘야한다. 이를 위해 StrictMode에서는 두번의 렌더링을 통해서 동일한 값이 나오는지 비교하고 그렇지 않으면 경고를 해준다. 이에 대한 예제를 봐보자. 해당 예제는 공식문서에서 가져온 것이다. //App.js import { useState } from 'react'; import St..

이전글에서 리액트의 동시성에 대해 살펴봤었다. https://sangwonny.tistory.com/78 concurrent mode에 대해 리액트 18버전부터 등장한 개념으로 리액트에서 concurrent(동시성)에 대해 몇년동안 연구하고 분석한 결과 나오게 되었다. Concurrent React 자바스크립트의 특성상 싱글쓰레드로 하나의 작업씩 처리 sangwonny.tistory.com 이번 글에서는 동시성 처리를 위한 훅에 대해 살펴보겠다. 우선 최신 리액트 프로젝트를 생성하면 다음과 같을 것이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'..

리액트 18버전부터 등장한 개념으로 리액트에서 concurrent(동시성)에 대해 몇년동안 연구하고 분석한 결과 나오게 되었다. Concurrent React 자바스크립트의 특성상 싱글쓰레드로 하나의 작업씩 처리가 된다. 렌더링 작업이 일어나고 있을 때 다른 작업을 진행못하고 blocking되는 현상이 존재한다. 하지만 우리는 평소에 과한 렌더링 작업이 없기에 느끼지 못할 수 있다. 간단한 테스트를 해보자. input을 통해 들어온 값에 따라 1000개의 element가 새롭게 들어온다고 해보자 간단하게 아래와 같이 작성후 const [array, setArray] = useState([]); const inputHandler = useCallback((e) => { const inputValue = e..

이 네가지의 개념을 이해하기 위해서는 '권한', '응답' 이 두 키워드가 가장 도움이 되었다. 권한을 가지고 있냐 없냐, 응답에 관심이 있냐 없냐에 따라 Block, None-Block, Sync, Async가 분류가 된다. 자세히 살펴보자. 1. Bloacking 자신의 작업을 진행하다가 다른 주체의 작업이 시작되면 다른 작업이 끝날 때까지 기다렸다가 자신의 작업을 시작. '권한'이라는 단어로 이를 이해해보자. 실험실에 중요한 실험이 있다고 생각해보자. 이 실험실을 들어가기 위해서는 권한 키를 가지고 있어야 찍고 입장을 할 수가 있다. 실험실에 들어가 실험을 하다 외부 실험자에게 요청할게 있어 밖으로나가 외부 실험자에게 부탁과 함께 권한 키를 제공했다. 이 권한 키를 통해 외부 실험자가 들어가서 실험을..

단일 프로세스 초창기 컴퓨터는 단일 프로세스 시스템. 한번에 하나의 프로그램만 돌릴 수 있다. 다른 프로그램을 사용하기 위해서는 종료. 이 시스템이 I/O 같은 작업이 생기면 cpu는 잠시 멈추고 놀아버린다. 멀티 프로그래밍 이를 해결하고자 여러개의 프로그램을 메모리에 올려놓고 하나의 CPU에서 번갈아 가며 동시에 실행시키는 방안을 첨가. 즉, 단일 프로세스에서 문제였던 I/O같은 작업이 일어날 때 놀고 있지않고 메모리에 올려놓은 다른 프로그램을 실행시킴으로써 사용률을 높이고자함. 이는 CPU 사용률을 극대화 목적. I/O 작업이 일어날 떄 CPU의 놀고 있는 상황을 해결. 하지만 하나의 프로그램이 CPU 사용 시간이 길어지만 다른 프로세스는 계속 대기. 멀티 태스킹 멀티 프로그래밍에서 나왔던 문제인 하..

보통 쓰레드와 프로세스와 비교를 하며 개념을 찾고, 습득을한다. 이렇기 때문에 더 헷갈리고, 광범위한 글을 보게 된다. 이를 위해 쓰레드 조금 더 초점에 맞춰서 글을 작성하고자한다. 쓰레드 쓰레드 개념 : 프로세스 내에서 실행되는 실행 흐름. 프로세스의 자원(메모리, 파일)을 공유. 이러한 쓰레드는 하나의 종류만 있지않다. 하드웨어 쓰레드, OS 쓰레드, 유저 쓰레드, 그린 쓰레드 등의 다양한 종류의 쓰레드가 존재한다. 조금 더 자세하게 봐보자. 우선 프로그램은 크게 세개의 개층으로 구분이 된다. User program은 OS kernel을 통해 메모리, CPU, Devices 등의 하드웨어를 사용한다. 하드웨어 쓰레드 하드웨어 측면에서의 쓰레드이다. 코어는 연산작업을 하며, 메모리에서 데이터를 가져오면..

웹펙의 옵션들을 통해 번들 사이즈를 최적화를 하고자한다. 1. Webpack mode 1-1 none 모드를 설정하지 않은 경우에는 웹팩의 기본 동작에 따라 동작. 개발 모드나 프로덕션 모드와는 달리 추가적인 최적화나 디버깅 정보를 포함하지 않는다. 1-2. Development 개발에 초점이 맞춰져 있다. 코드 최적화 작업이 이루어지지 않음. 디버깅에 도움되는 추가 정보를 번들에 포함. 소스맵을 생성하여 원본 코드와 번들된 코드 간의 매핑을 제공하여 디버깅에 용이함. 빠른 빌드 시간을 위해 코드 최적화를 최소화하고, 개발자 경험을 향상시키기 위해 빌드된 번들에 추가 정보 포함. 1-3 Production 코드를 최적화하고 번들 파일 크기를 최소화하여 빠른 성능을 제공한다. 불필요한 주석이나 공백 등의 ..