[기술면접] Frontend 부분 3

<목차>

7. 정규 표현식
8. 크로스 브라우징
9. lazy-loading

7. 정규 표현식

• 문자열을 처리할 때 쓰임
• 특정한 패턴을 찾기 위해 사용되는 표현 방법
• 문자열 내에서 특정 패턴이나 조건에 부합하는 부분을 찾아내고 처리해주는 도구
• 검색 : 대규모 텍스트에서 특정 패턴이나 문자열을 빠르게 찾을 때 사용
• 검증 : 입력된 데이터가 특정 형식에 부합하는지 검증할 때 사용
  ex) 이메일 주소, 전화번호의 형식 검사
• 치환 : 문자열 내에서 특정 패턴을 다른 문자열로 대체할 때
• 분리 : 특정 패턴을 기준으로 나눌 때 사용
  ex) 콤마나 공백을 기준으로 문자열을 분리시키기
• 정규 표현식은 복잡하다.
• 데이터 처리, 소프트웨어 개발, 로그 분석등 다양한 분야에서 효율적으로 사용할 수 있다.

Q. 정규 표현식을 사용해본 경험이 있으신가요?
=> 정규 표현식은 문자열의 특정한 패턴을 이용하기 위해 사용되는 표현 방법 입니다. 문자열 내에서 특정한 패턴이나 조건에 부합하는 부분을 찾아내고 처리해줍니다. 예를 들어 검색기능이나 이메일 주소 검사기능에서 사용할 수 있습니다. 저는 정규 표현식을 사용해 본 적은 없지만 정규 표현식은 매우 복잡하다는 사실과 그럼에도 불구하고 다양한 분야에서 효율적으로 사용될 수 있다는 점을 알고 있습니다. 앞으로 경험을 통해 배워나갈 예정입니다.

8. 크로스 브라우징

• 웹사이트나 웹 어플리케이션이 다양한 웹브라우저와 운영체제에서 동일하게 잘 작동하도록 개발하는 방식
• 어떤 사용자던 어떤 브라우저던 어떤 디바이스던 일관된 사용자 경험을 제공
• 크롬, 사파리, 파이어폭스등 다양한 브라우저에서 동등한 서비스 제공
• 윈도우, 맥오에스, 리눅수, 안드로이드, 아이오에스 등 다양한 운영 체제에서 동등한 서비스 제공
• HTTP/CSS 표준 준수 : W3C같은 표준화 기구에 정의한 HTML과 CSS 규칙을 준수한다.

Q. 크로스 브라우징이 무엇인가요?
=> 크로스 브러우징은 우리가 개발한 웹사이트나 웹 어플리케이션이 다양한 웹브라우저, 다양한 운영체제에서 동일하게 잘 작동하도록 개발하는 방식입니다. 어떤 사용자던, 어떤 브라우저던, 어떤 디바이스던 일관된 사용자 경험을 제공해야 합니다. 예를 들어 윈도우 운영 체제의 크롬에서만 어떠한 기능이 작동한다면 다른 사용자는 그 기능을 사용하지 못하게 되면서 동등한 서비스를 제공받지 못한 셈이 됩니다. 개발자는 W3C같은 표준 기구에서 정의한 HTML과 CSS 규칙을 준수하며 크로스 브라우징 방식으로 개발해야합니다.

9. lazy-loading

• 지연 로딩
• 웹페이지나 어플리케이션에서 필요한 자원을 초기 로드시 불러오지 않고 사용자가 실제 필요한 순간에 로드하는 기술
• 웹페이지 초기 로딩 속도를 개선
• 사용자 경험 향상
• 서버 부하 ↓
• 사용자가 스크롤 하거나 다른 상호작용을 통해 요소가 필요한 위치에 도달하면 그제서야 콘텐츠 로드
• 스크롤 이벤트나 Intersection Observer API를 사용
• 사용자의 뷰포트에 들어오는 요소를 감지 -> 해당 시점에 요소를 동적으로 로드
• HTML 최신 브라우저에는 img, iframe 태그에 loading=lazy 속성을 추가해 지연로딩 가능

Q.lazy-loading에 대해서 알고 계신가요?
=> lazy-loading은 지연 로딩을 말하는 것이며 lazy라는 부정적인 표현과는 다르게 사용자의 경험을 향상시키고 로딩 속도를 개선하는 등 긍정적인 기술입니다. 웹페이지나 어플리케이션에서 필요한 자원을 초기 로드시 다 불러오지 않고 사용자가 실제 필요한 순간에 로드하는 기술입니다. 레이지로딩을 통해 웹페이지 초기 로딩 속도를 개선하고 사용자 경험을 향상시키고 서버의 부하를 줄여줄 수 있습니다. 스크롤 이벤트 등 사용자의 뷰포트에 들어오는 요소를 감지하여 해당 시점에 요소를 동적으로 로드하는 방식이 레이지로딩에 해당한다고 볼 수 있습니다.