4전 4전

무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node..

리액트로 코드를 작성하면서 모달창을 만드는 경우가 많습니다. 언듯 보면 간단해 보이지만, 실제로는 예상하지 못한 복잡성을 내포하고 있습니다. 최근 저는 모달창을 구현하면서 z-index 관련 문제가 발생하였고, 이를 해결하기 위해 createPortal을 이용한 내용을 작성해보고자 합니다. | 문제 상황 문제 상황을 보기 위해 리액트 프로젝트를 만들고 간단한 모달창 하나를 만들어 보겠습니다. 먼저 props로 상태를 받아서 화면에 보여주고 닫을 수 있는 Modal 컴포넌트 하나를 만들어 주겠습니다. // Modal import styles from "./index.module.css"; type Props = { open: boolean; onClose: VoidFunction; }; const Moda..

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

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

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로 백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다. | 기능 사용자 위치 기준 숙소 추천, 인기 숙소 안내 회원가입, 로그인 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회 장바구니, 주문, 결제 결제 내역 확인, 숙소 찜하기 | 역할 이 프로젝트에서 저는 사이트의 장바구니 기능과 결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다. | 링크 깃허브: https://github.com/Yanolza-Miniproject/frontend 배포: https://heynolja-mini-4.vercel.app/ | 장바구니 시연 영상 | 이슈 1. 목 데이터 문제 문제: msw를 ..

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

리액트로 프로젝트를 할 때 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 ..