min

오늘은 react concurrent mode 에 대해서 알아볼려고 한다. 1. react concurrent mode의 등장 배경 : react concurrent mode는 사실상 리엑트 아니 자바스크립트의 고유적인 성질로 인해서 나오게 되었다. 자바스크립트의 경우에는 싱글 스래드 기반으로 로직이 흘러간다. 이 말은 하나의 작업을 하고 있을 때 다른 작업을 중단 시킨다는 의미이다. 그리고 리엑트 역시 싱글 스래드 기반으로 로직이 흘러간다. 만약 이런 코드가 있다면 어떻게 작동할까? import { useState } from "react"; const TECOBLE = ["프", "론", "트", "엔", "드", "화", "이", "팅"]; function App() { const [input, s..

오늘은 Throttle, Debounce에 대해서 알아볼려고 한다. 1. Throttle, Debounce 의 탄생 배경 : Throttle, Debounce의 경우에는 DOM의 이벤트 조작을 최적화 시키기 위해서 탄생한 기술이다. 이 말을 이해하기 위해서 다음과 같이 예가 있다고 가정하자. 만약에 내가 스크롤을 할때마다 콘솔을 찍는 로직을 만들었다고 가정하자. 이 코드를 실행시킨다면 스크롤을 밑으로 내릴 때마다 콘솔이 찍힐 것이다. 만약 스크롤의 길이가 5000픽셀이라면 해당 스크롤에 대한 콘솔은 100개 이상이 찍힐 것이다. 이는 굉장한 리소스 자원 낭비이다. 그래서 우리는 이를 해결하기 위해서 Throttle, Debounce가 탄생하게 되었다. 2. Debounce에 대하여.. : 디바운스의 경우..

오늘은 virtual dom에 대해서 알아볼려고 한다. 정확히 말하자면 "버츄얼 돔과 리얼 돔의 차이를 설명해주세요"라는 질문에 답을 하려고 한다. 1. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요 버츄얼 돔의 경우에는 리엑트에서 제공하는 매커니즘으로 기존의 돔처럼 변화가 일어나는 즉시 dom을 업데이트 하는 매커니즘이 아니라 기존의 dom과 버츄얼 돔과의 차이점을 분석하고 이 차이점에 기반해서 바뀌는 부분들에 대해서만 업데이트를 하는 매커니즘이다. 이 매커니즘의 장점으로는 불필요한 dom의 업데이트가 일어나지 않기 때문에 성능적인 면에서 굉장히 빠르고 부드럽다는 장점이 있다. https://minprogramming.tistory.com/entry/리엑트를-다루는-기술-1강 리엑트 렌더링 과정에 대하여...

오늘은 전역상태관리에 대해서 알아볼려고 한다. 정확하게 말하자마녀 Redux를 제외한 다른 상태관리 툴에 대해서 설명하려고 한다. 1. redux말고 다른 상태관리 툴은 무엇이 있으며 어떤 차이점이 있는가? 1-1) redux를 제외한 나머지 툴로 대표적인 예시는 context api가 있습니다. 1-2) context api와 redux의 차이점으로는 성능 이슈와 관련이 깊습니다. redux의 경우에는 전역적으로 상태를 관리하고 이에 대해서 필요한 부분들에서만 렌더링이 이루어집니다. 반면 context api의 경우에는 한번 컴포넌트가 바뀔 경우에 모든 컴포넌트가 바뀐다는 단점이 존재합니다. 따라서 context api를 사용할 때는 불 필요한 리렌더링을 줄이기 위해서 useMemo나 React.mem..

이번에는 상태 관리에 대해서 같이 이야기를 나눠볼려고 한다. 이야기의 주제는 다음과 같다. 첫번째 상태관리란 무엇인가? 두번째 상태관리는 왜 하는 것인가? 세번째 상태관리를 어떻게 진행하는가? 이다. 그렇다면 이 세가지 질문에 대해서 나만의 답을 해보도록 하겠다. 1. 상태관리란 무엇인가? : 상태관리를 알기 위해서는 먼저 상태에 대해서 살펴봐야 할 것 같다. 상태란 프로그래머 입장에서 봤을 때는 데이터이다. 즉 상태관리란 데이터를 관리하는 것이라고 볼 수 있다. 2. 상태관리를 하는 이유는 무엇인가? : 상태 관리를 하는 이유는 크게 2가지로 볼 수 있을 것 같다. 첫번째는 렌더링을 최적화하기 위해서 이다. 리엑트에서 렌더링이란 성능적인 측면에서 중요한 주제이다.. 두번째로는 상태의 불변성을 유지시키기..

1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input ..

오늘은 항해 99에서 WIL로 state에 대해서 조사하라는 숙제가 있었다. 그래서 오늘은 내가 공부하면서 정리한 state라는 개념에 대해 설명하고자 한다. 1. state 도대체 뭐야? state를 한국말로 하면 "상태"를 의미한다. 이때 "상태"는 react에서는 간단하게 데이터라고 보면 된다. 즉 "state를 관리한다.", "state를 변경한다"라는 말은 "데이터를 관리한다", "데이터를 변경시킨다"라는 말로 재해석 할 수 있다. 그럼 state의 정의에 대해서도 살펴보았으니 state의 종류에 대해서 살펴보자 state는 크게 2가지 종류가 있다. 첫번째는 지역상태로 한 컴포넌트내에서의 데이터를 의미한다. 두번째는 전역 상태로 여러 컴포넌트에서 참조할 수 있는 데이터를 의미한다. 2. sta..

나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다. 1. CSR CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다. CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다. 이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다. 위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다. 하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다. 2...