[Front-end🦁] #36 모의 면접

1. 면접 연습

1. SOP

• Same Origin Policy

어떤 도메인에서 문서를 불러올 때, 도메인 주소가 같아야 서로 상호작용 할 수 있게 하는 보안방식. 다른 리소스를 불러올 때 악의적인 스크립트를 받지 못하도록 사전에 차단하는 것이다. 출처(프로토콜, 포트, 호스트)가 다 같아야함.

const pageOther = document.querySelector('.youtube');
const pageSame = document.querySelector('.sameOrigin');

// pageDocument : same origin 이면 document 를 반환함.
// 근데 왜 sameOrigin 도 반환이 안돼?
// iframe 로딩이 끝나지 않은 상태에서 접근해서.
console.log(pageOther.contentDocument);
console.log(pageSame.contentDocument);

2. CORS

• Cross-Origin Resource Sharing

SOP 정책을 우회해서 다른 도메인간의 자원 요청에도 응답할 수 있게 만드는 것. 응답 헤더에서 허용하면 다른 출처간의 리소스 공유가 가능.

HTTP 헤더를 사용해서, 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여해달라고 브라우저에 요청하는 체제. 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 HTTP 요청을 실행하게 된다.

Access-Control-Allow-Origin: * 로 설정되어 있으면 어디든지 접근할 수 있다. MDN CORS 에서는 이렇게 하지 말 것을 권고하고 있음.

카카오 API

전에.. 안드로이드에 네이버 지도 불러오느라 버젼 오류 나고 난리났었는데.. 카카오 지도는 생각보다 쉽게 불러올 수 있었다.

가이드 문서

SOP에서 다른 출처와 교류하는 것은 막히지만,
script src 같은 것을 통해서 하는 것은 상관 없다.
대신 아무나 접근하면 안되니까 API 키를 통해 접근하게 만든 것.

CORS error 는 브라우저에서 발생시키는 것!!
404 error 같은 것은 서버가 발생시키는 것!

-> 서버에서는 응답이 200인데 브라우저는 CORS error 가 날 수 있다.

3. 웹 페이지 렌더링 과정

0. 사용자가 페이지에 접속해서 HTML을 내려받음.
1. DOM, CSSOM 트리 생성 : 브라우저 렌더링 엔진에서 html을 파싱하여 DOM tree를 그린다. 그 후, link 태그를 통해 CSS를 파싱하여 CSSOM tree를 생성한다.
2. 렌더링 트리 생성 : 이 둘을 결합하고 렌더링에 필요한 부분만 남겨서 렌더링 트리를 생성한다.
3. 레이아웃 단계 : 상대 픽셀을 절대적인 픽셀로 변환하여 BOX 모델을 계산하여 화면에 뿌려준다.
4. 페인팅 단계 : 렌더링 노드의 각 노드를 화면의 픽셀로 변환하여 나타냅니다.
   이 과정을 진행하다가 자바스크립트 런타임 환경에 수행권한을 넘겨 결과 값을 받으면 DOM 파싱은 중단됩니다.

이후 이벤트가 발생하여 html, css가 변화하게 되면,

5. reflow : 변경을 적용하기 위해 모든 노드의 수치를 다시 계산하여 렌더링 트리를 재생성 + 레이아웃 단계
6. repaint : 변경된 렌더링 트리를 화면에 나타냄

단순히 색상 같은 것만 변경되게 되면 repaint만 일어나게된다.

https://medium.com/개발자의품격/브라우저의-렌더링-과정-5c01c4158ce
https://d2.naver.com/helloworld/59361

4. GET, POST

http 요청 메서드의 종류로

	GET	POST
목적	정보 조회	리소스 생성/변경
보내는 정보	http body에 담아서 url?정보정보정보	http 헤더에 담아서
보안	정보가 드러남	드러나지 않음
길이 제한	있음	없음
응답	항상 같음	때에 따라 다름
특징	브라우저에 캐싱해두고 사용

5. 우리 회사에 입사한다면 어떤 기여를 할 수 있다고 생각 하나요?

OMG...

• 구체적으로! 본인의 강점을 어필하면서 남들도 다 쓸 것 같은 것은 빼고 말하자.

6. section, article의 사용 용도

section은 하나의 논리적인 단위로 묶을 수 있는 경우에 사용한다. '구체적인 의미론적 요소가 없는' 일반적인(포괄적인) 독립 섹션으로 더 구체적인 요소가 없는 경우에만 사용한다. article은 독립적으로 쓸 수 있는 하나의 단위에 사용한다. 구체적인 의미론적 요소가 있을 때 사용. 예를 들어서 독립적으로 배포되거나 재사용될 수 있는 게시물, 댓글, 기사 같은 단위에 사용한다.

• 독립적인 것과 다른 내용과 관련이 없는 것은 동의어가 아님.

7. CSS Sprite 기법 정의, 장단점

CSS Sprite 기법은 페이지에서 사용되는 아이콘 이미지들을 하나의 이미지로 만들어서 background-position 의 조정을 통해 아이콘을 사용하는 기법입니다. 장점으로는 이미지를 하나만 불러오면 돼서 요청 횟수가 줄어들어 로딩 시간이 짧아진 장점이 있고, 단점으로는 개별 이미지의 position을 알아야 사용할 수 있고, 아이콘 하나를 변경할 때에도 Sprite 이미지를 다시 만드는.. 과정을 거쳐야한다는 것입니다.

8. 형상관리도구(버전 관리 시스템)

버전 관리 시스템은 파일의 형상을 주기적으로 기록해두는 도구를 말합니다. 단순히 저장소로도 활용할 수 있고, 뭔가 문제가 생긴 경우에 문제가 생기지 않은 버전으로 롤백하거나, 이전 버전과 차이점을 비교하여 오류를 찾아내는 등의 작업을 할 수 있습니다. 또, branch나 pull request 등을 사용할 수 있어서 여러 사람과 협업을 할 때도 유용합니다.

9. alt와 title의 차이

둘 다 이미지를 설명하는 속성입니다. 차이점은 alt 는 대체 텍스트로 이미지가 로딩되지 않았을 때 화면에 보이는 텍스트입니다. 또, 스크린리더를 통해 접근하는 유저들에게도 이미지 내용을 전달할 수 있는 텍스트입니다. 그에 반해 title은 이미지 위에 마우스 커서가 위치했을 때 보여지는 말풍선으로 이미지를 불러오지 못했을 때, 화면에 보이지는 않습니다.

10. 프론트엔드 관련 공부는 어떻게 진행하고 계신가요?

프로젝트를 진행하면서 공부하고 있습니다. HTML과 CSS는 여러 구조를 만들어보는게 도움이 될 것 같아서 여러 홈페이지를 클론 하면서 공부하고 있고, 모르는게 있을 때 찾아보고, 최대한 처음 만들때부터 시멘틱한 구조로 웹 접근성도 고려하여 코드를 짜고 있습니다.

JavaScript는 무작정 프레임워크를 쓰는 것보다 기초를 어느 정도 잡고 프레임워크를 도입하는게 도움이 될 것 같아서 일단 바닐라를 열심히 파 보고 있습니다. 클론 했던 스터디나 이전에 멋쟁이 사자처럼에서 진행했던 화면만 있는 페이지에 자바스크립트를 붙여보면서 공부를 하고 있습니다. 또, 개념이나 원리 이해가 도움이 될거라고 생각해서 딥다이브도 필요할 때마다 읽어보고 있습니다.

• 협업과 팀 프로젝트에 관한 어필을 하는 것이 좋다...