Frontend/React14 서비스 배포 케이스1 서버 A ( 사내에만, 다만 VPN 통해서 접속가능 ), 프론트엔드 여기에 올림서버 B ( 사내에만 ), API 여기에 올림 가장 중요한 포인트는 리액트 프론트엔드 코드는 사용자의 웹 브라우저에서 실행된다는 것이다. 1. VPN 사용자의 접속 흐름- VPN 사용자가 서버A의 주소로 접속한다.- 서버A의 아파치 서버는 리액트로 빌드된 정적파일을 사용자에게 전송한다.- 사용자의 웹 브라우저가 이 파일들을 다운로드하여 실행한다. 2. API 통신시도- 이제 사용자의 브라우저에서 실행된 리액트 앱이 데이터를 가져오기 위해서 API를 호출한다.- 이 API의 주소는 서버 B의 IP와 포트로 설정되어있다.- 여기서 문제가 발생한다. API를 호출하는 주체는 서버A가 아니라 VPN에 접속한 사용자의 PC ( 웹 브라.. 2025. 6. 27. 새로운 라우팅 라이브러리, wouter - 아주 가벼운 라우터 라이브러리- react-router가 너무 무겁다 싶을 때, 혹은 번들 사이즈를 작게 유지하고 싶을 때 사용하면 좋음. ## 특징- 번들사이즈 약 1kb- 훅 기반 : useLocation, useRoute등으로만 라우팅을 처리- jsx 컴포넌트 없이도 ok : Route, Switch 컴포넌트가 있지만, 사실 훅만으로 충분- SSR 지원- 프레임워크 독립적 : React외 Preact, Inferno 등에도 쓸 수 있고- 의존성 제로 : 리액트 외에 추가 의존 패키지 없음. npm install wouter ### 기본 사용법 1. 라우터 감싸기// App.tsximport { Router } from 'wouter';function App() { return ( .. 2025. 4. 21. Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21. 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. 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. 리액트 메이저 버전 업데이트 (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. useEffect와 setState의 배치 처리 사실 저번에도 올린 글이었는데, 다시 올린다. 리액트는 state가 바뀔 때마다 가상돔 비교를 통해서 화면을 다시 그린다. 그렇다면 setState 될 때마다 화면이 다시 그려진다는 것인가? 그렇다. 그렇다면 setState가 많이 호출될 때마다 비효율적으로 동작할 수 있다는 건가? 그렇다. 하지만 꼭 필요한 setState는 당연히 써야겠지만, 대부분 아닌 경우가 많다. 첫번째, 이벤트에 발생할 때 원하는 동작을 수행하게 하고 싶은 경우때문에 예를 들어서 스크롤을 할때마다 어떠한 동작을 하고 싶다고 하면 그냥 이벤트 리스너를 추가하는 것이 아니라, 꼭 '디바운싱' 처리를 해야한다. 디바운싱이란, N초 안에 1000번의 같은 이벤트가 발생하면, 해당 이벤트 리스너에 묶인 동작을 1000번 실행하는 .. 2024. 12. 3. 이전 1 2 다음