티스토리

Heodang's 지식보관소

검색하기

블로그 홈

Heodang's 지식보관소

heodang-repository.tistory.com/m

hi_kmin6 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

React - To Do Item의 hover 의사클래스와 word-break, scrollbar 오늘은 ToDoItem의 CSS를 마무리 지은 것 같습니다. 처음에는 오늘 진행할 작업들을 JavaScript를 사용해서 class를 추가하고 빼는 방법밖에 몰라 CSS 작업에서 다루지 않았습니다. 하지만 작업을 진행하며 hover라는 CSS의 의사 클래스(psuedo-class)를 알게 됐고 간단히 처리할 수 있어 어제와 같이 기분 좋게 작업을 진행했습니다. 먼저 오늘의 작업 결과 화면 입니다. 보시는 것과 같이 이제 ToDoItem들은 마우스가 해당 Component위에 있을 시에만 배경색이 흰색이 되며, 삭제와 완료 버튼이 등장하게 됩니다. 또한 오늘 작업을 하면서 발견한 부분인데, Input의 길이가 길면 저는 할당된 길이를 유지하며 문장이 아래로 나 위어 보일 줄 알았지만 그렇지 않았습니다. 그.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 2020. 3. 16.
React - CSS작업 오늘은 기존에 작업을 하던 ToDo List React App에 CSS작업을 해보았습니다. 바로 결과 화면을 보여드리겠습니다. 디자인 센스가 없어 일단 색 테마는 인스타그램의 AwesomeColor 님 게시물에서 가져와서 나름대로 채도 조절을 하여 진행해보았습니다. CSS를 적용하면서 추후에 넣을 기능들을 고려하여 추가하기도 하고, 변경하기도 한 부분이 많아졌습니다. 제 GitHub에 모두 올려 두었으니 시간을 절약하고자 하신다면 참고하셔서 본인의 기호대로 재정의 하시는 것도 좋을 것 같습니다. 기능적으로 추가한 것은 ToDoTemplate에서 할 일을 입력받기 위해서 input tag를 사용하였는데, '오늘의 할 일'이라는 placeholder가 입력이 있기 전까진 사라지지 않았습니다. 그래서 저는 i.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 2020. 3. 12.
React - To Do Item 추가 기능 오늘은 지난 글에 추가했던 ToDoTemplate에 할 일을 작성하고 입력하면 화면에 다시 보여 주도록 하는 기능을 넣어봤습니다. 작업을 위해서 사용하는 것은 LocalStorage입니다. Chrome 브라우저를 사용하고 있기 떄문에 Chrome브라우저를 기준으로 설명하겠습니다. 만들고 있는 react App을 실행 시켜 해당 페이지에서 키보드의 [F12] 혹은 상단 툴바의 Toggle버튼을 눌러 [도구 더보기 ▶ 개발자 도구]를 눌러보겠습니다. 그럼 위와 같이 개발자 도구가 나오며, Elements가 써있는 탭에서 Application을 눌러 LocalStorage를 확인해보겠습니다. Application을 누른 뒤 왼쪽 영역에 [Storage ▶ LocaStorage ▶ http://localhost.. 공감수 0 댓글수 0 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 함수입니다. 위의 함수는 입력값을 바꾸려고 하지 않고 항상 변화를 주지 않은 입력값에 대해서 결과를 반환하기에, "순수 함수"라 칭합니다. 여기서.. 공감수 0 댓글수 0 2020. 3. 9.
React - 시계 Component 추가 오늘은 간단하게 React 기본 내용 복습 겸 어떤 기능들을 넣어 볼지 생각을 해봤습니다. # 오늘의 React 개념 사항 1. Component "함수 혹은 Class의 형태로 HTML을 반환하는 것." Component는 React App을 만들게 되면 항상 만들게 될 React의 기본 단위입니다. 기본적으로 Component라 함은 내부적 작업을 거쳐서 HTML을 반환하는 것으로 이해됩니다. Component는 function단위, 혹은 class 단위로 작성 가능합니다. 브라우저를 통해서 볼 수 있는 결과물들은 각각의 요소 하나하나가 Component로 이루어져 있습니다. 2. JSX "JavaScript와 HTML의 결합물" 대부분이 JavaScript의 개념에 의존해서 쓰이는 React이지만,.. 공감수 0 댓글수 0 2020. 3. 5.
React - React App 만들기&비우기 이번 글은 React 프로젝트를 처음으로 만들고 프로젝트를 시작하기 좋게 백지화시키는 작업을 해보겠습니다. 먼저 cmd를 켜고 원하는 디렉터리 경로에서 다음의 코드를 입력해서 프로젝트를 생성하겠습니다. npx create-react-app [AppName] 위의 코드를 입력하면 npm을 통해 필요한 패키지들을 설치하며 프로젝트를 생성합니다. 텍스트 편집기로 VisualStudio Code를 사용하고 있어 다음의 코드를 입력해 VSCode를 실행시키겠습니다. code my_day 생성된 React app을 실행시켜 보겠습니다. VSCode내에서 터미널을 사용할 수 있기때문에 그걸 이용하겠습니다. 프로젝트의 경로에서 다음의 코드를 입력합니다. npm start 터미널에서 성공적으로 컴파일을 진행한 뒤, 2개.. 공감수 1 댓글수 0 2020. 3. 4.
React - 사전 준비 React React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org 리액트에 관한 글 작성을 시작하겠습니다. https://academy.nomadcoders.co/ Academy % Complete academy.nomadcoders.co 위의 NomadCoders에서 제가 수강한 'ReactJS로 웹 서비스 만들기'를 바탕으로 React글을 작성할 계획입니다. 무료 강의임에도 불구하고 배워가는 것이 많았습니다. 해당 카테고리의 글들은 배운 내용의 단순 정리가 아닌 To Do List 서비스를 만들어보며 정리해나갈 생각입니다. 이번 글은 React.. 공감수 0 댓글수 0 2020. 2. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.