우리가 개선할 사항은 아래와 같습니다.

1. 파일과 폴더 정리
2. html파일에서 fetch api로 data 로딩
   1. .js파일이 아니라 .json으로 통신
   2. 이를 위한 크롤러 개선
   3. yml 파일 수정

이렇게 파일을 수정하는 이유는 아래와 같습니다.

1. 통상적 프로젝트의 폴더 관리
2. .js파일은 python에서 파일 생성할 때 양식에 오류(예를 들어 text 안에 세미콜론이 있는 경우)가 있다하더라도 발견할 수 없음
3. 무결성 검증을 json 라이브러리로 검사 가능(Action CI로 정상인지 테스트 할 수 있음)

이번 실습은 타이핑을 치는 실습이 아닙니다. 만약 프로젝트를 동일하게 가져가고 싶을 경우 이래 레파지토리에 코드를 다운로드 받으셔서 모두 덮어써주세요. 변경된 부분은 영상으로 설명드리도록 하겠습니다.

paullabkorea/recordGithubAction

호스팅은 아래 URL에서 호스팅 되고 있습니다. 여기서 직접 코드를 확인하셔도 좋습니다. 메뉴에서 fetch 탭을 누르시면 fetch API를 사용하는 탭으로 이동합니다. UI는 동일합니다.

Github Action Page

우리의 최종 폴더 tree는 아래와 같습니다.