LEO Devlog LEO Devlog

- 왼쪽 메뉴바에서 참여도 클릭 - 페이지 및 화면 클릭 - 화살표 드롭다운 바에서 페이지 경로 및 화면 클래스 클릭 - 페이지 별 결과 확인 가능하다.

처음 검색했을 때 react-ga는 GA4가 지원이 되지 않는다고 나왔어서 일단 했는데, 찾아보니까 react-ga4가 이미 있었다. 다만 이 라이브러리에서는 UA-로 시작하는 아이디를 사용할 수 없으니, G-로 시작하는 GA4 속성을 만들어야 한다. 다행히 수정사항은 많지 않았다. npm install react-ga4 라이브러리 설치 후 import문을 바꿔주면 된다. import ReactGA from "react-ga4"; 그외 발견한 몇가지 변경사항을 적어보겠다. debug 모드가 없는 듯 chrome extension을 이용하는게 빠를듯 하다. ReactGA.pageview() Deprecated 아래 코드로 대체해서 사용~ ReactGA.send("pageview"); 전체 소스코드는 다음과..

Props Drilling이란? props drilling, 프로퍼티 내리꽂기 React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스 props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정이다. Prop Drilling의 장점 컴포넌트 간에 데이터를 전달하는 가장 쉽고 빠르게 전달 가능 컴포넌트를 잘게 분할해서 props drilling을 통해 전달하면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤 데이터가 어디서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이하다. (작은 규모라면..!) Prop Drilling이 야기하는 문제들 어플리케이션의 규모가 커지고, 컴포넌트의 수가 많아지면..

Virtual Dom 우선 DOM은 객체를 통해 구조화된 문서를 표현하는 방법 DOM 자체는 빠르지만 브라우저에서 DOM이 많아지면 CSS 재연산 레이아웃구성에서 느려진다. Virtual Dom은 DOM의 상태를 메모리에 저장해서, 변경이 일어날 때 변경 사항만 반영해서 성능이 향상된다.

Redux ✔️ Redux는 자바스크립트 앱에서 예측 가능한 상태 관리를 해주는 컨테이너다. 리액트에서 state와 props를 통해 상태 관리를 하고 상위 컴포넌트에서 하위 컴포넌트로 인자들을 넘겨주었는데, 만약 컴포넌트 중첩이 100만 개라면 디버깅에도 불리하고, 관리에 어려움이 따른다. 그래서 Redux가 출현하게 되었고, 세 가지 원칙을 가진다. Single source of truth 데이터를 한 곳에서만 관리한다. State is read-only 리액트에서 setState()를 통해서 state를 변경했지만, Redux에서는 action이라는 객체를 통해 state를 변경할 수 있다. Changes are made with pure functions 변경은 순수 함수로만 가능하다.(reduc..

Autocomplete (자동완성) 구현 ✔️ 테스트 케이스들을 다 통과하지 못해 아쉬웠지만 구현된걸 보니 유용하게? 쓰일 것 같다 ! import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1r..

리액트 컴포넌트 디자인 실습 ✔️ 리액트 모달 창 띄우기 ☑️ 삼항 연산자를 이용한 조건부 렌더링을 활용한다. alert창과 다르게 어두운 배경 태그 내부에 창 태그를 삽입해 구현한다. import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; position: relative; `; export const ModalBackdrop = styled.div`ㅁ ..

CDD(Component Driven Development) ✔️ 개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Storybook ✔️ UI 개발 // Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다. 재사용성을 확대하기 위해 컴포넌트를 문서화한다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다. 기본적으로 독립적인 개발환경에서 실행되기 때문에 ..