모두 이루지리라 얍!

1. 캔들 차트 기본 설정chart = createChart(chartContainerRef.current, { width: chartContainerRef.current.clientWidth, height: 500, layout: { background: { color: '#ffffff' }, textColor: '#000' }, timeScale: { timeVisible: true, secondsVisible: false, rightOffset: 3, barSpacing: 5 }, crosshair: { mode: 1, horzLine: { visible: true }, vertLine: { visible: true } }, grid:..

기존에 Create React App(CRA)로 개발해온 프로젝트를 Vite로 마이그레이션하면서 겪은 삽질과 해결 과정을 정리했습니다. 실제 에러 메시지와 해결 과정을 그대로 담았기 때문에, 비슷한 작업을 하려는 분들에게 도움이 될 수 있을 겁니다.1. CRA에서 Vite로 전환 이유CRA 빌드 속도에 불만HMR이 느림config override가 귀찮음최신 생태계는 Vite를 지향하는 추세2. 초기 설정npm create vite@latest템플릿은 react + javascript 선택기존 CRA 구조와 맞추기 위해 디렉토리 구조는 유지기존 public/, src/ 그대로 복사 후 시작3. entry 파일 변경 (main.js → main.jsx)CRA에서는 index.js 또는 main.js 를 e..

리액트로 개발할 때 직접 컴포넌트를 하나하나 만들지 않고,이미 잘 만들어진 컴포넌트를 가져다 쓰는 것도 좋은 선택입니다.이번 글에서는 리액트 컴포넌트를 쉽게 가져올 수 있는 추천 사이트 7곳을 정리해봤습니다.1. Tailwind UITailwind CSS 기반의 고품질 컴포넌트 모음유료이지만 실무에서 자주 사용됨반응형, 다크모드, 접근성 모두 우수React, Vue, HTML 코드 제공실무 프로젝트에서 바로 가져다 쓰기 좋습니다.2. FlowbiteTailwind 기반의 무료 UI 라이브러리Modal, Table, Form 등 기본 컴포넌트 다수react-flowbite 패키지로 리액트에서 바로 사용 가능무료 + Tailwind 조합이면 매우 유용합니다.3. MUI (Material UI)구글 머터리얼 ..

화면에 보여 줘야 할 내용에 HTML이 들어 있다면, React에서 실제 HTML로 렌더링하려면 dangerouslySetInnerHTML을 사용해야 합니다. 아래처럼 바꿔주면 됩니다.하지만 이대로 추가를 한다면 XSS(크로스사이트스크립팅) 위험이 있으니, 외부 입력 값일 경우 꼭 sanitize 처리를 해줘야 합니다.리액트에서는 라이브러는 지원하고 있는데 dompurify를 아래 처럼 사요하시면 됩니다.npm install dompurifyimport DOMPurify from 'dompurify';const sanitizedContent = DOMPurify.sanitize(content);

gridjs-react 를 사용하면서 버튼을 추가하려고 했는데 한참을 실패했다.h()함수를 사용해서 돔을 생성해주고서야 정상적으로 버튼을 생성 할 수 있었다.import { Grid } from 'gridjs-react';import "gridjs/dist/theme/mermaid.css";import { h } from 'gridjs'; h( "button", { className: "btn", onClick: () => alert(`Clicked on row with Date: ${row.cells[0].data}`), }, "Click Me" ..

이번에 진행하는 프로젝트에 처음으로 리액트를 사용하게 되었다.그리드는 뭘로 사용할까 하다가 gridjs를 정하고 테스트해보는데 디자인도 깔끔하고 사용성도 편리한 거 같았다.그리고 클릭이벤트를 찾아보는데 뭔가 쉽게 검색이 되지 않았고 행 변경시에 색상 변경은 기존에 css와 부치는지는 한참을 고생해서 적용했다.기본으로 제공하는 부분이 동작을 안 해서 어쩔 수가 없었는데 임시방편으로 강제 변경을 진행해 주었다.혹시 같은 고민을 하고 있다면 다른 부분은 참고를 위해서 넣은 부분이고 클릭이벤트와 그안에 색상 지정하는 부분만 필요하다면 참고하면 될 거 같다. import { Grid, h } from 'gridjs';import "gridjs/dist/theme/mermaid.css";import React, {..

프로젝트를 처음 시작 할때 막 시작하면 나중에 유지보수가 쉽지 않다.그래서 처음부터 구조를 잡고 가는 것이 중요하다.이번에 새로운 프로젝트를 리액트로 만들게 되면서 아래같이 구조를 잡고 진행을 하였다.src/├── assets/ # 이미지, 폰트 등 정적 파일│ ├── images/│ └── fonts/├── components/ # 재사용 가능한 컴포넌트│ ├── common/ # 공통 컴포넌트 (버튼, 인풋 등)│ └── layout/ # 레이아웃 컴포넌트 (헤더, 푸터 등)├── contexts/ # Context API 관련 파일├── hooks/ # 커스텀 훅├── pages/..

펑션을 자식에서 props로 내려 줄경우 부모가 리로딩 될 때 마다 자식도 같이 리랜더링이 되게 된다.이를 피하기 위해서 useCallback함수를 사용해주면된다.기존에 함수를 useCallback으로 감싸주고 변경 값이 변경될때에만 리렌더링이 될 값을 인자로 주면 된다.적용전const handleClick = (id)=>{ let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData);};적용후const handleClick = useCallback((id)=>{ let newTodoData = todoData.filter((data) => data.id !== id); setTodo..

React.memo를 사용하면 불필요한 렌더링을 막을수가 있다.예를 들어 리스트 아이템같은경우 조회된 이후에 변경 사항이 없는 경우 다시 렌더링이 될 필요가 없다.하지만 로그를 찍어 보면 같이 렌더링을 되는것을 확인 할 수 있다.이경우 해당 부분을 React.memo 감싸주기만하면 불필요한 렌더링을 막아 줄수가 있다. 적용전const List = ({ id}) => { return ( )};export default List;적용후const List = React.memo(({ id}) => { return ( )});export default List;

1234567891011121314151617181920212223242526!DOCTYPE html>html>  head>    meta charset="utf-8" />     title>Hello React!/title>     script src="https://unpkg.com/react@16/umd/react.development.js">/script>    script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">/script>    script src="https://unpkg.com/babel-standalone@6.26.0/babel.js">/script>  /head>   body>    div id="root"..