[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표

사용자가 웹사이트에 접속하였을때 웹사이트의 성능을 나타내기 위한 핵심 웹지표란 개념이 있다. 핵심 웹지표? 구글에서 만든 지표로 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표를 일컫는 용어이다. 1. LCP (최대 콘텐츠풀 페인트) 2. FOD (최초 입력 지연) 3. CLS (누적 레이아웃 이동) LCP? 최대 콘텐츠풀 페인트란 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지나 텍스트를 렌더링하는데 걸리는시간 을 의미한다. 큰 이미지와 텍스트는 아래와 같이 정의되어 있다. 내부 poster 속성을 사용하는 url()을 통해 불러온 배경이미지가 있는 요소 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (,) 즉, 콘텐츠풀 페인트란 사용자의 기기가 ..

→2024.02.19

FrontEnd/React

[REACT] 이미지 관리 방법 (public vs assets)

리액트에는 크게 이미지처리방법이 2가지 있다. 1. public 파일 안에 바로 이미지를 관리하는 방법 2. src/assets 파일을 만든 후 이미지를 관리하는 방법 과연 어떤 방법이 좀 더 좋은 방법일까? 정답은 두가지 방법다 장단점이 존재한다.. 이다. 1. public 사용 간단하게 사용할 수 있으며 public 폴더에 있는 이미지를 상대 경로를 통해 쉽게 불러올 수 있다. 이미지를 직접 불러오기 때문에 번들링 처리가 필요없다 라는 장점이 있다. 대신 이미지의 관리가 어려울 수 있으며 이미지가 많거나 프로젝트가 커질수록 유지보수가 어려워진다는 단점이 있다. 또, 이미지의 크기가 큰 경우 로딩 성능에도 영향을 미칠 수 있다고 한다. 위 예시처럼 불러올 수 있다. 2. src/assets 사용 이미지..

→2023.11.22

오류들

[React] redux-thunk , dispatch 연결 안되는 오류

프로젝트를 진행하다가, redux를 활용해서 기능을 해줘야하는데, 비동기 처리를 해줘야 하는 경우가 생겼다. 따라서 원래 구현했던 redux 코드들에 redux-thunk 미들웨어를 추가해서 비동기 작업을 추가하려 해주었다. export const setBlockRightSizeAsync = ( payload: setBlockRightSizeType, ): ThunkAction => { //리턴타입, Root상태, ExtraArgument타입, action의 타입 순서대로 넣음 const { leftPos, dayPosMap, id, width, projectId } = payload; return async (dispatch, getState) => { /* 생략 ... */ dispatch(setB..

→2023.05.08

FrontEnd/React

[React] emotion styled 컴포넌트처럼 관리하기

리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자. 리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다. 우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다. npm i @emotion/styled 그리고 아래처럼 컴포넌트를 하나 만들어주자. 해당 컴포넌트 아랫단에, const GitHubLoginArea = styled` display: flex; align-content: center; position: absolute; right: 0; top: 5rem; padding: 1rem; background: #ffffff; box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1), 0px 0px 1px rgba(10, ..

→2022.11.17

오류들

REACT 새로고침시 cannot/get

리액트를 express 환경에서 실행하였을때, 새로고침하면 라우트 설정이 잘 되어있음에도 cannot/get 현상이 발생하였다. https://ui.dev/react-router-cannot-get-url-refresh Fixing the 'cannot GET /URL' error on refresh with React Router (or how client side routers work) In this post you'll learn how to fix the 'cannot GET /URL' error with React Router. Along the way, you'll also learn how client side routers work. ui.dev 위 글을 참고해서 수정하였다. 쉽게설명하자..

→2022.09.30

프로젝트/소규모프로젝트들

JS_리액트_TodoList

리액트를 사용해서 TodoList를 만드는 소규모 프로젝트를 진행해보겠다. 패스트캠퍼스의 강의를 참조하였습니다! 리액트 프로젝트를 하나 만든 후에 2개의 라이브러리를 설치할 것이다. yarn add styled-components react-icons 여러 컴포넌트를 만들고 관리할 것인데 간단한 역할을 먼저 알아보자. TodoTemplate Todolist의 레이아웃을 담당하고 하얀색 테두리를 담당한다. TodoHead 날짜시간, 할일의 개수를 가진다 TodoList 할일에 대한 정보를 map내장함수를 사용하여 랜더링할것이다. TodoItem 할일을 표시한다. TodoCreate 새로운 할일을 등록할 수 있게 한다. 1. 회색배경화면 만들기 //App.js import React from 'react' ..

→2021.12.27

[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표