토이 프로젝트/TodoList8 TodoList 만들기 (8) 배포 배포완료! https://todolist-75cfc.web.app/ TodoList todolist-75cfc.web.app 테스트용 계정 ID : kim@google.com password : qwe123 수정 모드 추가 과제 제출하려고 보니 수정기능이 없다는 것을 깨닫고 수정기능을 부랴부랴 추가해보았다. 처음에는 리스트를 클릭하면 input창이 나오도록 해볼까 했는데 list의 길이가 길어지면 한줄로 보는게 불편할거 같았다. 그래서 수정 버튼을 클릭하면 list를 수정할 수 있는 textarea가 modal창으로 뜨도록 만들어보았다. modal 창은 이전에 쓰던것과 비슷하게 만들고, modal component에 textarea와 수정하기 버튼을 넣었다. input 태그를 쓰니 한줄로 쫙~~~~~ 나.. 2023. 4. 11. TodoList 만들기(7) 사용자에 맞게 데이터 저장하기 구현 회원가입, 로그인까지는 구현을 완료했고, 다음으로는 사용자에 맞게 데이터를 저장할 수 있도록 데이터베이스에서의 Collection과 Docs의 이름을 지어주는 작업을 했다. 작성한TodoList를 사용자의 uid를 컬렉션이름으로하고, 오늘 날짜를 Docs의 이름으로 데이터를 저장하도록 했다. 로그인이 되어있는 상태에서 완료 버튼을 누르면 새로운 객체에 todolist와 memo를 저장해서 FireStore에 저장하도록 코드를 작성했다. 데이터베이스에 저장은 FireStore에서 지원하는 setDoc 함수를 사용했다. 데이터 저장이 성공하면 Modal창으로 데이터가 잘 들어갔다는 문구를 보여주고 로컬 스토리지에 저장되어 있던 오늘자 todolist를 지워준다. 그리고 1.. 2023. 4. 5. TodoList 만들기(6) 이전에 연습했던 Firestore에 데이터 저장하고 꺼내오기 기능과 회원가입, 로그인 기능을 TodoList 에 구현해 보기로 했다. 데이터 저장 일단은 todolist를 작성하면 로컬 스토리지에 저장하는 기능까지 만들었었는데 이제 로컬 스토리지에 저장된 오늘자 todolist를 정산페이지에 렌더링이 되도록 코드를 작성해보았다. 오늘 날짜를 key로 로컬 스토리지에 저장해놓았기 때문에 꺼내오는 것 부터 시작했다. 로컬 스토리지에 오늘자 데이터가 있으면 꺼내오고, 아니면 빈배열을 할당해준다. 그리고 todayConfirmList를 map으로 렌더링 해주면 된다. 각각의 list들은 다음과 같은 형태를 가지고있는데, 체크박스를 체크하면 done 프로퍼티가 true가 되도록 해주었다. 오늘 한 일을 체크하고 .. 2023. 3. 31. TodoList 만들기(5) 이번에는 디자인....을 조금 수정해봤다. 디자인이 항상 힘든거 같은데 이번에는 어울리는 색을 찾아서 색깔 위주로 바꿔보았다. https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co 위 사이트를 참고해서 색깔을 넣어봤는데, 뭔가 좀 이상한거 같기도 하고 괜찮은거 같기도 하고 그렇다. 캐릭터는 라이언을 넣고싶었는데 저작권 문제가 있을까봐 저작권 문제없는 적당한 캐릭터를 찾아서 넣었다. 컨텐츠를 넣.. 2023. 3. 28. TodoList 만들기(4) 이제야 드디어.. CRUD를 구현해보기로 했다. 일단 할 일 추가 페이지에 오늘날짜가 있으면 좋을 거 같아서 간단하게 추가해봤다. format 함수는 date-fns 라이브러리에서 지원하는 함수이다. Create input 창에 오늘 할 일을 입력하고 + 버튼을 누르면 아래에 list로 추가되도록 Create 기능을 만들어봤다. + 버튼을 누르면 위의 함수가 작동한다. format 태그 내부의 버튼이기 때문에 리렌더링을 막기 위해 preventDefault 메서드를 사용했다. 내용이 없을때는 작동하지 않도록 조건문을 넣었고, 내용이 있으면 해당 text를 setTodayList라는 reducer를 적용하여 dispatch 함수로 store로 보내준다. setTodayList reducer는 받은 text.. 2023. 3. 25. TodoList 만들기(3) 달력 만들기 date-fns라는 라이브러리의 도움을 받아서 History탭에 넣을 달력을 만들어보았다. Calender 라는 컴포넌트안에 크게 Header, Week, Days 로 나누어서 컴포넌트를 만들어 보았다. curMonth라는, 현재 보고있는 달의 상태를 저장할 변수를 만들고, 이 상태를 변경할 함수를 만든다. subMonths와 addMonths 함수는 date-fns 에서 지원하는 함수이다. Header Header에는 년도, 월, 화살표만 들어가면 된다. format 함수 역시 date-fns에서 지원하는 함수로 특정 날짜를 넣으면 형식에 맞게(yyyy는 2023, M은 3 이런식으로) 렌더링해준다. 각각의 화살표에는 onClick 이벤트로 이전에 만들어둔 prevMonth, nextMon.. 2023. 3. 22. 이전 1 2 다음
