4전 4전

최근에 프론트엔드 사용자 경험 개선에 관해 공부를 하다가 낙관적 업데이트라는 개념을 알게 되었습니다. 이왕 공부해 본 김에 프로젝트에 한번 적용해 보면 좋을 거 같아서 TanStack Query를 사용하여 적용해보고자 합니다.| Optimistic Update(낙관적 업데이트)낙관적 업데이트는 프론트엔드 개발에서 사용되는 데이터 동기화 전략입니다.사용자가 데이터를 수정하거나 추가할 때 서버로부터 오는 응답을 기다리지 않고,UI를 즉시 업데이트 하는 방식입니다. 낙관적 업데이는 사용자가 서버의 응답을 기다리지 않고 지연 없이 즉시 피드백받게 되므로,사용자 경험 개선에 큰 도움이 될 수 있습니다. 다만 오류가 발생했을 때 이를 적절히 처리하고 원상 복구 시키는 로직을 잘 작성해야 하고,금전적인 정보, 사용자..

최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서 웹 성능이 떨어지는 일이 있었습니다.이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.| 코드 스플리팅리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.| React lazy리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면 아래와 같이 코드를 작성하면 ..

next.js로 프로젝트를 진행하면서 리스트에서 어떤 아이템을 클릭하면 해당하는 아이템의 상세 페이지로 이동하는 기능을 구현하였습니다. 이때 상세페이지로 첫 진입 시 next.js서버에서 데이터를 불러온 후 페이지로 이동되면서 아이템을 클릭하면 즉각적으로 페이지로 이동되는 것이 아닌 아래 이미지와 같이 딜레이가 생기는 현상이 있었습니다. 클릭하면 즉각적인 반응이 없기 때문에 클릭된 건지 안된 건지 헷갈리기도 하고 마치 렉이 걸린 듯하여 사용자 경험이 매우 떨어진다고 생각해 이를 개선하고자 했습니다. | 전역 상태 관리 store생성 먼저 아이템을 클릭했을 때 클릭했다는 상태를 저장하기 위해 전역에 상태를 저장해 줍니다. 해당 프로젝트에서는 zustand라는 라이브러리 사용하였습니다. // useLoadi..

리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리..

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩..

리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고, 이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다. 이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데 한번 간단한 예시를 통해 만들어 보겠습니다. | 예시 공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서 저도 use키워드를 붙여서 만들어 보겠습니다. 1. useInput input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고 그 값을 input value로 보여주는 코드를 일반적으로 작성하려면 import { useState } from "react"; import { useInput } from "./hoo..

리액트로 프로젝트를 할 때 create-react-app으로 시작하면 npx create-react-app ./ 아래처럼 여러 가지 파일과 폴더가 생깁니다. 당장에 프로젝트할 때 필요 없는 파일들이 있을 수 있으니까 각 파일들이 어떤 건지 알아보고 정리해 보려 합니다. | public 폴더 1. index.html 정리 먼저 아래처럼 주황색박스로 표시해 놓은 곳을 정리를 합니다. 그럼 이런 식으로 정리가 됩니다. 2. logo192.png, logo512.png, favicon.ico, manifest.json 제거 logo192.png, logo512.png - 리액트 기본 로고 이미지 이므로 제거 favicon.ico - 리액트 기본 아이콘 브라우저 위에 표시됨 본인 프로젝트 아이콘으로 대체 mani..

리액트에서 홈페이지에 코드를 작성할 수 있는 코드 에디터를 생성하고 싶을 때 react-ace 패키지를 사용하면 편하게 생성할 수 있습니다. | 설치 먼저 이런 식으로 react-ace 패키지를 설치해 줍니다. npm install react-ace ace-builds | 사용 import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-python"; // 언어를 바꾸려면 python 부분 바꾸면 됨 import "ace-builds/src-noconflict/theme-twilight"; // 태마를 바꾸려면 twilight 부분 바꾸면 됨 이런 식으로 사용하려 하는 언어와 태마 그리고 에디터를 임포트 해 온다음 function ..