프론트엔드 면접준비 [ 25 - 36 ]

25. 브라우저 렌더링 과정에 대해 설명해보세요

- 브라우저 url을 통해 dns서버에 연결된 해당 ip로 가서 protocol 방식을 통해 통신하여 데이터를 불러옴 (여기가 핵심)
   → 데이터를 파싱하여 DOM트리를 불러와 화면을 구성
  → 중간중간 css 형태 구성
  → 자바스크립트는 후에 실행

 

26. 웹팩과 바벨에 대해 설명해보세요

- 웹팩 - 파일을 하나로 만들어주는 모듈 번들러
- 바벨 - 호환되지않는 문법을 최적화하게 만들어주는 트랜스 파일러

 

27. CSR과 SSR의 차이가 무엇인가요?

- CSR - DOM 형식으로 클라이언트 기반으로 화면구성
- SSR - 서버에서 html을 변경하는 등 구성을 다루는 주체가 서버인 렌더링

 

28. CORS가 무엇이고 이를 처리해본 경험을 말씀해주세요

- CORS란 도메인 또는 포트가 다른 서버의 자원을 요청하면 발생하는 문제
- Cross-Origin Resource Sharing - 웹 프론트 측에서 requert header에 CORS 관련 옵션을 넣어주고,
  서버에서는 프론트 요청을 허용해주면됨
- 프로젝트를 처음진행할 때 프론트 작업 url이 CORS정책에 막혀서 서버에 데이터를 전달하지 못함,
  백엔드에서 프론트경로에 해당하는 요청을 허용해주어 해결

 

29. 웹사이트 성능 최적화에는 어떤 방법이 있는지 설명해보세요

- 성능 최적화 = 렌더링 최적화 + 로딩 최적화
- 렌더링 최적화
   * 불필요 css 제거
   * html 단순화 (인라인 스타일, DOM트리 단순화 등)
   * 애니메이션 최적화 (자바스크립트 api, 라이브러리보다 css를 통해 구현하는 것)
     ※ transform은 리플로우와 리페인트 발생 x
     ※ position 설정 시 absolute나 fixed 설정 시 주변 요소에 영향 x
   * JS 최적화 ( 강제 동기 레이아웃 피하기 등)
- 로딩 최적화
   * async, defer속성은 스크립트 파일을 병렬로 다운로드
     ※ async 는 다운로드 후 즉시 실행
     ※ defer은 웹페이지가 그려지고 DOM이 들어오면 실행
   * 이미지 최적화 (picture 태그, 리사이징, 아이콘 사용 등)
   * 웹팩 사용 - css와 js 파일을 번들링하여 리소스 요청을 줄임
   * CDN 사용, 캐싱 등

 

30. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요

- 쿠키 : 클라이언트에 저장되는 파일, 전송 시 헤더 같이 전달
- 세션 : 사용자 정보는 서버에 보관되며, 창을 닫으면 삭제
- 웹 스토리지 : 키-value로 만들어진 간단한 저장소 HTML 5에 도입

 

31. 렉시컬 환경에 대해 설명해주세요

- 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체

 

32. 실행 컨텍스트에 대해 설명해주세요

- 자바스크립트의 코드들이 실행되기 위한 환경,
- 자료구조 전역 컨텍스트는 코드 과정이 실행되기 위한 환경이고 함수
- 컨텍스트는 함수 호출 시 마다 생기며,
  변수 객체, 스코프 체인, this등이 생김, 체인따라 동작 동작이 종료되면 해당 컨텍스트는 사라짐
  즉, 코드가 실행되기 위해서, 변수객체, 스코프 체인, this등 정보를 담고 있는 환경

 

33. 불변성 관리는 어떻게 하셨나요?

- 불변성 : 값이나 상태를 변경할 수 없는 것, 메모리 영역
- 지켜야하는 이유 : 상태 업데이트를 하는 원리로, 얕은 비교를 수행
                               사이드 이펙트 방지, 구조 단순화, 효율적 상태 업데이트 등
- 관리 방법
   1. push, splice, concat, filter, map 등 함수 사용

   2. Immer을 이용한 상태변경

   3. spread를 이용한 객체 메모리 관리

 

34. 콜백 지옥을 해결하는 방법을 설명해보세요

- 콜백지옥 - 비동기 처리 로직을 위해 콜백함수를 연속해서 사용할 때 발생하는 문제

  * Promise를 이용한 해결 비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체

    then과 catch문의 체이닝을 통해 값을 반환을 받아올 수 있음

 * async / await 을 이용한 해결 ES8에서 도입된 문법

    Promise의 후속처리 메서드 없이 마치 동기 처리처럼 처리결과를 반환하도록 구현

    await을 통해 해당값이 반환 되기 전까지 async 내부 함수를 일시 중지함

 

35. React, 왜 사용하시나요?(우리는 선택지가 React 밖에 없지만 기업입장에서는 궁금할 수 있는 질문)

- 컴포넌트 단위 UI 작성, 생산성과 유지보수 용이

- JSX 사용으로 html과 유사한 방식으로 javascript 처리 가능

- virtual DOM을 이용하여 렌더링 횟수 감소 (비용절감)

 

36. React hooks useMemo와 useCallback에 대해 아는대로 설명해주세요

- 둘다 메모이제이션 기능을 하는 훅인 것은 동일하나
- useMemo는 값을 저장하여 사용하고
- useCallback은 함수를 저장하여 반환함