기록하는 개발자

https://mingmeng030.tistory.com/266 [React] React+typescript에서 chartJs의 update() 사용법 프로젝트를 할 때마다 그래프가 필요할 때 라이브러리 ‘chartJs’의 Bar chart를 사용하였는데, 그냥 javascript가 아닌 react+typescript 환경에서 사용할 때 상태 변경에서 문제가 발생했다. react+typescript mingmeng030.tistory.com 기존에 적용한 chartjs에 data label이 바로 보이도록 추가하고 싶은 경우가 있다. default 로는 아래처럼 data label이 보이지 않다가 마우스가 hover 되었을 때 그래프 위에 툴팁으로 뜬다. 만약 위와 달리 아래처럼 hover 없이도 dat..

나는 지금 Springboot+react환경에서 프론트엔드를 맡아 졸업 프로젝트를 진행 중이다. 전부터 프로젝트 진행 시 react에서 useState hook을 사용할 때, 하위 컴포넌트가 state를 사용하기 위해서는 해당 state가 쓰이지 않는 중간 컴포넌트에도 state를 전달해야하는 방식이 정말 비효율적이라는 생각이 들었다. 이 점을 해결하고자 검색해봤을 때, 이름만 알고 있었던 'Redux'가 바로 그 역할을 한다는 것을 깨달았다. 개발을 직접 해보니 왜 써야하는지 이유를 스스로 체감하게 되는 것 같다. Redux 1. store - 전역에서 state를 관리해주는 공간으로 객체 형태이다. 2. action - 상태 변화를 일으키는 주체이다. - 객체 형태이고 타입이라는 것이 필수로 들어간다..

react+typescript 환경에서 최근 업데이트 된 react-router-dom의 v6를 이용하여 프로젝트의 생성, 페이지 라우팅 그리고 nav bar 구성까지의 과정이다. React+TypeScript 로 개발 시작하기 https://mingmeng030.tistory.com/224 [TypeScript] React+TypeScript 로 개발 시작하기 1. [react+typescript project 생성] npx create-react-app [프로젝트명] --template typescript 2. 함수형 컴포넌트 작성 방법 - `type Image`와 `interface ListProps`와 같이 컴포넌트의 props 타입을 명시하여.. mingmeng030.tistory.com rea..