Frontend31 React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다. * 동작방식1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메.. 2025. 3. 21. npm, package.json, package-lock.json npm initpackage.json 생성npm install npm 모듈 로컬 설치npm install 패키지@버전특정버전 설치npm install --save 패키지이름node_modules 디렉토리에 설치, dependencies 항목에 패키지 추가npm install -g 패키지시스템 전역에 패키지 설치, 해당 프로젝트의 node_modules 디렉토리와 관계 없이 사용가능npm install --save옵션dependencies 항목에 추가가 됨npm install --save-devdevDependencies 항목에 추가가 됨 ** 주의해야npm updatenpm 모듈 업데이트npm dedupe중복된 모듈 정리npm outdated오래된 패키지의 존재 유무를 알려줌npm cachenpm 내의 .. 2025. 3. 18. React 18 ) useTransition 아까 useActionState에 대해서 언급하였는데, 작동이 안되는 경우가 종종 있다. 예를 들어서, isPending 값이 제대로 업데이트 안되는 경우가 존재했다. ( 아무래도 아직 나온지 얼마 안되어서 그런건가? ) * 두가지 반환값이 존재한다. - isPending : 배열을 반환하는데, 첫번 째 값은 업데이트가 진행중인지 나타내는 boolean 값 - startTransition : 비우선 업데이트를 시작하는 함수 * 사용목적예를 들어서, 사용자가 입력하는 동안 목록 필터링처럼 시간이 좀 걸리는 작업이 있다면 이 작업을 startTransiton 안에 넣어서 실행할 수 있다. 그러면 입력반응은 즉시 이뤄지고, 시간이 걸리는 작업은 백그라운드에서 진행되면서 UI가 멈추지 않는다. import.. 2025. 3. 18. React 19 ) useActionState( 구 useFormState ) useFormState는 이전에 React Dom에서 제공했었고 이제는 useActionState로 이름이 바뀌어 제공된다. 목적은 폼의 동작을 쉽게 관리하기 위함이다. useActionState ( 구 useFormState )const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); * 목적- 폼 제출 ( 이걸 액션이라고 한다 ) 을 호출할 때, 이전 상태와 함께 폼 데이터를 인자로 받아 처리한 후, 그 결과 상태를 관리해준다. * 기능- 폼 제출 시 자동으로 pending 상태를 관리한다.- 서버액션 ( 데이터 업데이트, 검증 등 )의 결과를 상태로 반영하여 이후 렌더링에 활용할 수 있다.- 이전 Cana.. 2025. 3. 18. 인증 인증(세션 vs 토큰) 개요세션(Session) 방식발급 방식:사용자가 로그인을 하면, 서버는 "세션 키"를 발급서버 내부 DB나 메모리에 사용자 id - 세션 키를 매핑해 저장클라이언트에게 세션 키를 전달하고, 클라이언트는 이 키를 쿠키 등에 저장검증 방식:클라이언트 요청 시 세션 키를 전송서버는 자신이 가진 세션 저장소를 참조해 해당 세션 키의 유효성 및 해당 사용자와의 매칭 여부 확인유효한 경우 응답 제공한계:서버 확장(수평 확장) 시 세션 공유 문제 발생세션 정보를 모든 서버에 공유하기 위해 추가적인 DB나 캐시(레디스 등) 필요JWT(Token) 방식JWT란?RFC 7519에 정의된 표준화된 토큰 포맷헤더(Header), 페이로드(Payload), 시그니처(Signature)로 구성된 JSON .. 2024. 12. 17. useQuery React Query의 useQuery는 React 어플리케이션에서 데이터를 관리하고 서버와의 통신을 효율적으로 처리할 수 있도록 도와주는 훅입니다. useQuery는 데이터를 가져오는 과정과 상태관리를 간소화하며, 캐싱, 리패칭, 로딩/에러 상태 관리 등을 자동으로 처리해줍니다. useQuery(queryKey, fetchFunction, options); 첫번째 매개변수로 쿼리키 query key - 데이터를 구분하기 위한 키입니다.- 배열로 작성됩니다.- 예를 들어, ['posts'] 두번째로 데이터를 가져오는 함수 fetch function- 데이터를 가져오는 비동기 함수입니다. 세번째로 옵션 객체 option object 를 받을 수 있습니다. 옵션들을 보겠습니다. 1. enabled- 기.. 2024. 12. 13. Suspense, ErrorBoundary 그리고 React Query 항상 코드 짤때마다 고민이 많았다.주로 데이터를 가져올 때 try...catch를 사용하는 경우가 많았는데 이 경우에 문제(?) 점이 있다. "하... 이게 맞나.." 하는 생각이 든다는 것이다. 해당 api를 선언하는 함수를 만들어주고, 그 안에 try...catch...를 때려박아주고 아닐 시의 UI 처리까지 그걸 매번 반복해야했다. 그리고 그 뿐인가 api를 호출할 때, 데이터를 지금 가져오고 있는지.. 가져오는데 실패했는지.. 이것 또한 UI에서 보여주어야 하기 때문에 보일러 플레이트 코드가 계속 늘어났다. 이번에 리액트 19버전이 나왔다고 해서 봤는데 useTransition을 쓰거나, use를 쓴다던지 이런 불편함을 해소하는데에 많이 초점이 맞춰져 있는 것 같았다. 그래서 아예 하는김에.. 2024. 12. 12. 리액트 메이저 버전 업데이트 (2) - use use는 프라미스를 동기적으로 읽을 수 있게 해주는 리액트 api이다.이번 메이저 업데이트를 통해서 본 19 버전은 개발자의 개발 경험에 초점을 많이 맞춘 것 같다.클래스형 개발에서 함수형 개발로 업데이트 한 것은 렌더링이 잦은 리액트에서 필수적이었다면이번 메이저 업데이트는 필수적이지는 않지만, 기존에 개발을 하면서 번거로웠던 것들, 있으면 좋았던 것들이 많이 추가된 것 같다. 그 중에서 use 리액트 api의 경우에는, 개발자의 개발 경험에 대해서 가장 긍정적인 api가 아닐까 싶다. 들어가보자. 본 게시글은 하단의 포스트를 참조하였습니다. use는 다음과 같이 사용한다.import {use} from 'react'function MessageComponent({messagePromise}){ con.. 2024. 12. 12. 리액트 메이저 버전 업데이트 (1) - useTransition 22년도에 있었던 메이저 버전 변경 ( 18 )이후 정말 오랜만에 메이저 업데이트( 19 )가 이루어졌다.근데 아마 바로는 못쓸 것.... 다른 라이브러리 호환이 안될 수도.. 1. 더이상 메모이제이션을 쓸 필요가 없어졌다. useMemo, useCallback- 이제 리액트 컴파일러가 알아서 최적화한다. 2. 더 이상 forwardRef를 쓰지 않아도 된다.forwardRef로 감싸지 않아도 props로 ref를 전달받을 수 있다. 3. use() hook이 등장할 줄 알고 좋아했으나...이제 처음에 데이터 페칭해서 UI들 데이터로 채워넣는거 useEffect로 안해도 될 줄 알았는데.. 언제 나오려나 4. 여러가지 훅들이 나옴 useTransition[매개변수]매개변수는 없다.[반환]2개의 항목이 있.. 2024. 12. 11. Suspense와 ErrorBoundary ErrorBoundary- 컴포넌트의 에러처리를 위함- 하위 컴포넌트 트리에서 발생하는 JavaScript 에러를 포착하여 어플리케이션이 전체적으로 중단되지 않도록 하고, 대신 fallback UI를 표시한다. 이를 통해서 특정 컴포넌트에서 발생한 에러가 전체 UI에 영향을 주지 않도록 격리한다. Suspense- 비동기 로딩상태 관리를 위함- 비동기 작업이 완료될 때까지 대기하는 동안 fallback ui를 표시하는 컴포넌트이다. ErrorBoundary와 Suspense를 같이 사용할때 - Suspense는 비동기 작업의 로딩 상태를 관리하지만, 해당 작업 중에 에러가 발생하면 이를 처리할 수 없다. - 이 때 ErrorBoundary를 함께 사용하여 에러를 포착하고 적절한 폴백 UI 를 제공한.. 2024. 12. 3. 이전 1 2 3 4 다음