[면접준비] 기술 면접 기초 12일차

이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.

이미지를 저장할 때 적절한 파일 형식을 선택하는 것이 중요합니다. 일반적으로는 JPEG는 사진에, PNG는 로고나 투명 이미지에 WebP는 모든 종류의 이미지에 효과적입니다.그리고 이미지 크기를 조절해서 필요 이상의 공간 차지 및 로딩 시간을 단축시킬 필요가 있습니다.이를 위해 웹에서는 레이지 로딩(Lazy Loading)을 적용하여 페이지가 처음 로딩될 때 모든 이미지를 불러오는 대신, 사용자가 스크롤하여 이미지가 보일 때까지 로딩을 지연시키는 방식 등을 사용하여 초기 로딩 시간을 단축 시키며 페이지 성능을 향상 시킬 수 있습니다.또는 이미지 캐싱을 활용하는 방법도 있는데, 이는 여러 이미지를 하나의 이미지로 결합하여 서버 요청 수를 줄이는 방법입니다. 이는 여러 작은 이미지를 모두 로딩하는 대신 하나의 큰 이미지를 로딩하여 성능을 향상시킬 수 있습니다.

 

프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.

저는 평소 개발 시 옆에 계속 개발자 도구를 열어놓고 사용할 정도로 개발자 도구를 꾸준히 사용하고 있습니다. 우선 요소탭에서는 HTML 구조를 올바르게 작업하고 있는지 확인 할 수 있으며 CSS 값 확인 및 반응형 페이지가 의도적으로 동작하고 있는지도 확인할 수 있습니다. 서버와의 연결 작업이 필요한 경우 콘솔, 애플리케이션, 네트워크 탭을 활용하여 정상적으로 데이터가 요청되고 응답받는지를 확인하고 있습니다. 콘솔창에서는 디버깅 용도로 주로 사용한다면 애플리케이션에서는 저장용량에 토큰값이 제대로 들어오는지 확인하는 용도로 사용하고 있고 네트워크 탭에서는 자세한 헤더, 페이로드, 응답 내역을 보고 서버간의 연결이 잘 되고 있는지를 확인합니다. 그리고 최근에는 Lighthouse도 종종 이용하고 있는데 이 탭에서는 웹 사이트의 성능을 분석하고 수치로 알려줍니다. 이를 통해 어디를 어떻게 개선할지 생각하면서 조금씩 성능 수치를 향상 시키다보면 굉장히 뿌듯하고 만족스러움도 느끼고 있습니다.