🤔 문제 발생 최종 프로젝트를 진행할때는 몰랐는데 지금 와서 리팩토링을 하다보니 사용성에 있어서 아쉬운 점이 보였다. 바로 탄소 배출량 계산 히스토리 부분이다.여기에는 여러 작고 큰 문제들이 보이기 시작했다.    일단 몇가지 큰 오류가 있는데 1. 로딩화면맨 처음 나오는 로딩화면은 훨씬 길다(캡쳐 시 크롭).  2. 로딩 후 화면 이동로딩 후 화면 이동 시 데이터가 제대로 들어가지 않고 순차적으로 들어오는 것을 볼 수 있다.나는 분명 `Promise.all`을 이용해서 모든 데이터들을 묶어줬는데 왜 그런걸까.. 3. 화면 재로딩 크롬에서 탭을 통해 다른 곳으로 이동했다 오면 다시 로딩이 된다. 그럼 위의 로직을 다시 타게 된다.   💻 기존 코드const ResultPageMain = () => ..

작업 내용  대부분의 페이지에서 아래와 같이 타이틀과 서브 타이틀이 사용되고 있다.  그래서 HeaderTitle.tsx 라는 컴포넌트를 만들어 리팩토링 하기로 결정!!// HeaderTitle.tsxinterface HeaderTitleProps { title: string; subTitle?: string; description: string; titleSize?: string; // 기본값을 설정할 수 있도록 optional로 설정 descriptionSize?: string;}const HeaderTitle: React.FC = ({ title, description,}) => { return ( {title} {des..

이번 팀 프로젝트를 진행하면서 가장 아쉬웠던 부분 중 하나는 컴포넌트를 제대로 나누지 못한 부분이다.그래서 한 페이지의 코드가 300줄이나 되는 대참사가 생겨버렸다.. 가독성이 조금 아쉽다는 생각??(애초에 코드 한 줄의 길이를 80으로 제한하고 작업을 하긴 했지만..ㅎㅎ ) 그래서 전체적으로 일단 내가 담당한 탄소 계산기 부분을 컴포넌트화 시키는 작업을 진행 중이고이번에 적은 내용은 props와 관련된 내용이다.  처음 코드//calculator > result > [year] > [month] > Page.tsx > ResultPage ...  ResultPage에서 CarbonEmissionCard 라는 컴포넌트를 하나하나 작성을 했었다.총 5개의 카드가 있었는데 props로 넘겨주는 ..

문자열 (함수)에 대한 Type 정의  리팩토리를 하는 동안 set함수를 props로 보내야하는 일이 생겼고 그로 인해 추가로 Type 설정이 필요했다.// Page.tsx (부모)... const [fuelType, setFuelType] = useState(""); // 연료 타입 상태 추가... // InputField.tsxconst InputField: React.FC = ({ id, label, register, errors, requiredMessage, placeholder, unit, fuelType, setFuelType ... // type 지정 export interface InputFieldProps { id: keyof FormData; label..

이번 최종 프로젝트에서 많은 고민을 하는 부분이 있다면 재사용성을 위한 컴포넌트 분리였다. 그리고 작업을 하는 도중 컴포넌트로 만든 InputField에서 문제가 조금 생겼다.처음에는 InputField 컴포넌트 하나로 작업이 가능했다. 하지만 라디오 버튼이 추가된 파트가 추가가 되었다. (왼쪽의 UI에서 오른쪽의 UI로 변경을 해야했다. 참고로 5개의 input창 중에서 유일하게 자가용만 라디오 버튼이 있다)   1. 처음 시도한 방법 : 문제점 발견기존 방식과 문제점 초기 작업 방식은 특수한 상황마다 컴포넌트를 나누어 관리하는 것이었다.예를 들어, 차량 정보를 위한 `InputFieldForCar`와 일반적인 정보 입력을 위한 `InputField` 두 개의 컴포넌트를 분리해서 사용을 했다.이 방법의..

내 개인적으로 이번 프로젝트에서 중요시 생각하며 진행하고 있는 부분은 컴포넌트화였다.재사용성에 있어서 중요하기도 했지만 이번 기회에 컴포넌트에 대해서 더 진하게 공부하며 진행해 보고 싶었기 때문이다. 그러다보니 기능을 구현을 해놓고도 리팩토링을 해야하는 경우가 자주 생겼다.이번 작업에도 통계를 보여주는 페이지를 `ResultComponent`로 컴포넌트화 시킨 후 `ResultHistory` 페이지에서 보여지게 작업을 리팩토링 하는 과정에서 문제가 생겼었다. 파일 및 함수 정리`ResultComponent` : 통계를 보여주는 컴포넌트`ResultHistory` : 통계 히스토리 페이지`loadUserAndRetchData` : 유저의 통계 데이터를 받아오는 함수  처음에 작업한 방법// ResultHi..

데이터 시각화는 데이터를 이해하고 분석하는데 중요한 역할을 하게 된다.내가 담당한 탄소 계산기의 경우 이러한 데이터 시각화가 매우 중요한 파트라는 생각이 들었다.직접 구현을 해볼까 아니면 라이브러리를 사용해볼까 고민을 하다가 시간적인 여유가 부족했기도 했고, 시각화에 대한 부분은 아무래도 라이브러리가 더 잘 되어있을 것이기에 이번 기회에 캠프 기간 잘 사용해보지 않았던 라이브러리를 사용해보기로 했다.  1. 리액트 기반 차트 라이브러리 비교인기가 많은 몇가지 무료 차트 라이브러리를 보았었다. Recharts :- 웹 개발자가 가장 많이 사용하는 차트 라이브러리 중 하나- 적당한 커스텀이 가능- 모든 차트 유형을 제공하지는 않음- 사용이 비교적 쉽고 간단 React-chartjs-2- 혼합 차트 구성 가능..

내가 담당하게 된 탄소계산기 부분에는 연도와 달을 선택할 수 있는 셀렉박스가 존재한다.디자이너분과 소통을 통해 알게 되었는데, 기존 우리가 알던 년도 따로 달 따로 존재한다기보단 버튼을 누르면 연도와 달의 리스트가 같이 나오고 연도와 달 모두 선택했을 시에 리스트가 닫힌다고 한다.    다른 페이지에서도 사용이 될 예정이라 처음부터 컴포넌트화 시켜서 작업을 하기로 했다.   1. 컴포넌트 사용const [thisYear, setThisYear] = useState(currentYear);const [thisMonth, setThisMonth] = useState(currentMonth);const handleYearChange = (year: number) => { setThisYear(year);..