Skip to content

Latest commit

 

History

History
132 lines (90 loc) · 5.9 KB

Samslow_Interview2.md

File metadata and controls

132 lines (90 loc) · 5.9 KB
title date author category
FE Interview 5
2020-08-04 17:00:00 -0700
samslow
Interview

최근 글을 팔로우 업 하기 위해 아래 주소로 글을 이동합니다.

아래 주소에서 게시글을 참고 해 주세요.

<<<<<<< HEAD 블로그 주소

document는 HTML 문서의 핵심을 담고있는 객체로 window의 자식 객체이다.

문제의 2가지 이벤트는 모두 생명주기중 하나인데 DOM이 로드될때 갖는 흐름이다.

  • DOMContentLoaded
    • 브라우저가 HTML을 전부 읽고 DOM 트리를 모두 완성하면 즉시 발생한다.
    • 이미지파일, CSS는 기다리지 않는다.
    • 이때 <img /> 가 참조는 되지만 사이즈는 0x0으로 나온다.
    • document.addEventListenr('DOMContentLoaded', ...)로 사용
  • load
    • HTML로 DOM 트리가 만들어지고 CSS, JS와 Assets들이 모두 load되면 발생한다.
    • Assets들의 실제 크기를 알려면 이때를 이용해야한다.
    • window.onload로 사용

==와 ===의 차이점은 무엇인가요?

JS에서 JS Magic을 쉽게 경험 할 수 있는 비교연산자이다.

다만, == 는 타입이 다르면 타입을 서로 같게 변환 해 주고, === 는 타입 변환도 하지 않고 값을 비교한다.

즉, == 는 타입이 달라도 값만 같으면 true 를 반환하고 === 는 타입과 값 모두 값아야 true를 반환한다.

다음 JS Magic을 통해서 == 이 어떻게 위험한지 확인 해 보자

1 == "1"; // true
1 == [1]; // true
1 == true; // true
0 == ""; // true
0 == "0"; // true
0 == false; // true
WONDERFUL

편의를 위해 null과 undefined 를 비교할 때를 제외하고는 == 은 사용하지 않도록 하자.

JavaScript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.

동일 출처 정책(same-origin policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리해, 공격받을 수 있는 경로를 줄입니다. MDN

즉, 웹 브라우저가 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 비동기 요청을 주고 받을 수 있도록 한 정책이다.

프로토콜, 호스트, 포트는 크롬 개발자 도구에서 location을 찍어보면 알 수 있다.

location

다시 말해 동일 출처 정책이란 같은 Origin 출처의 서버로만 요청을 주고 받을 수 있다는 것이다.

  • http://www.same-domain.com/ --> http://www.same-domain.com = same-origin
  • http://www.same-domain.com -/-> http://www.cross-domain.com = cross-origin

뿐만 아니라 https: 의 기본 포트인 443에서 같은 origin의 8080포트로 요청을 보내도 cross-origin이 뜬다.

이를 해결하기 위해서 자주 접하는 단어인 CORS를 사용한다.

Cross-Origin Resource Sharing(CORS) 은 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘입니다. 다른 출처의 자원. 웹 응용 프로그램은 자체와 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청할 때 cross-origin HTTP 요청을 실행합니다.MDN

즉, Same-Origin Policy의 문제점을 해결하기 위한 정책인 만큼 CORS란 cross-Origin 즉, 출처가 다른 도메인에서의 AJAX요청이라도 서버 단에서 데이터 접근 권한을 허용하는 정책이다.

이를 해결하려면 아래 방법 중 하나를 시도 할 수 있다.

  • 서버
    • Access-Control-Allow-Origin 응답 헤더에 * 로 처리해서 모든 도메인 가능하도록 하기
    • 미들 웨어(보통 library 사용)
  • 클라이언트
    • 프록시 설정
      • img
      • 다양한 이유로 (주로 보안의 문제로) 직접 통신하지 못하는 두 개의 컴퓨터 사이에서 서로 통신할 수 있도록 돕는 역할을 가리켜 프록시라 일컫는다.
      • 클라이언트 - 서버 중간에서 요청을 받아 Access-Control-Allow-Origin헤더를 추가해주는 중간 다리 역할을 놔주는 방법으로 해결할 수 있다.

Mini Coding Test

다음이 작동하도록 JS 를 작성 해 보세요.(EASY)

duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]

해결 방법에는 여러가지가 있지만 아래와 같이 함수를 만들어 해결 할 수 있을 것이다.

const duplicate(arr) => {
  return arr.concat(arr)
}

Self check

  1. 만약 HTML 문서 끝에 <script /> 가 있다면, DOMContentLoaded 는 <script /> (이전/ 이후)에 발생한다.

    • 단, ______ 속성이 있는 <script />나 <script /> 내에 동적으로 생성된 엘리먼트가 있을 경우에는 DOMContentLoaded 를 막지 않는다.
  2. <script>
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded')); ···  1

  window.onload = () => log('window onload'); ···  2
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe> ··· 3

<img src="http://en.js.cx/clipart/train.gif" id="img" />
<script>
  img.onload = () => log('img onload'); ··· 4
</script>

    위 코드에서 log가 찍히는 결과는 ?

  3. null == undefined의 결과와 이유는 ?

  4. Array.prototype의 method중 concat()과 join()의 차이점은?

Reference

4da184a2980ba2b063f55a88b4e89e8b120ee436