Project🛠️⚙️

[React/TypeScript] Input의 event.target.value을 string이 아닌 특정 타입으로 명시할 수 있을까?

안녕하세요. 캡스톤 프로젝트 중 경험한 Trouble Shooting을 공유해보고자 글을 작성하게 되었습니다! 다들 구글 폼, 네이버 폼과 같은 서비스를 많이 이용해보셨을까요?현재 진행 중인 캡스톤 프로젝트에서 학생들에게 행사 참여 신청를 받기 위한 폼 (설문) 서비스를 제공하기 위해, 폼 생성 페이지를 직접 만들게 되었는데요.폼 생성 페이지에서는 많은 이벤트들(추가, 삭제, 수정 등)이 이루어지므로, 이에 따라 여러 Input 컴포넌트들의 상태를 업데이트해줘야 해서 신경 쓸 부분이 많은 페이지라 볼 수 있습니다. 타입스크립트까지 이용한다면 Type Guard까지 신경써줘야 하는데요🥲    폼 생성 페이지에서는 useState로 관리되는 questionList를 맵핑하여 질문 박스 컴포넌트들을 렌더링합..

[Project/ReactTS] Chart.js로 원형 차트(Doughnut Chart) 구현

아래와 동일하게 원형 차트를 구현하고자 한다. Setting npm install chartjs npm install --save chart.js react-chartjs-2 chartjs 라이브러리를 설치한다 기본적인 DoughnutChart 컴포넌트 작성 일단 정적 데이터를 기반으로 차트를 그려봤다. 차트 컴포넌트는 'data' props를 필수적으로 포함해야 한다. 차트에 필요한 데이터는 string 배열 'labels'와 number 배열 'data'이다. 아래 예시는 ['가','나','다','라','마'] 와 [1,2,3,4,5] 로 데이터를 설정하였다. DoughnutChart.tsx import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.j..

[Project/ReactTS] 재사용되는 게시판 레이아웃 내 컨텐츠를 페이지별로 다르게 나타내기⚒️

리뉴얼될 총학생회 사이트는 회칙, 공지, 청원 페이지 등의 게시판 글 목록을 같은 레이아웃으로 Infinite Scroll하여 나타낸다. 이 페이지들은 레이아웃은 같아도 목록을 구성하는 컨텐츠가 각각 다르기 때문에 이를 어떻게 구현할지 고민하게 되었다.예전 같았으면 새로운 페이지를 작성할 때마다 기존 레이아웃의 코드를 복사 붙여넣기하여 몇몇 부분을 수정하였겠지만, 이번 프로젝트에서는 Atomic Pattern을 도입하기로 하여 개선해보기로 하였다!또한 이전 총학생회 사이트에서는 페이지마다 중복되는 함수들(axios(),useState()...)이 많아 수정사항이 있으면 페이지별마다 모두 바꿔야 했던 게 불편해서 이 점을 꼭 고치고 싶었다.그래서 이번에는 마음 먹고 새로운 페이지를 작성할 때 기존 레이아웃..