누구나 다하는 TodoList만들기
🙈 그렇다...누구나 다 만드는 TodoList를 통해 학습을 한 것을
통한 창작을 해볼 것이다.
이전 게시물에서 말한 것과 같이 바닐라Js를 가지고 TodoList 를
만들어보고 그 것을 가지고 리액트에서 어떻게 만드는지 어떻게 바꿀수
있는지 확인해보고 오류와 여러가지 라이브러리? (여러가지가 아닐 수도 있다)를 알아보자!!
UserInfo
User Info 의 화면입니다.
우리는 앞으로 이런 화면을 만들게 될 것입니다.
기능구현을 해야할 것은?
- 이미지를 클릭하게 되면 이미지 변경이 가능해야한다.
- 이미지를 업데이트 해도 이미지가 바로 화면에 보여야 한다.
- About me 와 Self Introduction 옆의 edit아이콘을
누르지 않으면 작성이 불가 해야한다.- 반대로 edit 버튼을 누를 경우 수정이 가능해야한다.
일단 User Info의 기능으로는 4가지정도 볼 수 있을 것 같습니다.
기능이라고 하기엔 좀 그렇지만 기능은 네가지정도로 생각하고
시작을 하는 것으로 하겠습니다.
Side bar
그리고 사이드바가 토글버튼을 누를경우 슬라이드 되어 나와야합니다
사이드바에 관한 기능을 알아보겠습니다.
- 토글버튼을 누르게 되면 슬라이드처럼 스르륵 나와야한다!
- 각각의 메뉴버튼을 누를경우 해당 페이지를 보여줘야한다.
- 해당페이지로 넘어갈 때 슬라이드가 닫히면서 바뀌어야한다.
위의 그림에서 볼 수 있듯이 이제 남은 페이지는
TodoList 페이지 입니다!
TodoList
가장 기능 구현이라면 구현인 로직이 많은 페이지가
TodoList 페이지가 아닐까 싶습니다.
이 곳에서 이루어질 기능들을 나열해보도록 하겠습니다.
- 위의 인풋창에 입력값을 넣고 엔터나 플러스 버튼에 클릭을 할 경우 해당 글이 투두 리스트로 나와야합니다.
- 투두리스트에 있는 쓰레기통 이모지를 누를경우 삭제되어야합니다.
- 투두리스트에 있는 edit 이모지를 누를 경우 수정할 수 있어야 합니다.
- 해당 이모지들을 누를 경우 Modal 창을 따로 띄워 제어할 생각입니다.
마치며..
우리가 만들 것은 세개의 화면 요소입니다.
사이드바와 todolist, userInfo
일단은 페이지에 대한 개념은 없다고 생각을 하고
index 에 모든 요소를 넣고 바닐라 js 를 통해
어떤 방식의 버튼이 클릭이 될 경우 사라지고 나타나는
그런 식으로 화면을 구성해보도록 하겠습니다.
백엔드 개발자 준비중