junho01052/todo-list

React 1주차 과제

배포 링크

실행 방법 (로컬 환경)

1. npm install
2. npm run start

과제 설명

• 서버와 데이터를 주고 받기 위해 / 페이지가 리랜더링 되어도 데이터 값을 그대로 유지시키기 위해 json-server 사용
• json-server는 glitch를 통해 배포
• 가독성을 높이고 CSS in JS를 위해 styled-component 사용
• 비동기 HTTP 통신, fetch를 사용하는 코드 보다의 높은 가독성을 위해 axios 사용
• TodoList를 추가하면 제목 입력 부분에 다시 포커싱 하기 위해 useRef 사용
• 데이터가 변경될 때마다 페이지 리랜더링을 위해 useState(setReFetch) 사용
• 추후 확장성을 위해 로그인(메인)페이지, 회원가입 페이지 구성(기능구현x)

사용 라이브러리

• axios
• styled-components

todo-list's Issues

Code Review

1 . 이번 주차 TodoList 과제를 아주 잘하셨습니다.

• useeffect cleanup
• Input, TodoItem, TodoItemList , 컴포넌트 분리

2. header 재사용성 문제 대한 조금 고민을 해보는게 어덜까?

• Props를 활용한 동적인 헤더: 로그인 상태에 따라 헤더의 내용이 달라질 수 있다면, 로그인 여부를 나타내는 프로퍼티를 추가하여 헤더를 동적으로 표시할 수 있습니다. 예를 들어, isAuthenticated라는 프로퍼티를 받아와 로그인 상태에 따라 로그인 또는 로그아웃 버튼을 표시할 수 있습니다.

3. Input 컴포넌트 에서 input tag이 비어 있을 때 추가하기 버튼을 누르면 db에 전송 되고 있습니다.

• input 태그의 required 속성을 추가하는게 어떨까?

과제 제출 확인

과제 제출하신 부분 확인했으나 별도 이슈 사항이 없어 질문이 있으신 경우 이슈 작성 부탁드립니다.