프론트 기술면접스터디 2주차

HTML

• doctype을 선언하는 이유에 대해서 아시나요?

 HTML은 버전 별로 지원하는 태그가 다르기 때문에 HTML이 작성된 버전 정보를 미리 선언해 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것입니다.

• 점진적 렌더링(Progressive Rendering)에 대해서 설명해주세요.

점진적 렌더링(Progressive Rendering)은 서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍 하는 기술이다.

 

• SEO에 대하여 설명해 주세요.
  • 적용 사례가 있으면 구체적인 적용 방법도 같이 설명해주세요

검색 엔진 최적화라는 뜻이다. 검색 엔진 봇들은 사이트의 데이터를 크롤링할 때 자바스크립트 파일을 해석할 수 없기 때문에 HTML 파일에서 끌어 올 데이터를 수집하게 된다. CSR은 클라이언트가 페이지를 구성하기 전까지는 HTML이 빈 화면이기 때문에 크롤러 봇이 데이터를 수집할 수 없게 된다.

반면 SSR의 경우 서버 측에서 화면을 그려서 내려주기 때문에 HTML 안에 이미 콘텐츠들이 포함되어 있어 CSR에 비해 크롤러 봇들이 데이터를 수집하는데 수월하다고 말할 수 있다.

이러한 검색 엔진 최적화는 마케팅 영역에서도 중요하게 생각하는 요소이다.

 

CSS

• css에서 %와 vw, vh 쓸 때 어떻게 다른지에 대해서 설명해주세요.

우선 뷰포트 기준 값은 vw와 vh이다.

% 는 부모 요소 기준으로 부모가 600px이고 자식이 10%라면 60px이다.

 

• z-index에 관해 설명해주세요.

z-index는 창을 순서대로 배치하는 스타일이다. 

 

• Contents를 화면에서 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는) 다양한 방법은 무엇인가요?

display:none 요소를 화면에서 보이지도 크기가 측정되지도 않음.

visibility: hidden. 요소가 화면에서 보이지않음 하지만, 요소는 여전히 페이지의 흐름에 여전히 공간을 차지하게 됨.

 

• CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?

ant design을 사용해본 적 있습니다. css framework를 사용하면 커스터마이징을 하더라도 css framework를 사용했다는 티가 나기 때문에 실무에서는 주로 admin 페이지처럼 사용자 경험이 크게 중요하지 않는 것을 만들 때 빠르게 만들 수 있습니다.

JavaScript

• 자바스크립트에서 비동기 처리
  • AJAX에 대해서 설명해주세요
  • Promise, Async, Await란 무엇이며 코드가 어떤 식으로 구성되나요?
  • 비동기 처리의 특성 및 에러 처리 방법에 대해서 설명해주세요.

AJAX란, JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다.

 

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request 한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

 

비동기 프로그래밍 환경에서 사람의 두뇌는 순차적, 중단적, 단일 스레드 방식으로 계획하는데 익숙하지만 콜백은 비동기 흐름을 비순차적인 방향으로 나타내므로 구현된 코드를 제대로 이해하기 어렵다. 그러한 코드를 좀 더 동기적, 순차적으로 이해하기 쉽게 표현하는 방법 중 하나가 Promise다.

콜백식 코드의 단점인 제어의 역전 문제를 프로미스가 해결해준다. 기존 콜백 코드를 믿을만하게 계획/관리할 수 있다.

 

프로미스의 단점들을 극복하기 위해 es7에서 나온 새로운 문법이 async/await이다.

async/await를 사용하면 비동기 코드를 동기 코드처럼 보이게 할 수 있다.

await는 async 키워드가 붙어있는 함수 내부에서만 쓸 수 있으며 비동기 함수가 리턴하는 프로미스로부터 결괏값을 추출해준다. 

await 키워드를 사용하면 결괏값이 올 때까지 기다려준다.

async/await를 사용하면 기존 프로미스에서의 강제로. catch( ) 써서 에러 처리했던 점을 극복해 try catch로 에러 처리를 해줄 수 있다. 또한 가독성이 더 좋아진다.

 

 

• 함수형 프로그래밍
  • (꼬리 질문) 자바스크립트 클로저에 대해서 설명해주세요.
  • (꼬리 질문) 자바스크립트 프로토타입에 대해서 설명해주세요.

클로저는 반환된 내부 함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다

실행 콘텍스트의 관점에 설명하면, 내부함수가 유효한 상태에서 외부 함수가 종료하여 외부함수의 실행 콘텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부 함수에 의해 참조되는 한 유효하여 내부 함수가스코프 체인을 통해 참조할 수 있는 것을 의미한다.

 

 

자바스크립트에서 프로토타입은 자신을 만들어낸 객체의 원형을 뜻한다.

Prototype Link - 자신을 만들어낸 객체의 원형
Prototype Object - 자신을 통해 만들어질 객체의 원형

직무 관련 질문

• CORS란? CORS를 해결하기 위한 방법을 아는 대로 모두 설명해 주시고 보통 어떤 방식으로 해결하는지 자주 사용하는 방법 1가지와 함께 실제 해결하신 경험을 공유해 주세요.

다른 도메인(domains (en-US))에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다.

 

교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

쉽게 말해 다른 도메인으로 요청을 보내면 보안을 위해 브라우저가 차단하는 것이다.

 

HTTP 응답 헤더 Access-Control-Allow-Origin :  true 혹은 Access-Control-Allow-Origin: 허용하고자 하는 도메인 설정을 할 수 있다.

 

브라우저에서 다른 도메인으로 요청을 보냈을 때 cors 에러가 생기는데 서버에서 서버에 요청했을 때는 cors 에러가 안생긴다.(프런트서버 > 백엔드 서버는 안생김 브라우저 > 백엔드 서버는 에러 생김)

 

같은 도메인인 브라우저 > 프론트 서버로 보내는 건 에러가 안 생긴다. 따라서 ( 브라우저 > 프론트 서버 > 백엔드 서버 > 프런트 서버> 브라우저)로 보내는 것이 proxy 방법이다.