[Assignment 7 회고록] 솔라커넥트 - TS 기반 프로젝트의 코드 리팩토링

🔗 배포링크

🔗 Github

🔗 베이스코드 개선되어야 할 사항을 노션에 작성하기

---

과제 내용

• 간단한 베이스 코드가 주어집니다. (베이스 코드 링크)
• 베이스 코드는 ReactJS 기반으로 만들어져 있으며, 몇개의 버그가 포함되어 있습니다.
• 요구사항을 잘 읽고, 버그 수정과 필요한 기능을 추가합니다.

[구현 중 지켜야할 사항]

• TypeScript 사용
• antd 라이브러리 사용( modal, datepicker 필수)
• 인터넷이 안되는 환경 ➡ 추가 라이브러리 설치 안됨

---

과제를 끝내고 회고 내용

🔰 1. Typescript

• 프리온보딩 코스를 하면서 처음으로 타입스크립트를 적용한 프로젝트!
• 초반에 codesandbox에 있는 걸 zip 파일로 다운받아서 실행 했는데, 이래저래 안되서 구글링 후 ts 버전을 바꾸어 설치하니 동작이 되었다.
• ts 적용 후 개발하다 보면 아무래도 type 관련 에러들이 많이 발생한다.
• 처음엔 ts로 실행시키는 것도 어렵고, 개발하는 것도 어렵고 불편하다 생각했지만,
  완료 후에 보니 내가 작성한 코드는 null값에 대한 에러처리를 잘 안잡아 주고 있다는 것도 알게되고, 개발 코드도 다시 한 번 돌아보게 되는 시간이었다.

🔰 2. Todo List 화면에 현재 시간을 표시

• 수업시간에 배운대로, ISO 8601 국제표준 형태로 저장해서,
  사용할 때 한국 시간으로 바꿔서 저장해주었다.
  

🔰 3. Todo 항목에 완료 목표일을 기입

• antd Datepicker를 사용
• disabledDate property를 사용하면 오늘 날짜 이전은 disabled 되도록 해준다
  ➡ TodoList다 보니, 오늘 날짜는 disabled 되면 안될 것 같아서 아래처럼 수정했다

const disabledDate = (current: moment.Moment): boolean =>
	current && current.valueOf() < new Date().setHours(0, 0, 0, 0).valueOf();

🔰 4. Todo 항목에 완료 버튼을 누르면 Todo 생성

아래의 경우에는 TodoList가 추가되지 않고, antd 모달 경고창 출력 & 버튼 UI를 변경해줬다.

• TodoList 텍스트가 빈 값인 경우(ex " " 공백문자열 포함)
• TodoList 완료 목표일을 선택하지 않은 경우
• TodoList 텍스트 & 완료일이 동일한 아이템이 존재할 경우

🔰 5. 로그인 기능

라이브러리를 추가로 설치하지 못하는 경우이기 때문에,localStoarge 를 사용하여 아래처럼 로그인/로그아웃 기능을 구현했다.

1. 웹 사이트에 처음 접속 시, 모달창을 띄워서 사용자명을 입력받는다.
2. localStoarge의 todo-user 값에 사용자명을 저장한다.
3. 구현된 Spinner 컴포넌트를 활용하여, 1초 동안 로딩 중임을 보여주고 화면으로 전환한다.
4. TodoList 추가 시, 기존의 todos가 아닌 사용자명-todos에 입력값을 저장한다.
5. 사용자가 로그아웃 버튼을 누르면 todo-user 값을 삭제한다.
6. 다시 사용자가 로그인 할 경우, 사용자명-todos에 저장된 목록을 불러온다.
7. 만약 todo-user가 존재하지 않는다면, 다시 모달창을 띄워 사용자명을 입력 받는다.

---

> 🔗노션 <

• 개선될 수 있는 부분
  간단한 TodoList다 보니, 개선되어야할 부분이 여러 개 생각이 났다.
  그 중 구현해보고 싶은 아래 5가지를 정해서 기능을 완료했고 자세한 건 노션에 작성했다!

• 추가 기능 구현 부분
  1. TodoList 입력순/ 마감임박순 정렬 기능 구현
  2. 등록된 TodoList와 텍스트&완료 목표일이 동일한 중복된 항목은 추가 불가능 기능 구현
  3. 완료 목표일 또는 텍스트가 입력되지 않은 경우 추가 불가능 기능 구현
  4. DatePicker에서 현재 날짜보다 이전 날짜는 완료 목표일로 설정 불가능하도록 기능 구현
  5. LocalStorage를 통한 로그인/ 로그아웃 기능 구현

• 로그인 기능
  인터넷 연결이 될 때, 안될 때 로그인 기능 구현 방법 고려하기