저번주 금요일은 모의면접과 관련하여 수업이 진행되었다.
면접에서 자주 물어보는 개발 질문들을 강사님께서 내주시고 수강생들이 비밀 댓글로 질문에 대한 답을 하는 형식이었다.
생각치도 못한 질문(수업에서 배우지 않은 부분들도 종종 있었음)은 구글링을 통해 답변을 해야 했다. 실제 면접에서 이러한 질문을 받았다면 정말 많이 당황스러울 거 같았다.
수업시간 동안 개발 면접 질문, 지원동기, 내가 회사에 기여할 수 있는 부분 등 아래 내용에 관한 부분을 정리했다.
★ 면접 대비 정리사항
Q1. SOP 가 무엇인지 설명해주세요.
A1. SOP란 동일 출처 정책(same-origin policy)으로, 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이는 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.
=> 악성코드로부터 보호할 수 있는 안전한 정책이며, 이는 동일한 리소스에 대해서만 상호적용이 가능하다.
=> 참고 자료 : MDN
Q2. CORS가 무엇인지 설명해주세요.
A2. CORS란 교 출처 리소스 공유(Cross-Origin Resource Sharing)로, 도메인간의 자원 공유 의미하며, 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여합니다. CORS를 이용하면 SOP의 제약을 받지 않습니다.
=> SOP를 우회하기 위한 방법
=> 참고 자료 : MDN WIKI
[정리]
- 본래 대부분의 브라우저는 타 도메인 간 요청을 SOP(Same-Origin-Policy)에 의해 차단되기 때문에 자신의 출처와 동일한 리소스만 불러올 수 있으나, CORS는 이런 설정을 우회하기 위하여 사용가능한 자원을 헤더를 통해 알려줌으로써 다른 출처의 Resource를 공유할 수 있습니다.
- 서버에서 자원을 공유해달라는 요청에 대한 응답(공유할 지 안할지)을 결정해서 알려준다!!
Q3. 브라우저가 웹 페이지를 랜더링하는 과정을 설명해주세요.
A4. 렌더링이란 서버로부터 HTML을 받아 브라우저에 뿌려주는 과정입니다. 브라우저 렌더링 과정은 우선, 사용자가 페이지에 접속하고 HTML을 서버에서 내려받게 되면 이를 브라우저 렌더링 엔진에서 파싱(처리)합니다. 이렇게 "DOM 트리"를 만들고, link 태그를 통해 CSS 파싱을 해서 "CSSOM 트리"를 만듭니다. DOM 트리와 CSSOM 트리를 결합한 것이 "렌더 트리"가 되고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산해서 화면에 뿌려줍니다. 이 과정을 진행하다가 자바스크립트 런타임 환경에 수행권한을 넘겨 결과 값을 받으면 DOM 파싱은 중단됩니다. 모든 노드 수치를 재계산해서 렌더 트리를 재생성하는 과정을 "reflow"라 하고, 이후 재생성된 렌더 트리를 다시 그리는 것을 "repaint"라 합니다. 리페인트는 레이아웃 수치에 영향을 끼칠 때만 진행됩니다.
Q4. GET 방식, POST 방식에 대해 설명해주세요.
A4. GET과 POST는 HTTP프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식입니다. 먼저, GET방식은 클라이언트에서 서버로 데이터를 전달할 때, 주소 뒤에 key와 value가 결합된 쿼리스트링 형태로 전달됩니다. 주소창에 쿼리스트링이 그대로 보여지기 때문에 보안성이 떨어지며, 길이에 제한이 있으므로 전송 데이터의 한계가 있습니다. POST 방식보다 상대적으로 전송 속도가 빠릅니다.
POST방식은 일정 크기 이상의 데이터를 보내야할 때 사용합니다. 서버로 보내기 전에 인코딩하고, 전송 후 서버에서는 다시 디코딩 작업을 합니다. 주소창에 전송하는 데이터의 정보가 노출되지 않아 GET방식에 비해 보안성이 높습니다. 전송 속도가 GET방식에 비해 느리며 쿼리스트링 데이터 뿐만 아니라 라디오 버튼, 텍스트 박스 같은 객체들의 값도 전송이 가능합니다.
GET,POST방식의 차이는, Get은 주로 웹 브라우저가 웹 서버에 데이터를 요청할 때 사용하고, 웹 브라우저에서 웹 서버로 전달되는 데이터가 인코딩되어 URL에 붙습니다. Post는 웹 브라우저가 웹 서버에 데이터를 전달하기 위해 사용하고, 전달되는 데이터가 보이지 않습니다. 웹 서버에 많은 데이터를 전달하기 위해서는 Post방식을 사용하는 것이 바람직하다고 생각합니다.
[참고]
- get은 a라는 사람이 b라는 사람에게 “야~~ 누구야~~ 나 뭐뭐뭐가 필요하고 뭐뭐가 필요해!! 누구에게나 들리는 방식이며, 내용을 전달하는데 있어 제한이 있다 post는 a라는 사람이 b라는 사람에게 필요한 것을 적어 메모지를 전달하는 것!! 다른 사람들에게 비밀~★
Q5. 우리 회사에 입사한다면 어떤 기여를 할 수 있다고 생각 하나요?
A5. 저는 이 회사에 지원하기 전에 공인중개사 사무소에서 일을 하며 ‘다방’의 웹서비스를 이용해보았습니다. 광고 업로드를 하는 과정에서 거의 비슷한 내용이지만 매번 새롭게 작성을 해야 된다는 부분이 불편하게 느껴졌습니다. 그래서 자주 입력이 되는 내용을 저장해놓고 사용하면 좋겠다 라는 생각을 했고 그러한 서비스를 구현하고자 지원하게 되었습니다. 제가 ‘다방’에 입사하게 된다면 서비스를 직접 이용해본 이용자의 입장에서 불편함을 겪었던 경험을 바탕으로 사용친화적인 서비스를 구현하는 개발자로서 기여를 할 수 있다고 생각합니다.
[참고]
- 본인을 낮추는 것은 지양
- 구체적으로 어떻게 기여할 것인지 말하기
- 적응할것이다 -> 빼기 당연한 말 / 어떻게 기여할 것인가가 질문의 요지
- 본인의 강점 어필
- 원활한 커뮤니케이션 -> 빼기
- 구체적인 나의 강점 경험을 통해 어필
Q6. section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.
A6. 두 요소 모두 특정 영역의 그룹화를 목적으로 사용되는 공통점이 있지만 section 태그의 경우 내용 전환 즉, 주제 전환이 발생하였을 때 사용하며 article 태그의 경우 독립적인 컨텐츠로 이용가능한 영역에서 사용됩니다. 또한 section은 포괄적인 독립 섹션을 나타내기 때문에 시멘틱 웹의 관점에서 구체적인 요소가 없는 경우에만 사용해야 하고, 구체적인 의미론적 요소가 있을 때는 article을 사용할 수 있습니다. 예를 들면, 요소의 콘텐츠가 독립적으로 배포되거나 재사용되도록 의도된 게시물, 댓글, 기사 형태 등의 단위일 때 article을 사용한다고 할 수 있습니다.
Q7. CSS Sprite기법에 대한 정의와 장단점에 대해 설명해주세요.
A7. 스프라이트(Sprite)기법은 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미하며, 한 번의 서버요청으로 sprite 이미지를 불러와 사용합니다. 한번만 요청하기 때문에 많은 브라우저 자원을 사용량이 줄고 로딩 속도가 개선되면, 하나의 이미지 파일만 관리하면 되기 때문에 파일관리에도 유용하다는 장점이 있습니다.
하지만 여러 디바이스에 대응하기 위해서 해상도를 고려하여 작업을 해야 하며, 하나의 이미지 요소의 크기가 변경되면 위치값을 재조정해야 하기 때문에 잦은 수정이 있는 이미지는 스트라이프를 적용하지 않는 것이 좋다는 단점도 있습니다.
Q8. 형상관리도구(버전 관리 시스템)에 대해 전반적인 설명을 해주세요.
(주 사용 도구도 서술해주세요.)
A8. 형상관리란 한마디로 개발과정의 시작부터 끝까지 변하는 모든 사항을 관리하는 작업입니다. 형상관리의 주 사용 도구로는 git이나 svn 등이 있으며, 이를 통해 변경사항을 체계적으로 관리할 수 있다는 장점이 있습니다.
[참고]
-
형상관리의 장점
: 소스코드의 변경이력을 관리할 수 있어서 추적성이 높음. / 배포가 편리함. / 여러 사람이 동일한 소스코드를 공유해 개발할 수 있으며 공유할 때 생기는 버전 충돌 문제 등을 스무스하게 해결할 수 있음. / 기능상 필요하거나 장애가 생길 시 이전 버전이나 Baseline으로 소프트웨어를 되돌릴 수 있음. -
형상관리를 사용하는 이유
- 가시성의 결핍 : 소프트웨어가 무형물이기 때문에.
- 통제의 어려움 : 눈에 보이지 않는 상품의 제작은 통제하기 어려움.
- 추적의 어려움 : 프로젝트의 중간 목표들을 연결시키고 개발과정을 추적하기 어려움.
- 감시의 미비 : 가시성과 추적성의 결핍은 프로젝트의 진행을 감시하기 어렵게 함.
- 무절제한 변경 : 통제되지 않고 관리되지 않는 소프트웨어의 무절제한 변경이 발생함
Q9. alt와 title의 차이에 대해서 설명해 주세요.
A9. alt와 title은 img 태그에서 사용이 되는 속성으로, title은 제목, alt는 설명이라는 차이점을 가집니다. alt는 해당 경로에 이미지가 없거나, 나타나지 않을 때 대신 보이는 텍스트입니다. 리더기를 사용하는 사람들은 alt의 내용으로 이미지를 파악하기 때문에 정확한 설명을 적어주는 것이 좋습니다. 반면, title은 이미지위에 마우스 커서를 올려 두었을 때 나타나는 텍스트로, 이미지의 제목, 요소에 대한 추가적인 설명, 조언 등 추가 정보를 제공하는 텍스트를 적습니다.
Q10. 프론트엔드 관련 공부는 어떻게 진행하고 계신가요?
A10. 추후 보완 (예시 : 저는 프론트엔드 기술의 발전 방향이 자바스크립트와 리액트 숙련도 그리고 사용자경험 증진이라고 생각하는데요. 그 관점에서 리액트를 통해 동적 페이지를 꾸리는 프로젝트를 꾸준히 하고 있습니다. 3개 정도 가지고 있고, 포트폴리오로 이미 공유드린바 있구요. 그리고 사용자경험에 대한 연구를 위해 UX분야 경력자들과 함께 스터디를 3개월째 꾸려오고 있습니다.)
[참고]
- 이러한 질문을 하는 이유???
-
다른 사람들과 함께 공부를 하는지 궁금해서(아래 팁)
- 회사는 동료들과 함께 성장하길 원한다!! 사내 스터디가 있는 이유
- 타인과 상호작용을 잘하고 있다는 것을 작성하기!
-
어디에 중점을 두고 공부를 하고 있는지 궁금해서
- 진짜 FE에 뜻이 있는지 보고 싶어서 물어보는 것
- 회사 들어와도 공부할 의향이 있어 보이는지
- 사내 스터디 추진 중요
- 꿀팁 !
- 스터디 발표를 하고 지식을 공유하는 것, 컨퍼런스 내용 공유 등을 어필하면 좋음
- 스터디를 꾸리는데, 스터디 운영하는 방법을 개선하면서 변화를 주도했음~ 이런 내용 있으면 꼭 얘기하기
내가 언제쯤 개발자로서의 면접을 보게 될 지는 아직 잘 모르겠지만 정말 유익한 수업이었다. 앞으로도 이런 시간을 종종 갖는다고 하셨는데 잘 정리해서 나중에 면접 볼 때 잘 활용 해야겠다.
- TMI: 수업 끝나자마자 라방이랑 과메기 먹으러 튀어나갔다.. 과메기 포항 여행갔을 때 '경동수산'이라고 맛집을 발견해서 이번에는 택배로 시켜서 먹었는데 역시나 존맛탱이었다. 매년 시켜먹을듯!!
★ 긍정의 한줄
인간의 삶 전체는 단지 한 순간에 불과하다. 인생을 즐기자. - 플루타르코스 -
