[WEB]/React9 React - To Do Item의 hover 의사클래스와 word-break, scrollbar 오늘은 ToDoItem의 CSS를 마무리 지은 것 같습니다. 처음에는 오늘 진행할 작업들을 JavaScript를 사용해서 class를 추가하고 빼는 방법밖에 몰라 CSS 작업에서 다루지 않았습니다. 하지만 작업을 진행하며 hover라는 CSS의 의사 클래스(psuedo-class)를 알게 됐고 간단히 처리할 수 있어 어제와 같이 기분 좋게 작업을 진행했습니다. 먼저 오늘의 작업 결과 화면 입니다. 보시는 것과 같이 이제 ToDoItem들은 마우스가 해당 Component위에 있을 시에만 배경색이 흰색이 되며, 삭제와 완료 버튼이 등장하게 됩니다. 또한 오늘 작업을 하면서 발견한 부분인데, Input의 길이가 길면 저는 할당된 길이를 유지하며 문장이 아래로 나 위어 보일 줄 알았지만 그렇지 않았습니다. 그.. 2020. 3. 17. React - ToDoItem Check 기능 추가 이번 글에선 ToDoList에서 필수적인 기능인 Check기능을 추가해 보았습니다. ToDo Item 각각마다 있는 ✔을 누르면 check의 상태가 false인 경우, Text의 색은 회색이 되며 가운데 줄이 쳐지게 됩니다.또한 저장소의 내용은 false에서 true로 변경됩니다. true인경우에는 본래 아이템을 추가할 때의 상태처럼 되돌아 갑니다. 바로 기능이 적용된 모습을 보여드리겠습니다. localStorage의 상태와 같이 비교하신다면 Work1,3,4는 checked라는 키값이 true인걸 볼 수 있습니다. 그에 따라 글씨의 색은 회색, 그리고 가운데에 취소선이 추가된 것을 볼 수 있습니다. # 오늘의 작업 ToDoItem.css .checked { color: grey; text-decorat.. 2020. 3. 16. React - CSS작업 오늘은 기존에 작업을 하던 ToDo List React App에 CSS작업을 해보았습니다. 바로 결과 화면을 보여드리겠습니다. 디자인 센스가 없어 일단 색 테마는 인스타그램의 AwesomeColor 님 게시물에서 가져와서 나름대로 채도 조절을 하여 진행해보았습니다. CSS를 적용하면서 추후에 넣을 기능들을 고려하여 추가하기도 하고, 변경하기도 한 부분이 많아졌습니다. 제 GitHub에 모두 올려 두었으니 시간을 절약하고자 하신다면 참고하셔서 본인의 기호대로 재정의 하시는 것도 좋을 것 같습니다. 기능적으로 추가한 것은 ToDoTemplate에서 할 일을 입력받기 위해서 input tag를 사용하였는데, '오늘의 할 일'이라는 placeholder가 입력이 있기 전까진 사라지지 않았습니다. 그래서 저는 i.. 2020. 3. 16. React - To Do Item 삭제 오늘은 지난 글에 이어서 To Do Item을 삭제하는 기능을 추가해보았습니다. 일단 지난 글에서 추가한 부분에 오타가 있었습니다. 오타 수정 및 삭제하는 기능을 넣은 코드 먼저 보이고 그다음 시행착오들을 적어보겠습니다. # 오늘의 작업 ToDoTemplate.js import React from "react"; import ToDoItem from "./ToDoItem"; class ToDoTemplate extends React.Component { toDoList = []; constructor(props) { super(props); this.toDoList = JSON.parse(localStorage.getItem("toDoList")) || []; // localStorage에서 toDoLi.. 2020. 3. 12. 이전 1 2 3 다음
