온풀투데이

투두리스트를 구현하기 위해 컴포넌트는 크게 다섯 부분으로 분리했다. 아래 App() 에서 반환하고 있는 컴포넌트를 살펴보면, 메인 템플렛 하위에 헤더, 필터, 캘린더, 투두, 푸터로 구성한 것을 확인할 수 있다. MainTemplate.jsx import React from 'react'; import styled from 'styled-components'; const StyledDiv = styled.div` box-sizing: border-box; width: 100%; height: 100%; `; const MainTemplate = ({ children }) => { return ( {children} ); }; export default MainTemplate; MainTemplate.js..

리액트의 컴포넌트 구성과 useState, useRef, useEffect 등의 hook 의 기본 개념을 활용하기 위해 react-create-app(CRA)를 통해 투두리스트를 제작하였다. 각 날짜별 TODO 리스트를 구현하고자 react-calendar 라이브러리를 활용하였고, 컴포넌트 간 props의 전역관리를 위해 Context API 라는 리액트 내장 라이브러리를 활용하여 구현하였다. 작성일 기준 완성된 화면은 아래와 같다. '벨로퍼트와 함께하는 모던 리액트'라는 오픈 문서를 참고하여 리액트 기초 지식을 배울 수 있었고, 해당 문서에서 제공하는 예제를 활용하여 투두리스트 부분의 뼈대를 완성할 수 있었다. 이후 헤더, 푸터, 반응형 등의 디자인 및 필터 기능, 달력 기능, 편집 및 삭제 기능 등을..

input { box-sizing: border-box; border: 1px solid rgb(212, 212, 212); border-radius: 2px; display: block; width: 100%; height: 48px; padding: 0px 14px; font-size: 14px; font-weight: 500; color: rgb(26, 26, 26); outline: none; } input 박스에서, padding 적용 시 부모 요소에서, padding 크기만큼 벗어나는 이슈가 있다. 이럴 땐, box-sizing: border-box; 이 속성을 추가하면 의도한 대로, padding 값이 적용되며 부모 요소 안으로 들어오게 된다.