<목차>
- 개발자 도구
- 성능최적화
25.개발자 도구
개발자 도구를 사용하는 목적
-
디버깅 : 버그를 찾고 수정, 자바스크립트 코드의 오류를 찾거나 html과 css를 실시간으로 수정하면서 웹사이트의 문제점을 파악하고 해결할 수 있음
-
성능최적화 : 애플리케이션의 성능을 분석하고 최적화할 수 있다. 로딩시간을 줄이고, 메모리 사용을 최적화하며, 전반적인 사용자 경험 향상 가능
-
네트워크 모니터링 : 네트워크 탭을 사용하여 HTTP 요청과 응답을 모니터링 가능. 네트워크 문제를 진단하거나 페이지 로드 성능을 향상시키는데 도움
-
응답성 테스트 : 다양한 스크린 사이즈와 해상도에서 웹사이트가 어떻게 보이고 작동하는지 테스트 가능 . 다양한 디바이스에서 사용자 경험을 개선 할 수 있음
-
보안 검사 : 웹사이트의 보안 취약점을 발견하고 수정, 콘텐츠 보안 정책(CSP)이 제대로 설정 되어 있는지 검사 가능
-
실시간 편집과 실험 : 웹 페이지의 HTML,CSS,JavaScript를 실시간으로 수정 가능, 디자인 변경 사항을 빠르게 시험해 볼 수 있다.
-
자동화 및 테스트 : 자동화 테스트를 설정하고 실행할 수 있음, 개발 과정을 효율화 하고 오류 가능성을 줄일 수 있음
Q. 프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.
프론트엔드 개발에서 개발자 도구는 매우 중요한 도구입니다. 저는 개발자 도구를 필수적으로 사용하고 있습니다. 개발자 도구를 활용한 경험을 몇가지 말씀드리겠습니다. 첫번째는 콘솔 탭을 이용하는 방법으로 console.log 메소드를 이용합니다. 콘솔 탭에 나타난 오류나 출력값을 확인하며 코드를 작성할때 데이터베이스가 원하는 대로 잘 들어온지 확인할 수 있고 오류를 발견할 수 있습니다. 이러한 과정을 통해 예측가능한 상태를 유지하거나 어떤 지점에서 오류가 발생했는지 확인이 가능해 디버깅에 유리하다고 생각합니다. 두번째로는 외부API를 사용할 때 네트워크창을 확인합니다. 네트워크창에 데이터를 올바르게 요청하고 응답받았는지 확인하며 서버와 통신 중 어떤 오류가 있는지 확인합니다. 세번째로는 css 코드를 작성할 때 자주 사용합니다. 개발자 도구에서 실시간 편집이 가능하여 임의로 css코드를 변경해보고 작성해보며 요소의 위치와 크기등을 살펴봅니다. 이런 임시과정을 거쳐 css를 테스트해볼 수 있었습니다. 그외 애플리케이션 창을 보며 저장소를 확인하는 경우나 Lighthouse 오픈 소스 도구를 이용해 웹페이지의 품질을 확인하기도 합니다.
26. 성능최적화
- 웹 애플리케이션의 로딩 속도를 높이고, 반응성을 개선, 사용자 경험을 향상시키는 작업
- 사용자 만족도와 직결, 검색 엔진 최적화(SEO)에 중요한 영향
성능최적화 방법
-
자원 최소화 및 압축 : CSS, JavaScript 파일을 최소화하고 압축하여 전송하는 데이터 양을 줄인다. 로드 시간을 단축시키는 효과적인 방법
-
이미지 최적화 : 참고
-
캐싱 활용 : 브라우저 캐싱을 적절히 설정, 이미 로드된 자원 재사용. 페이지 재방문 시 로드 시간을 감소
-
코드 분할 : 큰 JavaScript 파일을 여러 개의 작은 파일로 분할하여 필요한 시점에만 로드하도록 한다. 초기 로딩 시간 단축
-
비동기 로딩 : 스크립트와 스타일 시트를 비동기로 로딩하여, 페이지의 핵심 콘텐츠를 우선적으로 로드
-
웹 폰트 최적화 : 웹 폰트의 양을 최소화, 필요한 스타일만 로드
-
DOM접근 최적화 : JavaScript에서 DOM 접근을 줄이고 가능하면 캐시된 정보를 사용. 불필요한 DOM조작은 성능 저하 초래
-
서버 사이드 렌더링(SSR) : 초기 페이지 로드 시 서버에서 HTML을 미리 생성하여 보냄, 클라이언트 사이드에서 처리 부담을 줄인다.
-
사용자 경험에 따른 지연 로딩 : 페이지에 보이지 않은 요소는 스크롤 등 사용자의 액션에 따라 지연해서 로딩하게 함
Q. 프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.
프론트엔드에서 성능을 최적화 시키기 위한 여러가지 방법이 있습니다. 우선 CSS, JavaScript파일을 최소화하고 압축시켜 로드시간을 단축시키는 방법이 있습니다. 필요없는 주석이나 공백을 제거하여 파일을 최소화 시키고 이미지 파일을 적절한 사이즈로 조정하는 단순한 작업 또한 성능을 최적화 시키는데 도움이 됩니다. 다른 방법으론 캐싱을 활용하는 방법이 있습니다. 저는 이전 팀 프로젝트에서 탠스택 쿼리를 사용하여 서버 요청을 최소화 하고 사용자 경험을 개선 시켰습니다. 캐싱된 데이터를 이용하여 불필요한 요청을 줄이고 네트워크 트래픽과 서버 부하를 줄일 수 있었고 즉각적인 데이터변경으로 애플리케이션의 반응성을 더 좋아지게 만들 수 있었습니다. 그 외에도 서버 사이드 렌더링을 적절하게 이용하거나 웹 폰트를 최적화하여 성능최적화를 시도할 수 있습니다.
