[REACT] 투두리스트

투두리스트

---

투두리스트

1. 프로젝트 준비하기

1. 요구사항 분석하기

• 기능 분석
  1. 오늘의 날짜를 요일, 월, 일, 연도 순 표시
  2. 할일 작성 입력 폼, 추가버튼 클릭 시 할일 아이템 생성
  3. [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출 가능
  4. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록날짜, 삭제버튼으로 이뤄짐

• UI 요소를 컴포넌트 단위로 나누기
  • Header 컴포넌트 : 오늘의 날짜를 표시 형식에 맞게 보여줌
  • Editor 컴포넌트 : 새로운 할 일 아이템을 등록
  • List 컴포넌트 : 검색어에 맞게 필터링된 할 일 리스트를 렌더링
  • TodoItem 컴포넌트 : 낱낱의 할 일 아이템에는 기본 정보 외에도 체크박스 및 삭제버튼 존재

1. 리액트 앱 만들기
   • 아래 두 링크 참고 https://hyoreal.github.io/posts/React-React.js-%EA%B0%9C%EB%A1%A0/ https://hyoreal.github.io/posts/React-React.js-%EC%9E%85%EB%AC%B8%ED%95%98%EA%B8%B0/

2. UI 구현하기

1. 페이지 레이아웃 만들기

1. 새로운 CSS 규칙 적용

// App.jsx

import "./App.css";

function App() {
  return (
    <div className="App">
      <h2>헬로 리액트</h2>
    </div>
  );
}
export default App;

body {
  margin: 0px; /* 페이지의 외부 여백 삭제 */
}

.App {
  max-width: 500px; /* 페이지의 최대 너비를 500px 고정 */
  width: 100%;      /* 500px 이하의 경우 페이지 너비를 브라우저의 100%로 설정. */
  margin: 0 auto;   /* 여백을 위아래는 0, 좌우는 자동으로 설정 */
  box-sizing: border-box; /* 내부 여백이 요소의 크기에 영향을 미치지 않도록 설정 */
  padding: 20px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column; 
  gap: 30px;
}

2. 컴포넌트 만들기