Dev Diary 💻

Intro안녕하세요. 리액트를 사용하던 도중 Warning: validateDOMNesting(...): cannot appear as a child of 에러가 발생했습니다. How to solve the problem코드를 살펴보니 tbody 태그가 없었습니다. 아래의 코드로 수정한 결과 에러가 더이상 발생하지 않았습니다.

Intro 안녕하세요. 이번시간에는 React 에서 return 시 컴포넌트를 하나로 감싸는 이유에 대해 알아보도록 하겠습니다. Why? React에서 JSX를 사용하면 HTML과 유사한 구문으로 JavaScript를 작성할 수 있습니다. JSX는 JavaScript 표현식이므로, 리액트 컴포넌트의 반환 값으로 여러 요소를 사용하려면 이러한 요소들을 하나의 루트 요소로 묶어주어야 합니다. React의 가상 DOM(virtual DOM)이 기본적으로 단일 루트 노드만을 가지기 때문입니다. 컴포넌트가 여러 요소를 반환하면 React는 요소들을 단일 루트 노드로 꼭 묶어줘야 합니다. Method React에서 이러한 작업을 수행하기 위한 일반적인 방법은, 여러 요소들을 또는 와 같은 노드로 묶어주는 것입니다...

Intro 안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. theme.spacing(1) 처음에는 2px인가 싶었는데, 2px이 아니더라고요. theme.spacing(2) 의미 Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다. 1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다. 그렇다면 픽셀 커스텀이 불가능한가? 커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다...

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..

Intro 안녕하세요. 이번 시간에는 React Zustand 라이브러리에 대해 알아보도록 하겠습니다. Zustand 리액트를 공부하신 분이라면, 상태 (State)라는 개념에 대해 들어보셨을 겁니다. 간단히 말하자면 React Zustand는 리액트에서 사용가능한 상태 관리 라이브러리입니다. 리액트 상태 관리 라이브러리는 Redux, MobX 등이 존재하지만 Zustand는 위 라이브러에 비해 더 가볍고 간단하게 활용할 수 있습니다. Zustand Features Zustand는 State를 전역으로 관리하며 컴포넌트 간에 공유되는 State Container를 제공합니다. 이 Container 는 리액트 컴포넌트에서 직접 사용할 수 있으며 useStore()을 통해 상태를 가져오고 (get), 업데이..

Intro 안녕하세요. 이번 시간에는 리액트에서 로딩바 표시 및 로딩 속도를 조절하는 방법에 대해 알아보겠습니다. How to solve the problem 다음의 List 컴포넌트가 있다고 가정해봅시다. handleFilterClick함수를 클릭 할때마다 필터기능이 작동되는 로직입니다. 필터를 누를 때마다 필터가 된듯한 동작을 표현하기 위해 로딩바를 추가보도록 하겠습니다. const List: NextPage = () => { const {dataList, setDataList} = useLoginStore(); const [totalCtn, setTotalCtn] = useState(); const [filterStatus, setFilterStatus] = useState("ALL"); const..

Intro 안녕하세요. 이번 시간에는 리액트에서 array 데이터의 마지막 자식 요소에 border bottom line 추가하는 방법에 대해 알아보겠습니다. How to solve the problem 1. map 함수를 사용하여 데이터 배열의 길이를 구해줍니다. const arrayLength = array.length; 2. map 함수에서 현재 데이터 요소의 인덱스 값을 받아 옵니다. array.map((item, index) => { //... }) 3. 인덱스 값이 배열 길이보다 1 작은 경우에는 border bottom을 추가합니다 array.map((item, index) => { const isLastItem = index === arrayLength - 1; return ( {item}..

Intro 안녕하세요. 이번 시간에는 리액트 apexcharts x축 값을 특정 값으로 시작하도록 설정하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 제 경우에는 새벽 5시라는 특정 값으로 x축을 시작하고 싶었습니다. 따라서 저는 apxechart xaxis의 min 속성을 사용해 제가 원하는 시간을 아래와 같이 설정해주었습니다. x축 값은 상황에 따라 다를테니 년도/달/일 등이 필요하다면 커스텀하여 사용하면 됩니다. xaxis: { min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(), } 아래는 전체 코드입니다. var options = { chart: { type: 'line' }, series: [{ name: ..

Intro 안녕하세요. 이번 시간에는 react 리액트에서 토글 버튼을 구현하는 방법에 대해 알아보겠습니다. How to solve the problem 저는 토글 버튼을 구현하기 위해서 useState hook을 사용하였습니다. useState hook is used to initialize with initial value and function which changes its value on click event handler. 우선 처음 토글버튼의 on/off 상태를 나타내는 state를 만들어줍니다. const [isOff, setIsOff] = useState(true); 이후 버튼을 클릭할 때마다, 해당 state를 사용해줍니다. on/off 상태에 따라 css class도 다르게 적용해줄 ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 139. 모듈 소개 지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 140. 설정 시작하기 Layout folder : ex. Header UI folder: ex. Input 141. "헤더" 컴포넌트 추가하기 header 컴포넌트 추가 142. Adding the "Cart" Button Component Cart Button 컴포넌트 추가 143. Adding a "Meals" Component Meals 컴포넌트 추가 144. Adding I..