IT V-log

Version React 18.2.0 , Typescript 4.9.5 , Chart.js 4.4.0 설치 npm install react-chartjs-2 chart.js yarn add react-chartjs-2 chart.js 사용법 import React from 'react'; import {Chart, ArcElement, Tooltip, Legend} from 'chart.js' import { Doughnut } from 'react-chartjs-2'; // chart.js // https://www.chartjs.org/docs/latest/configuration/legend.html const DoughnutChart = () => { // chart data 1 const cha..

AOS Install npm install --save aos@next 또는 yarn add aos@next AOS 타입스크립트 Install npm i --save-dev @types/aos 또는 yarn add --save-dev @types/aos 타입스크립트는 AOS, types 둘다 설치 해야 됩니다. 사용 할 컴포넌트에 AOS import import React, { useEffect } from 'react'; import 'aos/dist/aos.css'; import './App.css'; && JSX useEffect(() => { AOS.init(); }, []) 남은 사용법은 AOS 공식 페이지에서 확인 후 사용하시면 됩니다! https://michalsnik.github.io/ao..

전 회사 개발자 분과 이야기를 하다 괜찮은 프로젝트가 떠올라 새로운 프로젝트를 시작하게 되었고 가장 먼저 앱으로 출시한 뒤 웹으로도 개발을 하자는 이야기가 나오게 되었습니다. 현재 인원은 디자이너, 기획자, 백엔드 개발자, 프론트 개발자로 구성이 되어 있으며, 프로젝트를 구현 하면서 필요하다면 그때마다 사람을 모집할 계획입니다. 주요 서비스와 프로젝트의 기능 부가서비스 및 비즈니스 모델은 어느 정도 준비가 되어있는 상태이며, 완성이 되어가는 과정들과 결과들에 관한 내용들을 작성할 예정입니다! Expo CLI가 아닌 React Native CLI를 선택한 이유 각각의 장단점이 있지만 가장 큰 이유는 Native CLI Expo보다 자유도가 높으며, 모듈을 직접 제작할 수 있기 때문에 단순 프로젝트가 아닌 ..

컴포넌트가 렌더링이 될때마다 수행하게 되는 리액트 훅 으로 Side-effect를 처리하기 위해 사용합니다. Side-Effect(부작용) 란? 기대했던 효과 외에 나타나는 다른 작용을 말하며, 부작용은 흔히 유해하다고 생각하는 분들이 많지만 항상 나쁜 방향으로만 일어나는 것은 아닙니다. 그 예로 고혈압 치료제 성분 중 하나인 미녹시딜이 현재는 탈모치료에도 사용되는 것 처럼 말이죠 하지만 React에서 side-effect는 조금 다른 의미를 가지고 있으며, 부정적으로 생각하고 있습니다. React에서 side-effect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side-Effect(부작용)라고 합니다. 예를들면 함수의 전역변수 값을 변경하거나 혹은 함수 외부에 존..

useState의 대체 함수로 useState처럼 state를 관리를 도와주는 리액트 훅 입니다. 그래서 useState와 약간 비슷합니다. 하지만 useState보다 더 많은 기능이 있고 더 복잡한 state에 유용합니다. 예를 들면 여러 state들이 함께 속해 있는 경우가 있습니다. 같은 것을 관리하는데 관리하는 측면이 다를 뿐인거죠 혹은 여러 state가 같이 바뀌거나 서로 관련된 경우가 있습니다. 그런 경우에는 useState나 거기에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽습니다. 이런 경우 useReducer를 useState 대신 쓸 수 있습니다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아닙니다. 더 강력하다고 해서 항상 더 좋다..

render 메서드에서 생성된 Dom 노드나 리액트 Element 요소에 접근하여 그것들을 직접작업 할 수 있게 해주는 것입니다. 예를들면 Dom API를 이용하는 document.getElementsById("button"); 로 해당하는 Dom에 직접적으로 접근하는 방법을 이야기 합니다. ref는 언제 사용해야 하나? 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 리액트 공식문서에서는 아래와 같은 사례를 구체적인 예시로 들고 있습니다. 하지만 이번에 ref를 사용할 예제는 위와는 다른 예제 입니다. 사용자에게 입력값을 받을때 input 태그를 이용하게 되는데 이때 useState를 사용하여..

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법 입니다. 위의 내용만 봐서는 문득 Portal을 사용하는 이유에 대해 감히 잡히지 않으실거 같습니다. 그래서 제가 예시를 가져왔습니다! 위 사진에서 중점적으로 봐야 할 것은 바로 Modal 입니다! 사진에 보이듯 오버레이가 다른 HTML 코드 안에 중첩되어 있다면 기술적으로 좋은 코드나 구조가 아닙니다. (*Overlay: 어떠한 HTML 요소 위에 또 다른 HTML 요소가 겹치게 보이는 효과 / 모달창, 사이드 드로어, 다이얼로그 등) 또한, 추후에 스크린 리더가 렌더링 되는 HTML 해석할 때 일반적인 오버레이라고 인식하지 못 할 수도 있습니다. 이러한 문제를 해결하기 위해서는 아래의 사진처럼 오버레이가 다른 태그가 ..

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환 합니다. 리액트를 사용하기 위한 문법인 JSX를 사용할 때 return 문안에는 반드시 하나의 최상위 태그가 있어야 합니다. 이는 ReactDom.createRoot(document.getElementById('root'))에서 하나의 루트 요소만 가지고 있기 때문입니다. index.js 파일 만일 이러한 내용을 어기고 두개 이상의 최상위 태그가 생기면 아래와 같은 에러가 발생하게 됩니다. 그런데 이러한 문제를 해결하기 위해 단순히 감싸는 용도로 div 태그를 사용하게 되면 추후에 앱이 느려지는 이유 중 하나가 될 수 있습니다. 처음에는 그 양이 적어 괜찮겠지만 앱이 점점 커지면서 문제가 되기 때문에 처음부터 이런 감점 요소를 잡고 가는 게 좋다..