안녕하세요 A5-Idle팀의 프론트엔드 개발을 맡은 김원길, 박준영, 손성호 입니다.

이번 주 저희가 목표로 삼았던 것은 성능 최적화, 리팩토링, 디자인 수정이었습니다.

먼저 성능 최적화의 경우 lighthouse를 기준으로 각 부분마다 약 20점 정도의 수치를 상승시킬 수 있었습니다.

먼저 권장사항 부분은 http 도메인을 https로 수정하여 개선할 수 있었습니다.

검색엔진 최적화와 접근성 부분은 이미지의 alt 속성을 추가하고 index.html에 메타 태그를 추가하여 성능을 개선할 수 있었습니다.

성능 부분은 이미지와 텍스트 파일 압축을 통해 개선할 수 있었습니다.

리팩토링의 경우 폴더 구조 변경, 이미지 프리로딩 개선, then 삭제, 페이지 컴포넌트 분리를 진행하였습니다.

폴더 구조가 기존에는 컨벤션 안에서도 각자의 규칙으로 이름을 짓다보니 점점 중구난방식이었는데, 폴더구조를 좀더 통일성 있게 변경하였고, 각 페이지에서는 너무 코드가 길어 읽기 힘들어졌고, 컴포넌트를 좀 더 분리하여 리팩토링을 진행하였습니다. (문서 구조 보여주며)

이미지 프리로딩 개선은 기존에 60장씩 mouseEnter로 호출하는 방식에서 프리로딩이 진행되지 않는 문제를 수정하기 위해 requestIdelCallback함수를 이용하였고 사용자의 호출을 방해하지 않으며 메인스레드가 비어있을 때 이미지를 브라우저 캐싱하도록 수정하였습니다. (네트워크 창을 보여주며)

then함수는 크롱이 await로 바꾸는 것이 좋을 것 같다고 피드백을 해주어 변경하게 되었습니다.

디자인 수정의 경우 기존의 디자인은 입체감이 없고, 직선으로만 이루어져 너무 딱딱한 분위기를 준다는 의견이 있어 전체적으로 border-radius와 shadow를 주면서 입체감이 있도록 수정하였습니다.

(사이트 보여주며)

위의 과정과 함께, 8월 30일날의 프로젝트의 발표를 준비하여 ppt 및 대본 작성, 팀원과의 여러번의 회의를 진행하였습니다. (피피티 보여주며)

저희의 마지막 발표 기대해주세요