-
내가 Front-End를 끝내고 체크하는 리스트Tip 2021. 8. 26. 19:00728x90
FontEnd 개발을 끝내고 QA까지 어느 정도 마무리하면 최적화라는 벽을 맞이한다.
그 상황에서 자주 사용하는 것들을 정리하려 한다.
1. The Front-End Checklist - ✨ Your best Front-End Tool ✨ (frontendchecklist.io)
✨ Your best Front-End Tool ✨
🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report!
frontendchecklist.io
이 사이트를 이용해 완전하진 않지만 내가 혹시 빠뜨린 요소가 없는지 체크를 진행합니다.
2. Lighthouse | Tools for Web Developers | Google Developers
Lighthouse | Tools for Web Developers | Google Developers
Learn how to set up Lighthouse to audit your web apps.
developers.google.com
어찌 보면 가장 많이 그리고 자주 사용하는 google의 Lighthouse입니다.
페이지 별로 다르게 나오며 정말 필요한 요소를 제외한 나머지 항목은 끄고 사용하는 게 속도에 큰 도움이 됩니다.
간략하게 사용법에 대해 이야기해드리자면, Chrome기반의 웹을 사용한다면 개발자 도구를 연 뒤 상단 탭의 Lighthouse를 눌러 사용할 수 있습니다.
3. Nibbler - Test any website (silktide.com)
Nibbler - Test any website
Free tool for testing how good your website is, and what you can do to improve it. Check accessibility, SEO, social media, compliance and more.
nibbler.silktide.com
이 사이트는 Lighthouse와 비슷한 면이 많지만 조금 더 자세하게 나와서 놓친 부분에 대해 의외의 해결책을 제시해줍니다.
4. Website Scanner Online - Find Vulns Fast | Pentest-Tools.com
Website Scanner Online - Find Vulns Fast | Pentest-Tools.com
Use our online Website Vulnerability Scanner for a detailed website security check. Scan website, run 18 tests to find & report website vulns: SQLi, XSS, misconfigs, etc.
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