본문 바로가기

전체 글

(90)

React / Next.js Next.jsReact를 기반으로 하는 풀스택 웹 애플리케이션 프레임워크. 리액트에서는 구현하기 힘든 SSR을 보다 쉽게 구현할 수 있다. /*SSR(Server Side Rendering) : 화면을 구성하는 주체가 서버로, 클라이언트가 페이지를 요청하면 HTML 문서 전체를 보내주는 방식 MPA(Multi Page Application) : 여러 개의 페이지로 구성된 애플리케이션, 페이지 전환 시 플리커 현상 발생 CSR(Client Side Rendering) : 화면을 구성하는 주체가 클라이언트로, 서버는 빈 html만 보내주며 클라이언트 쪽에서 js파일을 보내며 빈 html을 채워줌, 페이지가 전환되며 화면에 변경사항이 생기면 그 부분만 js로 변화시킴SPA(Single Page Applica..

React / Debounce, Throttle Debounce & Throttle연속적으로 발생하는 함수나 이벤트의 실행 빈도를 줄이기 위해 묶어서 처리하는 기법으로, 최적화를 통한 성능 향상이 목적이다. Debounce vs Thottle 1) 함수나 이벤트가 연속적으로 발생하는 경우 2) 함수나 이벤트가 연속적이 아닌 끊어서 발생하는 경우 Debounce : 연속적으로 함수나 이벤트가 발생 후 일정 시간 동안 추가 이벤트/함수가 없다면 실행Throttle : 연속적으로 함수나 이벤트가 발생하는 동안 일정 시간 간격(텀을 가지고)으로 실행 Debounce연속적으로 발생한 이벤트를 하나로 처리하는 방식으로, 마지막에 한 번에 묶어서 처리해도 상관 없을 때 사용한다.검색 자동 완성 같은 사용자 입력 처리에 유용하다. 예시이번에도 이전에 ..

React / 번들링, 코드스플리팅 번들링여러 개의 파일(Javascript, CSS 등)을 하나의 파일로 합치는 것Vite로 만들어진 프로젝트의 경우 Rollup, CRA는 Webpack이라는 모듈 번들러를 사용한다. 효과HTTP 요청의 수를 줄여 속도 향상 (모든 javascript, css, 이미지 파일을 하나의 파일이나 여러 파일로 결합함)코드를 압축해 파일 크기 축소 (불필요한 공백, 주석 등을 제거하고 변수명을 단축함)사용되지 않는 코드를 제거해 최적화 (Tree shaking으로 dead code 제거) package.json에서 build 항목을 찾아볼 수 있는데, 이 build에는 번들링 과정이 포함되어 있다. 이전에 실습했던 https://hydeveloper.tistory.com/210의 프로젝트를 빌드해 봤다.터미널..

React / lazy, Suspense React에서는 SPA(Single Page Application)으로 구현되고 있기 때문에 사용하지 않는 컴포넌트도 불러오고 있다. 이로 인해 렌더링 시간이 길어질 수 있는 문제점이 발생한다. 이러한 문제점을 해결하기 위해 lazy와 Suspense가 사용된다. lazy컴포넌트를 바로 불러오지 않고 실제로 그 컴포넌트가 필요할 때 불러온다.lazy의 인자로 import 함수를 전달하고, 컴포넌트를 반환한다.* lazy는 보통 모듈의 최상위 수준에서 선언되어야 렌더링 시 모든 상태가 재설정되는 현상을 막을 수 있다// 기존 import 방식import Main from "./Main.jsx"// lazy 사용 시const Main = lazy(()=>import("./Main.jsx")); Suspsen..

React / React Developer Tools React 개발자 도구브라우저 확장 프로그램으로 React 컴포넌트를 검사하고 Props와 State를 편집할 수 있으며 성능 문제를 식별할 수 있다.주요 기능은 다음과 같다.컴포넌트 탐색, 계층 구조 표시상태 및 props, hooks 확인상태 변화 추적virtual DOM 시각화 공식 홈페이지 : https://ko.react.dev/learn/react-developer-tools 사용 방법 임의의 리액트 프로젝트를 실행시켰을 때, 개발자 도구의 Components 탭에서 확인할 수 있다.컴포넌트 단위로 화면의 구성을 확인할 수 있으며, props나 hooks도 보여진다. 여기서 빨간 동그라미로 표시해둔 톱니 아이콘을 클릭하면 오른쪽 이미지와 같은 설정 모달이 뜨는데,Highlight ..

React / 최적화 함수 상태가 변화되면 리렌더링이 되는 것은 React의 기본 특징이기 때문에 리렌더링이 필요없는 컴포넌트들도 함께 리렌더링이 되곤 한다. 또, 페이지 첫 로딩 시 csr방식 때문에 비교적 오래 걸리는데, 이러한 이유 때문에 프로젝트의 규모가 커질 수록 최적화가 필요해진다. 기존 컴포넌트의 방식은 아래와 같다. 자세한 내용은 생명 주기 글 참고 클래스 컴포넌트컴포넌트를 클래스로 정의 -> 컴포넌트의 인스턴스가 화면에 표시됨상태 변경 시 -> 인스턴스의 내부 값이 변경 -> 바뀐 값에 맞춰 화면이 리렌더링=> 한번 만들어진 인스턴스는 제거되기 전까지 계속해서 재사용됨 함수형 컴포넌트컴포넌트를 함수로 정의 -> 함수 호출상태 변경 -> 기존에 호출된 함수 제거 -> 새로운 상태 값으로 함수 호출 -> 화면에 렌..

React / 전역 상태 관리 (2) - Redux, Redux Toolkit Redux전역 상태 관리를 위한 라이브러리로, flux 규격에 reducer가 결합된 패턴이다. Flux보다 더욱 간단하다는 점이 특징이다. * Flux 패턴Facebook에서 만든 아키텍처 패턴, 애플리케이션의 데이터 흐름을 단방향으로 유지하기 위한 구조데이터 흐름 : View → Action → Dispatcher → Store → View 업데이트 Redux의 데이터 흐름구성요소Action : 상태를 어떻게 변화시킬 것인지에 대한 내용을 담은 객체↓Dispatch : 액션 객체를 Reducer로 넘겨주는 역할을 하는 함수↓Reducer : 리턴하는 값이 새로운 상태가 되는 함수여러 개라면 combineReducers 함수로 묶어 하나로 만들 수 있음Store : Redux의 전역 상태 저장소, ..

React / 전역 상태 관리 (1) - 내부 React는 대표적인 SPA(Single Page Application) 라이브러리다.SPA는 상태가 변경될 때 이를 감지해 필요한 부분만 리렌더링 하는 방식으로 동작하기 때문에, 상태 관리가 매우 중요하다. React에서 상태를 관리하는 방식으로는 크게 두 가지로 나눌 수 있다.내부외부useStateContextAPIRedux, Redux ToolkitRecoil, MobX, Zustand, Jotai ... 전역 상태관리의 장점Props Drilling 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 전달 할 때, 직접적으로 사용하지 않는 중간 컴포넌트들까지 props를 계속 넘겨줘야 하는 현상을 의미한다. 이전에 했던 todo list 만들기에도 props drilling을 찾아볼 수 있다. ..

이전 1 2 3 4 ··· 12 다음

티스토리툴바