-
내가 Front-End를 끝내고 체크하는 리스트Tip 2021. 8. 26. 19:00728x90
FontEnd 개발을 끝내고 QA까지 어느 정도 마무리하면 최적화라는 벽을 맞이한다.
그 상황에서 자주 사용하는 것들을 정리하려 한다.
1. The Front-End Checklist - ✨ Your best Front-End Tool ✨ (frontendchecklist.io)
이 사이트를 이용해 완전하진 않지만 내가 혹시 빠뜨린 요소가 없는지 체크를 진행합니다.
2. Lighthouse | Tools for Web Developers | Google Developers
어찌 보면 가장 많이 그리고 자주 사용하는 google의 Lighthouse입니다.
페이지 별로 다르게 나오며 정말 필요한 요소를 제외한 나머지 항목은 끄고 사용하는 게 속도에 큰 도움이 됩니다.
간략하게 사용법에 대해 이야기해드리자면, Chrome기반의 웹을 사용한다면 개발자 도구를 연 뒤 상단 탭의 Lighthouse를 눌러 사용할 수 있습니다.
3. Nibbler - Test any website (silktide.com)
이 사이트는 Lighthouse와 비슷한 면이 많지만 조금 더 자세하게 나와서 놓친 부분에 대해 의외의 해결책을 제시해줍니다.
4. Website Scanner Online - Find Vulns Fast | Pentest-Tools.com
이 사이트는 웹 사이트의 취약점을 체크해주는 곳으로 혹시 큰 문제가 될 요소를 제거하는데 도움을 주는 사이트입니다.
위 4가지를 기반으로 최적화를 진행하는 편입니다.
저 중 가장 중요하고 하나만 사용해야 한다면 Lighthouse를 사용하시면 됩니다.
Lighthouse는 PWA에 대한 항목도 검사해 주기 때문에 웹 개발자라면 자주 사용할 수밖에 없는 좋은 도구라고 사용합니다.
'Tip' 카테고리의 다른 글
ESLint react/display-name 해결하기 (0) 2021.09.02 eslint, prettier 수정, 검색 후 commit하기 (0) 2021.08.27 ESLint dependency cycle detected import/no-cycle Error 해결하기 (0) 2021.08.18 React String형의 Html 렌더링 하기 (0) 2021.07.28 React 사용하지 않는 종속성 제거 (0) 2021.07.23