[기술면접] Frontend 부분 5

<목차>

13. eslint같은 linter가 중요한 이유를 설명해주세요.
14. 웹팩 같은 bundler에 대해 알고 계신가요?
15. Lighthouse를 이용하여 Web Vital 진단 및 최적화를 진행할 수 있다.
16. 브라우저 호환성이란 무엇을 말하는 것인가요? 또한 어떤 점들을 고려해야 할까요?
    
    

13. eslint같은 linter가 중요한 이유

• linter : 소스 코드를 분석하여 프로그램 오류,버그 등을 미리 표시해주는 도구
• 코드 개선 툴이다.
• 코드 품질 향상 : 변수미사용, 잘못된 타입의 값이 함수에 전달되는 문제등을 지적
• 일관성 유지 : 협업시 코딩 스타일이나 규칙을 강제 적용하여 일관성 유지
• 버그 사전 예방 : 범위 오류, 변수의 재선언과 같은 문제 식별
• 개발 효율성 향상 : 잠재적 오류를 실시간으로 지적, 개발 속도를 높이는데 기여
• 초보개발자에게 도움 : 좋은 코딩 습관을 개발하는데 도움
• 개인과 팀 전체의 생산성을 높인다.
• 코드 품질과 유지 보수성 향상
• 개발 프로젝트에서 효율적이고 안정적인 작업 흐름 구축 기여

Q. eslint같은 linter가 중요한 이유를 설명해주세요.
=> linter(린터)는 코드를 분석하여 프로그램 오류나 버그 등을 미리 표시해주는 도구입니다. 즉 코드를 개선시켜주는 툴이라고 할 수 있습니다. linter를 통해 변수가 미사용되는지 잘못된 타입의 값이 함수에 전달되지는 않은지 확인 할 수 있어서 코드의 품질 향상에 도움이 됩니다. 협업시엔 코딩 스타일이나 규칙 을 강제로 적용시켜 모두 같은 룰을 따를 수 있도록 도와줍니다. 변수의 재선언 등과 같은 버그 또한 사전에 예방 가능합니다. 이러한 특성들로 인해 개인과 팀 전체의 생산성을 높여주고 코드 품질, 유지보수성이 향상 됩니다. 개발자들은 linter를 사용하여 개발 프로젝트에서 효율적이고 안정적인 작업 흐름을 구축할 수 있습니다.

14. 웹팩 같은 bundler

• 웹사이트를 만들때 사용하는 도구
• 웹사이트를 만드는 과정을 효율적으로 만들어 주는 도구
• 웹팩은 자바스크립트 애플리케이션을 위한 모듈 번들러
• 여러 파일 (자바스크립트,css, HTML, 이미지등)을 묶어서 하나 또는 여러개의 파일로 만드는 역할
• 변환 역할 : 다양한 파일 형식을 브라우저가 이해 할 수 있는 형식으로 변환
• ex) 최신 자바스크립트 코드를 오래된 브라우저도 이해할 수 있도록...
• 웹 애플리케이션의 로딩시간 최적화 : 필요없는 코드를 제거, 파일 크기를 줄이는 등
• 파일 체계적으로 관리
• 로딩 속도 개선

Q. 웹팩 같은 bundler에 대해 알고 계신가요?
=> 웹팩은 웹사이트를 만들때 사용하는 도구입니다. 정확히는 웹사이트를 만드는 과정을 효율적으로 만들어주는 도구 입니다. 웹팩은 여러파일, 예를 들어 자바스크립트, css, html등을 묶어서 하나 또는 여러개의 파일로 만드는 역할을 합니다. 즉 번들링을 통해 브라우저가 빠르게 웹사이트를 로딩할 수 있도록 도와줍니다. 웹팩은 그뿐만 아니라 다양한 파일 형식을 브라우저가 이해할 수 있도록 형식을 변환해 주기도 합니다. 예를 들어 최신 자바스크립트 코드를 오래도니 브라우저도 이해 할 수 있게 만들어줍니다. 그뿐만 아니라 필요없는 코드를 제거하거나, 파일 크기를 줄이는 등 로딩시간을 최적화해줍니다. 웹팩을 통하여 파일을 체계적으로 관리하고 로딩 속도를 개선할 수 있습니다.

15. Lighthouse를 이용한 Web Vital 진단 및 최적화

• Lighthouse는 웹사이트의 여러 부분을 체크해주는 도구
• 속도가 얼마나 빠른지, 사용하기 편한지, 잘 보이는지 등을 점검 -> 개선점 파악
• 웹사이트의 퍼포먼스, 접근성, 웹 앱의 진보된 기능, SEO등 평가
• Google이 만든 기준
• 웹사이트가 사용자에게 얼마나 좋은 경험을 제공하는지 측정
• 크롬 브라우저에서 개발자 도구를 열거나 Lighthouse확장 프로그램을 설치해서 사용
• 웹사이트를 점검하고 개선할수 있고 더 좋은 사용자 경험을 제공

Q. Lighthouse를 이용하여 Web Vital 진단 및 최적화를 진행할 수 있다.
=> lichthouse는 google이 만든 기준에 따라 웹사이트의 여러부분을 체크해주는 도구 입니다. 속도라 얼마나 빠른지, 사용자가 사용하기 편한지, 접근성이 좋은지, 진보된 기능을 갖고 있는지, SEO인 검색기능최적화가 잘 되는지 등을 평가합니다. 크롬 부라우저에서 개발자 도구를 열거나 lichthouse 확장 프로그램을 설치하여 사용할 수 있습니다. 개발자는 Lichthouse를 통해 개선점을 파악하고 더 좋은 사용자 경험을 제공할 수 있습니다.

16. 브라우저 호환성

• 웹사이트나 웹 어플리케이션의 기능이나 레이아웃이 다양한 웹 브라우저와 운영시스템에서 예상대로 작동하는 것
• 사용자가 어떤 기기나 브라우저를 사용하더라도 일관된 사용자 경험을 제공하는 것이 목표
• 다양한 환경에서도 웹사이트가 잘 작동하도록 만들어 다양한 사용자의 접근성을 보장
• 모든 사용자에게 일관된 경험을 제공하여 만족도를 높이고 사이트에 대한 신뢰도를 높인다.
• 더 많은 사람들이 접근
• css와 HTML의 최신 기능 검토 : 모든 브라우저가 최신css나 html을 지원하는지 여부 파악
• 자바스크립트 호완성:다른 브라우저에서도 동일하게 작동할 수 있도록 자바스크립트 코드 작성
• 반응형 웹 디자인 : 다양한 화면 크기와 해상도 고려
• 접근성 고려 : 여러 신체적 제한이 있는 사용자도 웹사이트를 이용할 수 있도록 접근성 고려
• 브라우저의 호환성을 확보하기 위해 꾸준히 모니터링 필요
• 사용자 피드백 수집
• 기술 변화에 맞추어 웹사이트 업데이트

=> 브라우저 호환성이란 어떤 사용자던 어떤 기기와 어떤 브라우저를 사용하더라도 일관된 사용자 경험을 제공하는 것을 말합니다. 다양한 환경에서도 웹사이트가 잘 작동하도록 만들어 다양한 사용자의 접근을 보장하여 일관된 경험을 제공한다면 가용자의 만족도를 높이고 사이트에 대한 신뢰도를 높일 수 있습니다. 브라우저의 호환성을 위해 고려해야할 점들은 여러가지가 있습니다. 최신 css와 html이 모든 브라우저에서 지원되는지 파악하고 다른 브라우저에서도 동일하게 기능이 작동하도로고 자바스크립트 코드를 작성해야합니다. 디자인적으로 반응형 웹디자인을 구현해 다양한 크기와 해상도에 맞게 웹사이트가 조정이 되도록 합니다. 그 외에도 신체적 제한이 있는 사용자도 웹사이트를 이용하도록 시멘틱태그를 사용하는 것 또한 도움이 됩니다. 초기 개발 구현 단계를 벗어나 유지보수 단계에서도 계속된 모니터링과 사용자 피드백 수집이 브라우저 호환성을 높이는데 중요한역할을 합니다.