프론트엔드 공통 1. 리플로우와 리페인트에 대해 설명해주세요. 리플로우와 리페인트는 웹페이지가 변경될 때, 브라우저가 레이아웃을 조정하거나 스타일 변경을 수행하는 과정입니다. 리플로우는 웹페이지의 레이아웃이 변경될 때 수행되며, 요소의 위치, 크기, 주변 요소와의 상대적 관계 등이 다시 계산됩니다. 리페인트는 웹페이지 요소의 스타일이 변경되어 화면에 다시 그려질 필요가 있는 경우 발생합니다. 리플로우의 재계산 과정은 한 요소의 변경이 다른 요소에 영향을 미칠 수 있기 때문에 성능상 부하를 초래할 수 있습니다. 때문에 다양한 라이브러리, 프레임워크들은 리페인트와 리플로우를 최소화하기 위해 노력합니다. 예를 들어 React의 경우 가상 DOM을 활용해(diff 알고리즘) 변경 사항을 일괄 처리한 후, 실제 ..
Context API 작은 규모의 프로젝트에서 사용하면 좋은 React Hook Context 사용 방법 1. Context 만들기 createContext(기본값) - Provider가 없는 경우 사용할 default 값(initial X) // LevelContext.js import { createContext } from 'react'; export const LevelContext = createContext(1); 2. Context 제공하기 만들어놓은 Context.provider로 Context를 전달하고 싶은 자식 요소 감싸기 → 트리에 동일한 Context가 여럿 있을 때 자식 요소는 UI 트리에서 가장 가까운 Context 값을 사용 import { LevelContext } from..
rc-rate React Rate Component 리액트 별점 컴포넌트 라이브러리 원하는 모양으로 별점 컴포넌트를 만들 수 있다 1. 설치 npm i rc-rate 2. import import Rate from 'rc-rate'; import 'rc-rate/assets/index.css'; 3. 코드 console.log(v)} /> value: 값 지정. 상태를 줘서 사용 allowHalf: 별 반 점 허용 character: 원하는 모양(string, ReactNode)을 내려 주면 됨(color를 입힐 수 있어야 함. 문자, svg) onChange: 별점을 받아 실행할 함수를 할당 ... 4. 크기, 색상 변경 &.rc-rate { font-size: 20px; // width: 20px; ..
[React] react-chartjs-2로 만든 Bar chart에 데이터레이블 추가하기(플러그인)
react-chartjs-2로 Bar 차트 만들기 chartjs-plugin-datalabels 플러그인 적용은 6.부터 1. 라이브러리 설치 # 리액트차트js2, 차트.js, datalabels 플러그인 npm install react-chartjs-2 chart.js chartjs-plugin-datalabels 2. 기본 틀 만들기 // Bar.js 파일 import { Chart as ChartJS, CategoryScale, BarElement, LinearScale, } from 'chart.js'; ChartJS.register(CategoryScale, BarElement, LinearScale); 3. 옵션 설정 // Bar.js const options = { maintainAspect..