[WEB]15 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. React - To Do Item 추가 기능 오늘은 지난 글에 추가했던 ToDoTemplate에 할 일을 작성하고 입력하면 화면에 다시 보여 주도록 하는 기능을 넣어봤습니다. 작업을 위해서 사용하는 것은 LocalStorage입니다. Chrome 브라우저를 사용하고 있기 떄문에 Chrome브라우저를 기준으로 설명하겠습니다. 만들고 있는 react App을 실행 시켜 해당 페이지에서 키보드의 [F12] 혹은 상단 툴바의 Toggle버튼을 눌러 [도구 더보기 ▶ 개발자 도구]를 눌러보겠습니다. 그럼 위와 같이 개발자 도구가 나오며, Elements가 써있는 탭에서 Application을 눌러 LocalStorage를 확인해보겠습니다. Application을 누른 뒤 왼쪽 영역에 [Storage ▶ LocaStorage ▶ http://localhost.. 2020. 3. 11. React - ToDoTemplate Component 추가 오늘은 ToDoList Component를 만들어 보았습니다. 할 일을 추가하는 form과 input, 그리고 작성된 할 일들을 보여줄 개별 item component로 구성되어 있습니다. # 오늘의 개념 사항 1. Props & State "정적인 데이터 Props, 동적인 데이터 State" Props는 정적인 데이터, 즉 컴포넌트에서 사용하는 데이터 중에서 변동되지 않는 데이터를 다룰 때 사용되는 것입니다. React에서 제공하는 예시를 보겠습니다. function sum(a, b) { return a + b; } 위의 예시는 일반적인 JavaScript 함수입니다. 위의 함수는 입력값을 바꾸려고 하지 않고 항상 변화를 주지 않은 입력값에 대해서 결과를 반환하기에, "순수 함수"라 칭합니다. 여기서.. 2020. 3. 9. 이전 1 2 3 4 다음
