devjjin / react-todolist-assignment

React를 활용한 Todo list 애플리케이션

이 프로젝트는 일정관리를 위한 Todo List입니다. 사용자는 해야 할 일과 내용을 작성하고 진행중인 목록과 완료한 목록을 확인할 수 있습니다. 프로젝트는 링크 에서 확인하실 수 있습니다.

프로젝트 목적

• React를 활용한 하나의 완성된 App 구현

사용 기술

• Language : HTML5, CSS, JavaScript
• Framework : React
• 기타 : 리액트의 상태관리 useState 훅, 컴포넌트 간 데이터 전달을 위한 props 기술 사용

Components

App

Todo List 앱 전체를 관리하는 최상위 컴포넌트입니다.

TodoHeader

Todo List 애플리케이션의 제목을 표시하는 헤더 컴포넌트입니다.

TodoCreate

새로운 Todo를 생성하는 컴포넌트입니다. 사용자는 새로운 Todo의 제목과 내용을 입력하고, 추가 버튼을 클릭하여 TodoList에 추가할 수 있습니다.

TodoList

진행 중인 일정과 완료된 일정 리스트를 구분하여 보여주는 컴포넌트입니다.

TodoItem

하나의 Todo의 제목과 내용을 나타내며, 사용자는 버튼을 통해 todo 상태를 변경할 수 있습니다.

• 삭제하기 버튼 클릭 시 Todo 삭제
• 완료 버튼 클릭 시 Todo를 완료 상태로 변경하고, 완료된 일정 리스트로 이동
• 취소 버튼 클릭 시 완료된 Todo를 진행 중인 일정 리스트로 이동

react-todolist-assignment's Issues

과제 질문 및 코드리뷰 요청

1. 고유한 id값

• 기존에는 id값을 배열의 길이+1로 설정해 수정, 삭제 시 배열의 길이가 변경되면서 중복ID가 적용되어 동시에 삭제되거나 수정되는 버그가 발생했습니다.
  이를 해결하기 위해 Date.now()로 id값을 부여하였습니다.
  이 방식을 적용하면 중복 문제나 다른 이슈가 발생할 수도 있어 찾아보니 실무에서는 UUID 라이브러리를 사용한다고 하는데, 실제 어떤 방식을 사용하나요?

2. 작업순서

• 먼저 컴포넌트 단위로 나누고 div로 위치를 조정하는 작업을 수행하였습니다.
  이후에는 큰 단위부터 (App->Create->List->Item)순으로 기능을 구현하였습니다.
  그리고 마지막에 CSS 작업을 수행했습니다.
• 이 때, HTML 작업과 CSS 작업을 함께 진행하는 것이 더 효율적인가요?

3. 컴포넌트 분리

• 컴포넌트를 나눌 때 header 부분은 특수한 기능도 없고 재사용하는 부분이 없지만 최대한 세분화하여 나누어보았습니다. header부분은 별도 컴포넌트로 분리하지 않아도 될까요?
• App.jsx에서 전체 레이아웃을 포함하는 예시로 Template 컴포넌트도 추가하는 것이 좋을까요?
• 또한, CSS 파일도 각 컴포넌트 별로 분리하는 것이 좋은지 궁금합니다.

4. 컨벤션

• CSS 컨벤션에 대해서 찾아보니 BEM 방식을 알게 되었습니다. 적용해보려했으나 변수가 매우 길어져 적용이 어려웠는데 실무에서도 실제 BEM방식을 사용하나요?
• wrap과 container를 구분할 때 wrap은 하나의 태그만 포함하고, container는 여러 태그를 담고 있다고 알고 있는데,
  오픈소스들을 보면 전체 요소들을 wrap으로 감싸는 케이스가 많던데 실제 어떻게 사용하나요?

5. 코드축약

• arrow function을 사용할 때 한줄로 축약될 수 있는 코드는 축약하여 사용하는 것이 가독성이 좋을까요?

6. 그 외에 전체적인 코드 리뷰 요청드립니다.