프로젝트 (5) 썸네일형 리스트형 Step4. useReducer, edit, reset, checkMessage 지난번 check리스트 ✔️ 시작 날짜는 가져오지만, 수정은 못하게 하기... ✔️ reset 버튼 만들기 ✔️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기 ◻️ 30일 지났을 때 종료창 만들기 1. useReducer 관리할 state가 많아질 땐 useReducer를 사용하는 편이 좋다고 해서 사용해 봤다. 상태관리도 상태관리지만 개인적으론 action type을 정해서 state별로 관리하니깐 여기 저기 props로 안 해도 되고 좀 더 직관적이어서 더 편리했던거 같다. 아 근데 엄청 삽질했다. react는 불변성이 엄청 중요한데... switch문 쓸 때 ...state, 하나 빠뜨려서...........undefined투성이었지.... 초기 상태를 설정해준다. use.. step3. Cell Table + Counter 1. Cell click 이벤트 cell Component에서 Toggle기능을 구현했다. Cell을 클릭하면 done의 상태를 바꿔주고 App Component로 전달한다. const Cell = memo(({ days, onCountCell }) => { const [done, setDone] = useState(false); const onClickCircle = () => { setDone(prev => !prev) onCountCell(done); }; return ( {days} ) }); App 컴포넌트에서는 받아온 done을 가지고 counter 기능을 구현한다. 조건에 맞으면 대시보드의 카운터가 1씩 증가하고, 아니면 경고창이 뜨고, 확인을 누르면 카운터가 1 감소하면서 색도 지워진다. .. step2. Modal + Form 오랜만에 하려니깐 흐름이 끊겨서 거의 다시 했다. 일단 class를 hooks로 바꿨고, github가 자꾸 오류나서 레파지토리도 새로 만들었다. 오늘은 Modal창과 Form을 위주로 만들었다. 1. 초기화면의 Add버튼을 누르면 항목을 입력할 수 있는 모달창이 화면에 나타난다. 2. 목표를 입력하고 3. 시작 날짜를 설정한다. 도전 종료일을 계산해서 알려준다. 4. 동기부여 메세지를 작성한다. 5. 그리고 제출한다. 만약 목표가 작성되 있지 않으면 안내 메세지가 뜬다. 6. 보드의 왼편에 입력한 내용과 현재상황을 보여주는 대시보드가 화면에 나타난다. 구현하기 어려웠던 것 😵😵 챌린지 수정하기 -> 아직도 못함 시작 날짜 설정 후 도전 종료일 계산 const getToday = () => { let t.. step1. Main 오늘의 결과물 ✨ 1. create-react-app 설치 yarn create react-app 30days-challenge 2. styled-components react에서 컴포넌트에 CSS를 적용시키는 방법은 다양했다. 보통은 html, css, js 파일을 분리해서 작성하지만 react CSS-in-JS 관련 라이브러리인 styled-components를 사용해보고 싶어서 블로그랑 노마드 코더 유튜브 강의 보고 대충 사용법을 익혔다. 보고 따라하면 이해가 되는 듯 싶다가도 막상 직접 하려니깐 막막했다. 그래도 구글링 하고, 어제 본 코드 다시 보고 공식 문서도 보면서 하니깐 왜 쓰는지 정도는 조금 알거 같은..? 결국은 보여지는게 중요하니깐 css관리하는게 중요한데, 하나의 컴포넌트 파일안에 .. intro_ 30days 어제의 습관이 오늘의 나를 만들었듯이 오늘의 습관이 10년 후 나를 만든다는 말이 있지... 그래서 만들어 보려고 하는 30days 챌린지! 일단 디자인 초안까지는 만들었는데 좀 더 디테일한 작업이 필요할 거 같다. ** 만들면서 추가, 필요한 기능 #1 + 버튼을 클릭해서 새로운 도전을 추가한다. #2 모달 창이 열리고 입력 폼이 나타난다. Close 버튼 추가 ** 입력 폼 내용 목표 시작하는 날 설정 + 자동으로 30일 후가 계산되어 끝나는 날이 설정 기본은 오늘 날짜가 설정되어 있다 → 오늘 날짜를 가져와서 value로 지정. ** 날짜를 설정하면 설정된 날짜를 가져와서 30일 후 날짜를 계산한 결과를 반환 ** 동기부여를 위한 나에게 보내는 메세지 작성 goal이 입력되지 않았을 때 → 목표를 .. 이전 1 다음
