패스트캠퍼스 부트캠프 7주차 3차 과제 완료

3차 과제도 무난하게 구현 하여 제출을 하였다. 3차 과제에서는 todo api를 사용하여 CRUD를 하는 거였는데 나는 노마드 코더를 공부 중에 있어서 거기에서 배우는 Momentum 컨셉으로 가면 어떨까 하는 생각에 같이 접목시켜서 구현을 하였다. 그냥 todo list만 하기에 뭔가 허전한 느낌이여서 단순 todo list이지만 실제로 사용 한다는 마음으로 열심히 한 것 같다.

참고로 디자인은 구글 모멘텀 사이트 가서 참고하여 만드셔야 합니다 노마드 코더에서는 디자인 까지 알려 주지 않습니다!

결과물 입니다.

📌 Momentum ToDo List

안녕하세요 모두의 희망 입니다. 이번에는 Momentum ToDo List라는 것을 만들어 보았습니다. 전체적으로 구글 Momentum의 깔끔한 디자인을 착안해서 최대한 비슷한 느낌으로 만들어 보았습니다.

이 프로젝트에는 로그인을 하면 현재 날씨와 위치 그리고 시간을 보여주고 있습니다.

또한 ToDo api와의 결합으로 할 일 목록을 추가 할 수가 있고 수정/삭제도 가능 합니다. 그리고 Sortable를 사용하여 마우스로 자유롭게 움직일수도 있습니다.

데모 사이트 : Momentum ToDo List

• Develop Period : 2023.01.20 ~ 2023.01.24

• Developer : whansoo

• Language : HTML, CSS, Javascript

• 목표 : 주어진 API를 활용해 서버에 저장되는 ToDo-List 구현

✨ 사이트 소개

✔️Momentum

1. 로그인 후 메인화면

• 지금 화면에는 보이지 않지만 새로고침이나 나갔다 들어오면 랜덤으로 배경 이미지가 바뀝니다.
• localstorage로 처음 로그인 한 아이디가 저장이 되어 whansoo라고 이름이 출력이 됩니다.
• weather api를 사용하여 현재 날씨와 위치를 나타나게 합니다.
• 현재 시각을 보이게 합니다.

✔️ToDo-List

2. ToDo-List 화면

• 최대한 배경화면이 보이게 todo list 디자인을 하였습니다.
• todo list 추가,수정,삭제가 가능합니다.
• todo api를 사용하여 서버에 내용이 저장이 됩니다.
• check box를 클릭하면 todo가 완료가 되어 완료된 목록으로 자동으로 이동이 됩니다.
• Sortable를 사용하여 마우스로 자유롭게 이동이 가능합니다.
• todo 버튼을 클릭하면 todo list가 보이고 다시 누르면 없어 집니다.

느낀점

공부 하면서 느낀 거지만 공부를 하면 할 수록 부족한 부분이 많이 느껴지고 기본기가 부족하다는 것을 느꼈습니다. 단순히 프로젝트의 기능만 구현하는게 아니라 시멘틱태그 준수, 크로스브라우징 고려, 성능 최적화 등 고도화에 좀더 공부하고 적용 해야 겠다고 생각이 들었습니다.