LEO Devlog LEO Devlog

리액트에서의 onChange , onClick 등에 들어오는 event 파라미터는 브라우저에서 사용되고있는 Event 인 Event와는 다른 객체이다. 해당 event 객체는 리액트에서 작성한 SyntheticEvent로 웹 브라우저에 있는 Event를 이용한 새로운 객체입니다. 그렇기 때문에 위의 비동기 처리시에는 null 값이 되며 해당 경고가 나타납니다. 리액트 공식 문서에서도 해당 부분을 해결하기 위해서는 e.persist 라는 함수를 사용하라고 되어있고 사용은 간단하다. 해당 onChange or onClick 에러 코드에서 e.persist()를 호출하면 된다. onChange={ (e)=>{ e.persist(); console.log(e.type); console.log(e.target.v..

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

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

README.md 파일만 덩그러니 있는 프로젝트 폴더를 clone해서 열었고, client 부분은 https://any-ting.tistory.com/93 을 참고해서 진행하니 react-app의 버전문제라고 에러가 떠서 You are running `create-react-app` 4.0.2, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove..

배포 간에 테스트를 위해 브라우저를 켰는데 This XML file does not appear.. 이라는 에러가 떴다. 구글링을 바로 해보았지만 검색 결과가 2017년 이전의 결과만 반복되서 나와서 당황스러웠다. 결과는 크롬 RSS와 XML 파일에 대한 얘기뿐이었는데 이 프로젝트에서 관련된 부분들이 있나 파일들을 하나씩 살펴봤지만 딱히 관련된 내용이 없어 보였다. 그래서 나는 VSCode에서 클라이언트 쪽 터미널을 살펴보았고 에러는 다음과 같았다. 에러 메세지에서 노란색 warn 이란 부분을 보면 darkMode와 관련된 내용이 나와서 검색해보니 다크모드를 삭제하거나 media로 변경하라는 것을 발견해서 false -> media로 변경해주니 warn 부분은 해결되었다. 하지만 아래쪽에 Module n..

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..

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

Effect Hook Side Effect ✔️ Side Effect(부수 효과)는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우의 해당 함수를 말한다. 순수 함수(Pure Function)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 이 경우는 Side Effect가 발생되지 않는다. 그렇다면, Side Effect가 발생되는 경우는 언제일까? fetch를 이용해 외부 데이터를 받아오는 경우 LocalStorage에서 데이터를 받아오는 경우 setInterval, setTimeOut을 사용하는 경우 // 타이머 사용 useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. 최상위에서만 Hook을 호출한다. React 함수 내에서 Ho..