모의 면접
SOP 가 무엇인가요?
Same Origin Policy (동일 출처 정책)
SOP란 직역하자면 동일 출처 정책이란 뜻으로 동일한 출처의 리소스만 상호작용을 허용하는 정책입니다. 역으로 설명드리면 A 출처에서 온 문서가 B 출처에서 가져온 리소스와 상호작용하는 것을 차단하는 보안 정책입니다. 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 인정되며 웹 사이트를 샌드박스화 하여 잠재적인 보안 위협으로부터 보호해주는 정책 입니다.
다른사람의 리소스에 악의적인 코드가 일 수 있음. 하여 보안의 차원에서 사용하는 정책이다.
호스트 주소가 같아야 함!
CORS가 무엇인지 설명해주세요.
다른출처간의 상호작용이 필요할 때, SOP예외 정책으로 CORS정책을 마련합니다. CORS를 이용하면 SOP의 제약을 받지 않습니다.
브라우저가 웹 페이지를 랜더링하는 과정을 설명해주세요
브라우저는 먼저 HTML을 돔트리로 변환합니다 . 이러한 과정 중 문자열을 토큰으로 변환하고, 태그간의 관계를 해석하여 트리로 연결합니다. 링크된 CSS또한 CSSOM 트리로 변환 한 뒤, 둘을 결합하여 렌더링 트리를 생성합니다. 레이아웃을 통해 화면 내 영역들을 표시하고, 페인팅을 통해 화면의 각 요소를 그려냅니다. 추가되는 요소들은 리플로우와 리페인팅을 통해 구현됩니다.
-
파싱 과정
HTML코드를 DOM트리로 파싱합니다. link, img와 같은 태그를 만나면 리소스를 다운로드합니다. script태그를 만나면 DOM파싱을 중단하고 자바스크립트를 해석합니다. (그래서 마지막으로 뺀다) -
스타일 계산
CSS을 파싱하여 CSSOM으로 변환합니다. -
레이아웃단계
-
페인트
레이아웃 트리가 생성되면 트리를 따라 페인트 기록이 생성됩니다.
한 페이지를 여러 레이어로 나눈 뒤, 텍스트, 색, -
컴포지팅 단계
get, post 방식을 설명해주세요
우리 회사에 입사한다면 어떤 기여를 할 수 있다고 생각 하나요?
서비스 개발의 과정 중 중요한 것은 협업능력 즉, 타 부서의 구성원과의 커뮤니케이션입니다. 저는 구글의 한 일원으로 먼저 특유의 친화력을 통해 업무 및 회사 커뮤니티에 빠르게 적응할 것이며, 타 부서간의 소통이 원활하도록 지속적인 피드백 제공 및 피드백 요청, 새로운 기술 및 툴 공유를 통해 함께 성장하는 문화를 구축하여 구글에 기여할 것입니다.
조은님의 조언:
"제가 쓰는 서비스인데 불편한 점을 몇가지 느꼈고, 그 불편한 점은 이런 것들인데 나의 주관이 아니라 객관적으로도 불편한 점이라 생각. 이 부분을 내가 개선해줄 수 있다. 나는 킹갓제너럴엠퍼러 충무공 개발자다."
해당 질문엔 이런 형식으로 답변하면 될 듯 하다.
공통적인 조언은 다음과 같다
1. 본인을 낮추는 것은 지양
2. 구체적으로 어떻게 기여할 것인지 말하기
3. 적응할것이다 -> 빼기 당연한 말 / 어떻게 기여할 것인가가 질문의 요지
4. 본인의 강점 어필
5. 원활한 커뮤니케이션 -> 빼기
6. 구체적인 나의 강점 경험을 통해 어필
section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.
section 요소는 HTML의 전체적인 레이아웃의 구획을 나누는 용도, 요소들을 논리적으로 나눌 때 사용합니다. article태그는 section 내부의 콘텐츠를 감싸거나 이미지, 텍스트와 같은 콘텐츠를 감싸주는 역할을 할 수 있습니다. 또는 콘텐츠가 독립적으로 존재할 수 있을 때 사용합니다.
CSS Sprite기법에 대한 정의와 장단점에 대해 설명해주세요.
자주쓰는 아이콘과 이미지 등을 하나의 이미지로 통합하여 요청 횟수를 줄여주는 기법입니다. spritecow, n-met등의 도구를 사용해 원하는 이미지를 하나로 통합하여 배경 이미지로 만들고, position 즉 좌표값으로 각각의 이미지를 불러올 수 있습니다. 장점으로는 트래픽이 줄어든 다는 점, 요청을 빠르게 처리할 수 있다는 점이 있습니다. 단점으로는 자주 수정해야하는 이미지는 적용할 수 없다는 점, 그리고 각 이미지의 크기가 클 경우 요청 시 오래 걸린다는 점 입니다.
형상관리도구(버전 관리 시스템)에 대해 전반적인 설명을 해주세요.(주 사용 도구도 서술해주세요.)
버전관리시스템이란 프로그래민 소스와 소스코드 관리를 뜻합니다. 코드의 변경점을 관리할 때 주로 사용되며 백업 및 복구가 용이하여 프로그래밍 프로젝트 진행 시 협업에 도움이 됩니다. 의미있고 논리적인 변화들과 수정된 점들을 관리할 수 있습니다. 대표적인 버전관리 도구로는 git 이 있습니다. git은 프로그래밍 관리 시스템으로 레파지토리를 복사하여 로컬에 저장이 가능하며, 브랜치에 commit, push 하여 개별 작업자의 코드를 통합하고, 충돌을 방지합니다.
alt와 title의 차이점
alt는 이미지에 대한 설명을 나타내기도 하면서 이미지가 출력되지 않았을 경우 이미지 대신 나타냅니다. 시각장애인들을 위한 대체 텍스트로 사용되기도 합니다. title 역시 이미지에 대한 설명을 나타내긴 하나 해당 이미지에 마우스 오버해야 나타난다는점, 그리고 이미지 외의 몇몇태그에도 사용할 수 있다는 점에서 차이점이있습니다.
프론트엔드 관련 공부는 어떻게 진행하고 계신가요?
나의 답변:
하루의 15시간을 프론트엔드 공부와 함께하고 있습니다.
현재는 온라인, 실시간 강의, 프로젝트와 스터디를 통한 학습을 병행하고 있습니다. 먼저 온라인 및 실시간 강의를 통해 HTML, CSS, JavaScript, React등의 다양한 언어에 대한 이론을 배우고 실습을 통해 익혀나가고 있습니다. 어려운 점 또는 이해가 안돼는 부분이 있다면 MDN문서나 Stack Overflow에 질문을 올려 궁금한 점을 해소하고 있습니다.
학습 동료들과 함께 현재는 스터디 모집 서비스를 개발해보는 프로젝트를 진행중인데요, 현재는 익숙하지 않은 git사용을 통한 협업, SASS, JavaScript를 활용하여 타 개발자와의 협업 방법을 배우고 직접 부딫혀 다양한 언어와 익숙해지려 노력하고 있습니다.
아직까지는 JavaScript에 대한 이해가 부족하여 스터디 그룹을 만들어 모던 자바스크립트 딥다이브 북스터디를 리드하고있습니다. 발표 형식의 스터디로 읽고 넘어가는 것이 아닌 주제에 대한 온전한 이해를 목표삼아 진행중입니다.
