react
-
Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..
[Automatic Batching] 리액트 18에 등장한 렌더링 묶음판매Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..
2023.10.06 -
전부터 궁금한 것이 있었다 비동기 처리는 API에서만 할 수 있는 것일까? 사용자가 상호작용하는 모든 것에 API가 들어있지는 않을 텐데, 그렇다면 어떡하지? 이런 질문들이 나를 감싸고 있을 때, 갑자기 스쳐지나가는 질문 하나가 있었다 Web Worker, 이거 Promise랑 다른건가? 생각해보니 궁금해졌다. 둘 다 비동기, 병렬의 키워드를 가지고 있는 개념이 아닌가 그래서 이참에 Web Worker에 대해 알아보기로 했다 Web Worker란 무엇일까? 싱글스레드인 자바스크립트에서 많은 양의 데이터를 받아와 가공해야하는 경우 시간이 오래걸리게 되면서 병목이 발생, 따라서 다른 스레드에서 병렬적으로 처리해주는 역할을 하는 것이 web-worker다 웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것..
UI 버벅임은 이제 그만! Web Worker 를 적절히 이용하여 UX 증진시키기전부터 궁금한 것이 있었다 비동기 처리는 API에서만 할 수 있는 것일까? 사용자가 상호작용하는 모든 것에 API가 들어있지는 않을 텐데, 그렇다면 어떡하지? 이런 질문들이 나를 감싸고 있을 때, 갑자기 스쳐지나가는 질문 하나가 있었다 Web Worker, 이거 Promise랑 다른건가? 생각해보니 궁금해졌다. 둘 다 비동기, 병렬의 키워드를 가지고 있는 개념이 아닌가 그래서 이참에 Web Worker에 대해 알아보기로 했다 Web Worker란 무엇일까? 싱글스레드인 자바스크립트에서 많은 양의 데이터를 받아와 가공해야하는 경우 시간이 오래걸리게 되면서 병목이 발생, 따라서 다른 스레드에서 병렬적으로 처리해주는 역할을 하는 것이 web-worker다 웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것..
2023.10.06 -
React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..
클라이언트까지 꼭 데이터가 와야할까? RCS(React Server Components)에 대해 알아보자React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..
2023.09.28 -
TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
[TailwindCSS] 디자인 적용이 잘 안된 것 같다면??TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
2023.07.14 -
최근 useEffect 대응방안에서 useMemo를 사용해서 개선하는 방향과 관련된 글을 쓰다가 생각난 건데, 어떤 글에서 useMemo를 쓰지 말라는 주제로 글이 있던 것이 생각났습니다. 그래서 이참에 이것도 알아보기로 하였죠. 왜 useMemo를 쓰면 안 되는 건지, 그전에 useMemo는 무엇인지부터 알아보고 가도록 하겠습니다. 이전 글 보고오기 [React] 왜 React에서는 useEffect의 사용을 추천하지 않을까? - Side Effect 관리 React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리 입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서 time-map-installer..
[React] useMemo 쓰지 마세요?최근 useEffect 대응방안에서 useMemo를 사용해서 개선하는 방향과 관련된 글을 쓰다가 생각난 건데, 어떤 글에서 useMemo를 쓰지 말라는 주제로 글이 있던 것이 생각났습니다. 그래서 이참에 이것도 알아보기로 하였죠. 왜 useMemo를 쓰면 안 되는 건지, 그전에 useMemo는 무엇인지부터 알아보고 가도록 하겠습니다. 이전 글 보고오기 [React] 왜 React에서는 useEffect의 사용을 추천하지 않을까? - Side Effect 관리 React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리 입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서 time-map-installer..
2023.05.25 -
React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
[React] useEffect 쓰지 마세요?React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
2023.05.25 -
프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
[Recoil vs Redux] Frontend Engineer를 위한 React 상태관리 도구 알아보기프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
2023.05.23 -
2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 1편에서는 무슨 일이 있었을까? 일찍 학교에 와서 아침을 먹으며 여러 생각을 했다. 맛있는 샐러드와 주먹밥을 먹으며 "동적 컴포넌트를 만들면 잠이 깰까?"라는 의문이 떠올랐다. 그래서 동적 컴포넌트와 정적 컴포넌트의 차이에 대해 생각해 보았고, 리액트에서도 동적인 사이트와 정적인 사이트가 있다는 것을 알게 되었다. 내가 이것에 대해 깊이 생각하게 된..
[문득 떠오른 건데] 밥먹고 졸릴때 리팩토링 요소를 탐색하면 잠이 깰까? - 2편2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 1편에서는 무슨 일이 있었을까? 일찍 학교에 와서 아침을 먹으며 여러 생각을 했다. 맛있는 샐러드와 주먹밥을 먹으며 "동적 컴포넌트를 만들면 잠이 깰까?"라는 의문이 떠올랐다. 그래서 동적 컴포넌트와 정적 컴포넌트의 차이에 대해 생각해 보았고, 리액트에서도 동적인 사이트와 정적인 사이트가 있다는 것을 알게 되었다. 내가 이것에 대해 깊이 생각하게 된..
2023.05.02 -
프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
[Folder Structure] Hooks? Utils? 차이점이 뭘까?프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
2023.04.27 -
2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 학교에 일찍 와서 아침을 먹으며 여러 생각을 하던 날이었다. 아침으로 맛있는 샐러드와 주먹밥을 먹으며 갑자기 떠오른 의문, "동적 컴포넌트를 만들면 잠이 깰까?" 사람들 중에 밥을 먹고 식곤증이 와서 많이 졸려하는 사람들이 있다 나도 그 사람들 중 한 사람이지만 동적인 활동을 하면 잠이 깨는 편이었다 "어? 그러고 보니 리액트에도 동적인 사이트와 정..
[문득 떠오른 건데] 밥먹고 졸릴때 동적 컴포넌트를 만들면 잠이 깰까? - 1편2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 학교에 일찍 와서 아침을 먹으며 여러 생각을 하던 날이었다. 아침으로 맛있는 샐러드와 주먹밥을 먹으며 갑자기 떠오른 의문, "동적 컴포넌트를 만들면 잠이 깰까?" 사람들 중에 밥을 먹고 식곤증이 와서 많이 졸려하는 사람들이 있다 나도 그 사람들 중 한 사람이지만 동적인 활동을 하면 잠이 깨는 편이었다 "어? 그러고 보니 리액트에도 동적인 사이트와 정..
2023.04.22 -
React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
[React] 차트 라이브러리 비교 분석React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
2023.04.16 -
React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
[React] 9개의 대표적인 애니메이션 라이브러리 비교해보기React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
2023.04.16