Front/React8 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28. [번역] useMemo, useCallback 제대로 알기 리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다. 이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다. 썸네일 제너레이터 - Thumbnail Generator useMemo useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다. 리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다. 각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다. *스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것 각 리렌더링.. 2022. 9. 23. Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20. [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 2020.05.22 - [Front/React] - Create-React-App으로 React 시작하기 Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른.. sihus.tistory.com 현재 사내 뿐만 아니라 토이프로젝트들도 CRA (Create React App) 로 빌드한 React 프로젝트들이 많았습니다. 하지만 많은 라이브러리 추가와 프로젝트 규모가 커지면서 빌드 및 구동 속도가 느려지고 무거워지기 시작했습니다. 이것에 대한 근본적인 해결법을 찾고.. 2021. 4. 22. React Hook 이해하기 - useEffect (Effect Hook) useEffect가 하는 일 리액트에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야 하는지를 말한다. 리액트에게 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 후 Effect를 불러온다. useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 우리가 지정한 state 또는 props에 접근 할 수 있게 되고, 특별한 API 없이도 값을 가져올 수 있기 때문이다. useEffect는 렌더링 이후 매번 수행되나? useEffect는 렌더링 이후 매번 수행 된다. ( 첫번째 렌더링 ~ 이후 모든 업데이트에서 수행 됨 ) 마운팅, 업데이트라는 방식으로 생각하는 것 보다 -> 렌더링 이후에 발생 하는 것 이라고 생각하는 것이 쉽다. useEffect.. 2020. 5. 25. React Hook 이해하기 - useState (State Hook) React Hook, useState useState는 state를 함수 컴포넌트 안에서 사용할 수 있도록 해준다. 기존에는 state를 추가하고, 변경하고 싶을 때 클래스(Class) 컴포넌트로 바꾸어 사용했으나, 이제 함수형 컴포넌트안에서 Hook을 이용해 state를 사용할 수 있다. Hook의 규칙 최상위 레벨에서만 Hook을 호출해야 한다. 오직 React 함수 내에서만 Hook을 호출해야 한다. useState를 사용하여 state 초기화 하기 import React, { useState } from 'react'; export default function Sample() { // 새로운 state 변수 선언 및 할당 const [count, setCount] = useState(0); } .. 2020. 5. 25. 리덕스(Redux), 리덕스 미들웨어(Redux-Middleware) 이해하기 리덕스(Redux) 이해하기 리덕스(Redux)란? 스토어(Store)라는 저장소를 가지고 상태데이터(State)들의 모음을 저장해두고 액션(Action)으로만 이 상태데이터(State)를 변경할 수 있도록 하는 제한 액션(Action)으로 상태데이터(State)를 변경하기 위해서는 스토어(Store)에 디스패치(Dispatch)를 해줘야 함 리덕스 미들웨어 (Redux Middleware) 네트워크 요청의 상태관리와 전달받은 데이터 상태관리를 더욱 효율적이고 쉽게 할 수 있도록 도와 주는 것 리덕스 미들웨어의 역할 Action이 Dispatch 되어서 이를 처리하기 전에, 사전에 지정된 작업들을 설정 함 미들웨어는 “Action과 Reducer 사이의 중간 역할자” 라고 이해 할 수 있음 Reducer.. 2020. 5. 22. Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른 속도와 개발환경을 구성해줍니다. 그럼 시작해볼까요. 첫번째 리액트 앱 만들기 터미널을 열고, 프로젝트가 생성될 곳으로 이동해준 뒤 create-react-app 모듈을 Global 로 설치 해줍시다. npm i -g create-react-app 설치가 완료 된 후, 리액트 앱을 생성합니다. create-react-app [프로젝트명, 대문자가 들어가지 않도록합니다.] npx create-react-app [프로젝트 명, 소문자로만 작성] npx create-re.. 2020. 5. 22. 이전 1 다음
