🦁_21.12.17 TIL

21년 12월 17일

📝 모의 면접

📎 SOP(Same-origin policy)가 무엇인지 설명해주세요.

• 브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다.
  => 제약이 있는 이유? 악성 웹페이지가 개인 정보에 접근하거나 사용자 데이터의 손상을 막기 위해
  • 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용된다.
    => 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르가면 페이지에 접근할 수 없다.
    => 이런 제약사항을 '동일 출처 정책(Same Origin Policy)'라고 한다.
• 서로 다른 도메인일 경우, 서로 상호 보완할 수 없도록 막아놓은 것
  => 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처라고 할 수 있다.
• 아래의 태그로 불러오는 것 가능 : 임베딩 방법 가능
  => 다른 도메인, 리소스에 있는 것을 불러오는 것은 가능
  • <script src="..."></script> 로 추가하는 JavaScript
  • <link rel="stylesheet" href=“…">로 추가하는 CSS
  • <img>로 표시하는 이미지
  • <video>와 <audio>로 재생하는 미디어
  • @font-face로 적용하는 글씨체
  • <iframe>으로 삽입하는 모든 것

📎 CORS(Cross-Origin Resource Sharing)가 무엇인지 설명해주세요.

• 참고 : https://evan-moon.github.io/2020/05/21/about-cors/

📎 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해주세요.

• 렌더링(rendering) : HTML, CSS, JavaScript 파일을 파싱해, 브라우저에 시각적으로 출력하는 과정

• 브라우저 렌더링 전체 과정
  1) 브라우저는 HTML, CSS, JavaScript, 이미지, 폰트 등 리소스를 서버에 요청하고 응답으로 받아온다.
  2) 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다.
  3) 브라우저 JavaScript 엔진은 받아운 JavaScript를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
  4) 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
  5) 화면에 HTML요소를 페인팅한다.

리플로우 : 레이아웃 계산을 다시하는 것

리페인트 : 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것

웹페이지가 사용자에게 보여지기까지

📎 GET 방식과 POST 방식에 대해 설명해주세요.

GET 방식

• URL에 변수(데이터)를 포함시켜 요청
• 데이터를 Header(헤더)에 포함하여 전송
• URL에 데이터가 노출되어 보안에 취약
• 캐싱할 수 있다.

POST 방식

• URL에 변수(데이터)를 노출하지 않고 요청
• 데이터를 Body(바디)에 포함하여 전송
• URL에 데이터가 노출되지 않아 기본 보안은 되어있다.
• 캐싱할 수 없다.

📎 section 요소와 article 요소의 사용 용도에 대해 설명해주세요.

무의식적으로 section 요소가 article 요소보다 더 큰 범위(section은 article을 묶을 수 있지만 그 반대는 안된다고)라고 생각했는데 어떻게 다른가요?

• section 요소와 article 요소는 같은 레벨이므로 어떤 요소가 범위가 더 크고 작고를 나눌 수 없다.
• 신문에서 section은 사회 지면, 스포츠 지면과 같다면, article은 각 지면의 기사라고 할 수 있다. 이 article은 네이버 뉴스에 있어도 그 내용을 이해할 수 있고, 다른 사이트에 있어도 이해할 수 있는 독립적인 요소
• article내에 section으로 나눌 수 있고 여러 article을 section으로 묶을 수 있다.
  => 위젯은 article요소 사용을 권장한다.

추가적으로 공부할 부분

HTML5 Content models

📎 CSS Sprite기법에 대한 정의와 장단점에 대해 설명해주세요.

이미지 스프라이트(image sprite)

• 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미
• 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청
  => 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩시간이 길어짐
  => 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축시킬 수 있다.
• 이미지 파일 수가 적어지므로 관리가 쉬워진다.

CSS 이미지 스프라이트(Image Sprite)

📎 형상관리도구(버전 관리 시스템)에 대해 전반적인 설명을 해주세요. 그리고 주 사용 도구도 서술해주세요.

Version Control System(VCS, 버전 관리 시스템)

• 문서나 설계도, 소스코드 등의 변경점을 관리해주는 소프트웨어
• 버전 관리의 장점
  • 변경점 관리 : 어떤 내용을 누가 작성해서 어느 시점에 들어갔는지 확인 가능
  • 버전 관리: 특정 시점에 꼬리표(tag)를 달아 버전을 표시해주고, 브랜치(branch) 등으로 동시에 여러 버전을 개발 가능
  • 백업 & 복구: 무언가가 잘못되었을 때 다시 특정 시점으로 돌아갈 수 있고, 내용이 날아간 경우에도 복구도 가능
  • 협업 : 같이 일하는 사람들에게 수정사항을 쉽게 공유 가능
• 버전 관리 시스템 - 나무위키

버전 관리 도구

• 공유 폴더 방식 : 버전 관리 자료가 로컬 컴퓨터의 공유 폴더에 저장되어 관리
• 클라이언트 / 서버 방식 : 버전 관리 자료가 서버(중앙 시스템)에 저장되어 관리
  => Subversion(SVN)
• 분산 저장소 방식 : 버전 관리 자료가 하나의 원격 저장소(= 분산 저장소)와 분산된 PC의 로컬 저장소에 함께 저장되어 관리
  => Git

형상관리

• 소프트웨어 변경 사항을 관리하기 위한 활동
  => 개발 과정의 시작부터 끝까지 변하는 모든 사항을 관리하는 작업
• 형상 관리의 중요성
  • 지속적인 소프트웨어의 변경사항을 체계적으로 관리 및 추적 가능
  • 소프트웨어에 대한 무절제한 변경 방지
  • 소프트웨어에서 발견된 버그나 수정사항을 추적 가능
  • 소프트웨어는 형태가 없어 가시성이 결핍되므로 진행 정도를 확인하기 위한 기준으로 사용 가능
• 형상 관리 기능 : 형상 식별, 버전 제어, 형상 통제, 형상 감사, 형상 기록

📎 alt와 title의 차이에 대해서 설명해주세요.

alt

• <img>태그의 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트
• 대체 텍스트이므로 이미지의 내용을 대체할 수 있는 이미지 설명이어야 한다.
• 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다.

<img src="이미지 경로" alt="이미지를 표시할 수 없을 때 출력하는 이미지 설명">

title

• 이미지 위에 마우스 커서가 위치했을 때 보여지는 말풍성(tooltip) 또는 이미지 제목

<img src="이미지 경로" title="마우스 커서가 위치했을 때 보여지는 말풍선(이미지 제목)">

📎 우리 회사에 입사한다면 어떤 기여를 할 수 있다고 생각하나요? (단, 프론트엔드 개발자로 입사했다고 가정)

• 본인을 낮추는 것을 지양
• 구체적으로 어떻게 기여할 것인지 말하기
• 어떻게 기여할 것인가가 질문의 요지이므로 회사의 입장에서 당연한 말은 뺄 것
• 구체적인 경험을 통해 본인의 강점을 어필
• 많은 사람들이 넣는 내용은 뺄 것

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

내용 추가하기

---

마무리

• 답변을 하기 너무 어렵다 히히히
  => 다른 분들은 답변을 정말 열심히 하시는데 나는 대답이 너무 어려워서 생각이 많았지 뭐에요~