24.08.16_TIL (CS 예상 면접 질문)

 

https://zero-base.co.kr/event/media_insight_contents_FE_frontend_CS

프론트엔드 CS 지식, 취업에 필요한 핵심 공부법 (CS 면접 기출 문제까지!) | zero-base

 

 

 

1. 인터프러터와 컴파일러는 어떤 점에서 차이가 있나요?

인터프리터 언어는 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드(intermediate code)인 바이트 코드(특정한 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드)로 변환한 후 실행합니다. 반면 컴파일러 언어는 코드가 실행되기 전 단계인 컴파일 타임에 소스 코드 전체를 한번에 머신 코드(CPU가 바로 실 행할 수 있는 기계어)로 변환한 후 실행한다는 점에서 차이가 있습니다.

2. URL로 접속했을 때 어떤 플로우로 화면에 웹사이트가 그려지는지 네트워크 관점에서 설명해주세요.

URL을 입력하면 DNS를 조회해서 도메인을 바탕으로 IP주소를 찾습니다. 그리고 TCP연결 을 통해서 3 way handshake라는 과정을 통해서 응답을 확인하고, HTTP요청과 응답을 통 해서 DOM트리를 생성할 수 있는 페이지 정보를 응답 받게 됩니다.
DOM트리 CSSOM트리 렌더트리를 거쳐서 화면이 로드되게 되는데, 이 과정에서 레이아웃 을 배치하고 페인트를 통해서 계산된 위치에 요소를 그리게 됩니다. 이러한 과정들은 선형적인 방법은 아니고 상호작용을 통한 방법이므로 여러 번 다시 일어날 수 있고 병렬로도 처리될 수 있습니다.

3. RESTful API에 대해 설명해주세요.

RESTful API는 HTTP 프로토콜을 기반으로하는 웹 서비스 아키텍처입니다. 자원, 메소드, 메시지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다. 또한, RESTful API는 표준 HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 서버와 통신합니다

4. XML과 XHTML의 다른 점은 무엇인가요?

XML과 XHTML은 다양한 부분에서 차이가 있습니다.
목적에 따라서 봤을 때, XML은 데이터를 저장하고 전송하기 위한 언어로 만들어졌습니다. XML은 태그를 정의하여 사용자가 직접 태그를 만들 수 있고, 사용자 정의 데이터 구조를 설 계하여 생성할 수 있습니다. XHTML은 HTML을 XML 기반으로 재정의하여 HTML을 더 엄격한 XML 문법에 따라 작성 하도록 하여 XML과의 호환성을 갖추고, 더 엄격한 문법 검사를 하도록 합니다. 예를 들어, XHTML의 경우에는 무조건 시작 태그와 종료 태그를 짝 지어서 만들어야 합니다.
용도 측면에서 봤을 때, XML은 주로 데이터를 저장하고 교환하는 RSS 피드나 SOAP 메시 지 등의 데이터 형식으로 사용하고, XHTML은 HTML의 문서 형식과 유사하게 작성되며 웹 페이지를 작성하는데 사용됩니다.

5. 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?

브라우저마다 다른 웹 표준과 렌더링 엔진의 차이로 발생하는 이슈들을 해결하기 위해서는 직접 환경을 만들어서 해당 이슈들을 확인하며 수정하는 방식들이 진행되고, 웹 표준에 대해 서 확인하기 위해서 W3C Validator와 같은 도구들을 적극적으로 활용하기도 합니다.

6. 웹사이트의 assets을 여러 도메인으로 서빙했을 때 장점은 무엇인가요?

주로 도메인 샤딩(Domain Sharding)이라고 일컬어지는 이 기법은 웹사이트의 assets에 해 당하는 이미지, CSS, JavaScript, 폰트 등을 여러 도메인으로 서빙하여 동일한 도메인의 브라우저에서 허용하는, 6~8개 정도를 뛰어넘는 동시 다운로드에 따라오는 성능 이점이 있습니다.

7. load 이벤트와 DOMContentLoaded event의 차이점은 무엇인가요?

load 이벤트는 DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스(이미지, 폰트 등) 의 로딩이 완료되었을 때 발생하는 반면, DOMContentLoaded 이벤트는 HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료 되었을 때 발생합니다.

8. 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?

크로스 브라우징을 위해서는 Reset CSS, Normalize CSS와 같은 브라우저가 지정한 기본 스타일들을 모두 초기화 해주는 코드를 쓰는 스타일을 사용해서 여러 브라우저들이 동 일한 화면을 구성할 수 있게 해주는 방법을 제공합니다.
Modernizr와 같은 라이브러리를 사용해서 어떤 기능을 지원하는지 확인하거나 Media Query에서 @support 구문을 활용해 어떤 기능이 해당 브라우저에 지원하는지 확인하고 적용하는 방법 등이 있습니다.

9. 쿠키(Cookies)에 대해 설명해주세요.

쿠키는 웹 브라우저에서 데이터를 저장하는 기술로, 클라이언트와 서버 간의 데이터를 주고받을 때 사용합니다. 서버에서 쿠키를 설정한다면, 설정한 도메인의 모든 요청에 대해 자동으로 쿠키를 함께 클라이언트로 전송하게 됩니다. 용도는 주로 인증처리, 개인화된 세션 등에 대해서 사용됩니다

10. 클로저란 무엇인가요?

함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 때의 모든 변 수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉 하기 위해 주로 사용 합니다.

 

 

 

 

이에 대한 질문에 답변하는 것이 나는 아직 어렵다.

출처에서 가져왔지만 이 부분에 답할 수 있게 일단 내가 익숙하게 접하고 답할 수 있는 것을 이해하고 내가 답변할 수 있게 공부하려고 한다.

 

9번 질문 쿠키에 대해 알아보자.

 

 

 

https://www.cloudflare.com/ko-kr/learning/privacy/what-are-cookies/

 

 

쿠키란? | 쿠키의 정의

HTTP 쿠키는 사용자의 웹 브라우저에 정보를 저장합니다. 웹 서버는 쿠키를 생성하여 브라우저로 전송하고, 브라우저는 향후 HTTP 요청에 해당 쿠키를 포함합니다.

 

 

웹 사이트의 쿠키란?

쿠키는 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일. 웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트에서의 사용자 세션 기간 동안 저장하고 웹 브라우저는 향후 사용자가 웹 서버에 요청할 때 관련 쿠키를 첨부한다.

쿠키는 웹 사이트에 사용자에 대한 정보를 제공하여 웹 사이트에서 사용자 경험을 맞춤화하는 데 도움이 되는데 예를 들어, 전자 상거래 웹 사이트에서는 쿠키를 사용하여 사용자가 장바구니에 어떤 상품을 담았는지 파악한다.

 

쿠키는 어떤 용도로 사용될까요?

사용자 세션: 쿠키는 웹 사이트 활동을 특정 사용자와 연결하는 데 도움이 되며 세션 쿠키에는 사용자 세션과 해당 사용자의 관련 데이터 및 콘텐츠를 일치시키는 고유 문자열(문자와 숫자의 조합)이 포함되어 있다.

예를 들어 Alice의 웹 브라우저에서 청바지 제품 페이지에 대한 HTTP 요청이 웹 사이트로 전송되면 요청에 Alice의 세션 쿠키가 포함된다. 웹 사이트에 이 쿠키가 있으므로 사용자가 Alice로 인식되고 새 페이지가 로드될 때 다시 로그인할 필요가 없다.

 

개인화: 쿠키가 웹 사이트에서 사용자 행동 또는 사용자 기본 설정이 "기억"되는 데 도움이 되므로 웹 사이트에서 사용자 경험이 맞춤화될 수 있다.

Alice가 쇼핑 웹 사이트에서 로그아웃하면 사용자 이름이 쿠키에 저장되어 웹 브라우저로 전송될 수 있다. 웹 서버에는 Alice에게 지난번에 사용한 사용자 이름으로 로그인하라는 메시지가 표시된다.

 

추적: 일부 쿠키에는 사용자가 방문한 웹 사이트가 기록된다. 이 정보는 다음에 브라우저가 해당 서버에서 콘텐츠를 로드할 때 쿠키를 생성한 서버로 전송되는데, 타사 추적 쿠키를 사용하면 브라우저가 해당 추적 서비스를 사용하는 웹 사이트를 로드할 때마다 이 프로세스가 수행된다.

그러나 쿠키를 추적하는 데 광고만이 사용되는 것은 아니다.  많은 분석 서비스에서 추적 쿠키를 사용하여 익명으로 사용자 활동을 기록하는데, Cloudflare Web Analytics는 분석을 제공하기 위해 쿠키를 사용하지 않는 몇 안 되는 서비스 중 하나로, 사용자 개인정보 보호에 도움이 된다.

 

 

쿠키의 다른 유형은?

세션 쿠키

세션 쿠키는 웹 사이트에서 사용자의 세션을 추적하는 데 도움이 된다. 세션 쿠키는 사용자의 세션이 종료된 후, 즉 사용자가 웹 사이트에서 계정에서 로그아웃하거나 웹 사이트를 종료하면 삭제. 세션 쿠키는 만료일이 없으므로 세션이 끝나면 삭제되어야 함을 브라우저에 알린다.

영구 쿠키

세션 쿠키와 달리 영구 쿠키는 하루, 일주일, 몇 달, 심지어 몇 년까지 미리 정해진 기간 동안 사용자의 브라우저에 남아 있다.

인증 쿠키

인증 쿠키는 사용자 세션을 관리하는 데 도움이 되며, 사용자가 브라우저를 통해 계정에 로그인할 때 생성된다. 사용자 계정 정보를 쿠키 식별자 문자열과 연결하여 중요한 정보가 올바른 사용자 세션에 전달되도록 한다.

추적 쿠키

추적 쿠키는 추적 서비스에서 생성되며 추적 쿠키는 사용자 활동을 기록하고, 브라우저는 다음에 해당 추적 서비스를 사용하는 웹 사이트를 로드할 때 이 기록을 관련 추적 서비스로 전송한다..

좀비 쿠키

인기 소설의 "좀비"처럼 좀비 쿠키는 삭제된 후 다시 생성된다. 좀비 쿠키는 브라우저의 일반적인 쿠키 저장 위치 외부에 자신의 백업 버전을 생성. 이러한 백업을 사용하여 삭제된 후 브라우저에 다시 나타나고 좀비 쿠키는 부도덕한 광고 네트워크나 심지어 사이버 공격자들이 사용하기도 한다.

 

 

 

타사 쿠키란?

타사 쿠키는 브라우저에 표시되는 도메인이 아닌 도메인에 속하는 쿠키 

 

쿠키는 사용자 개인정보 보호에 어떤 영향을 미칠까요?

EU의 ePrivacy Directive와 같은 일부 개인정보 보호법에서는 쿠키 사용을 다루고 관리합니다.이 지침에 따라 사용자는 웹 사이트에서 쿠키를 사용하기 전에 "고지에 입각한 동의"를 제공해야 합니다(웹 사이트가 쿠키를 사용하는 방법에 대해 통지받고 이러한 사용에 동의해야 함).(단, 웹 사이트가 작동하는 데 "반드시 필요한 쿠키"는 예외입니다.)EU의 일반 데이터 보호 규정(GDPR)에서는 쿠키 식별자를 개인 데이터로 간주하므로 해당 규정은 EU 내 쿠키 사용에도 적용됩니다.또한 쿠키에 의해 수집되는 모든 개인 데이터는 GDPR의 관할권에 속합니다.

이러한 법률에 따라 현재 많은 웹 사이트에서 사용자가 해당 웹 사이트에서 사용하는 쿠키를 검토하고 제어할 수 있는 쿠키 배너를 표시합니다.