Don’t worry about failures

해당 글은 다른 아티클을 보면서, 편향된 개인적인 생각일 수 있다. 이전 사이드프로젝트를 리팩토링하는 새로운 나만의 프로젝트를 하면서 고민되는 사항이 생겼다. 내가 평소 즐겨쓰던 Styled-component를 현재의 프런트엔드 개발 흐름과 잘어울리까? 에대한 고민이다. 일단, 내가 왜 Styled-component를 즐겨썼을까? 개발자 경험이 가장 크다고 생각했다. 위의 코드를 봤을 때 개인적으로는 div로 표현하기보다는 Container으로 표현하는게 내 눈에는 더 파악하가기가 쉽다고 생각했다. 이 외에도 다른 장점들을 살펴보면, 1. 지역 스코프 스타일드 컴포넌트의 동작 방식을 보면, styled.div에 대한 고유 ID와 style을 적용한 css를 기반으로 해시를 생성하고 생성된 값은 clas..

리액트 팀은 사용자의 경험을 증진시키기 위해 많은 연구를 한다. 이전 글에서 살펴보았던 동시성 모드, 서버 컴포넌트 등을 볼 수 있다. 해당 글에서는 리액트 서버 컴포넌트에 대해 알아볼 예정이다.  리액트 서버 컴포넌트를 살펴보기에 앞서 간단하게 렌더링에 대한 간단한 히스토리를 살펴보자.흐름에 따라 가다보면 리액트 서버 컴포넌트가 나오게 된 배경을 알게되고 이해하는 데에 도움이 되어 먼저 살펴보려한 것이다. 1세대 웹1세대 웹에서는 정말 정적인 웹페이지만 구현이 되었었다. 자바스크립트 없이 서버에서 HTML을 응답하여 브라우저는 그대로 뿌려주기만 한 시대였다. 이 때문에 사용자간의 상호작용이 별도로 존재하지 않았다.  진정한 서버사이드 렌더링이다.  2세대 웹자바스크립트가 등장하면서 웹은 더욱 발전했다...

MSW(Mock Service Working)은 API Mocking 작업을 하기 위한 라이브러리 중 하나이다. 서비스 워커를 통해 호출을 가로채 대신 응답을 하는 방식으로 API Mocking을 도와준다. MSW에서 중요한 개념인 서비스 워커부터 간략하게 알아보자. Service Worker 서비스 워커는 이벤트 기반 워커로써 웹 애플리케이션의 메인 쓰레드와 분리된 별도의 백그라운드 스레드에서 실행 시킬 수 있는 기술 중 하나이다. 서비스 워커 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있게 됐다. 이를 기반으로 하여 다양한 사용이 있다. mock API, push 알림, 백그라운드 동기화 등으로 활용할 수 있다. 아래의 이미지는 서비스 워커가 네트워크와 브라우저 사이에 존재하여 ap..

전역 상태관리를 위해 많은 도구들이 사용된다. recoil, redux, mobx, context 등.. 전역 상태관리에 대해 간단히 알아보고 도구들에 대해 알아보자. 리액트의 경우 컴포넌트를 대부분 작은 단위로 나누어 구조를 구성한다. 부모의 자식, 자식의 자식... 과 같은 구조를 가지게 되고, 상태값은 단방향으로 부모에서 자식에게만 값을 전달이 가능하다. 여기서 자식은 상태를 받기 위해 props를 통해 전달받게 된다. 간단한 구조에 있어 props를 통해 전달받는 것은 문제가 되지 않을 것이다. 반면, 복잡하고 자식의 깊이가 깊다라고하면 props를 자식의 자식의 자식의 자식까지 계속 전달해줘야한다. 이러한 것을 props drilling라고 한다. props를 통해 받는 상태의 단점은 뭘까? 가..

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