토이 프로젝트29 Next.js project - 서울시 문화행사 정보 이전에 React로 만들다가 말았던 프로젝트를 Next.js로 다시 만들어보기로 했다. https://riverpigeon.tistory.com/142 React로 웹페이지 만들기 - 서울시 문화행사(1) 지금 까지 배운 여러가지 내용을 바탕으로 웹페이지를 만들어 보기로 했다. React를 사용해서 다른 곳에서 정보를 받아서 웹페이지를 만들어 보려고 오픈 API를 뒤적이다가 적당한 소재를 찾았다. riverpigeon.tistory.com 만들던 과정에서 부트캠프 과제로 todolist를 만들다가 이것저것 기능을 추가하다보니 길어졌고, todolist 만들기를 끝내니 바로 그룹 프로젝트를 시작해버려서 중간에 그만둔채로 4달동안 방치되어있었다... 다시 처음부터 만들려는 이유 다시 프로젝트를 뜯어보니 약간.. 2023. 7. 22. 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. 이전 1 2 3 4 5 다음
