How much is your life?는 하룻동안 생산적으로 보낸 시간을 기록하여 금액으로 환산해주는 애플리케이션이다. 생산적인 일을 한 만큼 미래에 보상을 받을 수 있고, 이 보상은 2023년 최저시급인 9,620원으로 계산한다.
당신은 오늘 얼마짜리 삶을 살았나요?
저는 아르바이트를 하면서 'x시간만 견디면 xxxx원이 내 통장에 들어온다...' 라고 생각하며 견딘 적 있다. 하지만 아르바이트 외에 다른 생산적인 일을 할 때는 즉시 댓가를 얻지 못하기 때문에 행동이 느슨해지는 경우를 많이 겪었다.
문득, 하룻동안 생산적으로 살아온 시간을 돈으로 계산하면 얼마일까? 내가 지금 시간을 많이 투자한 만큼 미래에 나에 대한 경제적인 가치가 올라가지 않을까? 떠올리게 되었다.
강의를 통해 배웠던 리스트에 입력 데이터를 추가, 삭제, 수정하는 과정을 복습하고자 하였다.
앱을 시작하고 한 일을 입력한다.
저장된 한 일은 목록과 타임 테이블, 최종 환산에 적용된다.
목록을 클릭해 한 일의 정보를 수정한다.
목록을 클릭해 한 일을 삭제한다.
how-much-is-your-life.vercel.app
For building and running the application you need:
git clone https://github.com/YeonsuBaek/how-much-is-your-life.git
npm install
npm start
전에 블로그에 Portal 사용하는 이유와 방법에 대해 포스팅한 적 있다. 이론으로만 접했던 Portal을 처음으로 프로젝트에 적용해보았다.
시간이 겹치면 경고 메세지를 보여준다.
수정 버튼을 누르면 수정 창이 뜬다.
평소 10분 단위로 플래너 정리하는 것을 좋아해서 꼭 구현해보고 싶은 기능이었다. 그러다 프로그래머스 대실 문제를 접하고 배열을 사용하면 되겠다고 영감을 받았다.
const [timetable, setTimetable] = useState(
new Array(24).fill(new Array(6).fill(false))
);
const fillTimetable = (startH, startM, endH, endM) => {
setTimetable(
timetable.map((hour, hIndex) =>
hour.map((minute, mIndex) => {
if (hIndex >= startH && hIndex <= endH) {
const firstM = hIndex === +startH ? startM : 0;
const lastM = hIndex === +endH ? endM : 59;
return mIndex * 10 >= firstM && mIndex * 10 < lastM ? true : minute;
} else return minute;
})
)
);
};타임 테이블은 가로 6칸(60분), 세로 24칸(24시간)으로 구성되고 한 일로 저장된 시간이 해당되는 칸에 true로 표시한다.
{
timetable.map((time, hour) => {
return (
<tr key={hour}>
<td>{hour}</td>
<td className={time[0] ? 'checkedTime' : ''}></td>
<td className={time[1] ? 'checkedTime' : ''}></td>
<td className={time[2] ? 'checkedTime' : ''}></td>
<td className={time[3] ? 'checkedTime' : ''}></td>
<td className={time[4] ? 'checkedTime' : ''}></td>
<td className={time[5] ? 'checkedTime' : ''}></td>
</tr>
);
});
}map으로 매시간마다 줄바꿈을 하고, true인 시간에 checkedTime 클래스로 색을 채운다.
map을 사용해 복잡한 2차원 배열의 값을 수정하고 리스트로 정렬하는 방법을 배우게 되었다.
UI라는 폴더를 만들어 공통된 스타일을 가진 요소들을 컴포넌트로 분리하였다. 이렇게 하면 스타일을 변경할 때 파일 하나만 수정하면 모두 적용되어 유지보수에 효과적이다.
나는 이렇게 리팩터링하는 과정에서 Sass가 떠올랐다. Sass에서는 mixin을 정의해 include를 이용해 재사용하였다.
여러 기능과 스타일을 넣다보니 코드가 길어져 나중에 알아보기 힘든 경우가 있다. 이번 프로젝트에서 컴포넌트를 리팩터링하고 한참 후 다시 코드를 봤을 때 더욱 읽기 쉬웠다. 앞으로도 유지보수와 내 코드를 읽을 다른 사람들을 위해 컴포넌트를 분리하는 습관을 가져야겠다.