S1. 기술면접 연습하기

나현·2022년 9월 19일
Section_1기술면접코드스테이츠프론트엔드학습일지
0

학습일지

목록 보기
16/53
post-thumbnail

이번 포스트에서는 Section 1이 끝나고 배운 내용을 토대로 기술면접을 연습했습니다.


기술 면접 연습 방법

  1. 질문 고르기
  2. 질문 한 문장으로 답하기
  3. 관련 핵심 키워드 찾기
  4. 키워드를 토대로 한 문장에 살 붙이기
  5. 예상 꼬리 질문 파악하기
  6. 카메라 보고 연습하기

예상 질문 리스트

  • HTML
  1. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
  2. <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
  3. id 속성과 class 속성의 차이에 대해서 설명해주세요.
  • CSS
  1. CSS box model에 대해서 설명해주세요.
  2. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
  3. 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
    div.author-container
    +--------+------+------+
    | 글쓴이 | 빈칸 | 공유 |
    +--------+------+------+
  • JavaScript
  1. 스코프에 대해서 설명해주세요.
  2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
  3. 원시 자료형과 참조 자료형에 대해서 설명해주세요.
  4. 얕은 복사와 깊은 복사에 대해서 설명해주세요.
  • DOM
  1. innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
  2. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.

기술 면접 연습 과정 - 예시

0) 질문 고르기

Javascript - 1. 스코프에 대해서 설명해주세요.

1) 한 문장으로 답하기

Javascript에서 스코프란 변수의 접근 범위를 의미하며, 변수의 종류에 따라 스코프가 다릅니다.

2) 관련 핵심 키워드 찾기

  • 스코프의 종류(블록 스코프, 함수 스코프)
  • 변수의 종류에 따른 스코프 범위(var, let , const)
  • 스코프의 특징

3) 키워드를 토대로 살 붙이기

스코프의 종류

전역 스코프(Global Scope)는 가장 바깥쪽의 스코프이며 그 반대는 지역 스코프(Local Scope)라고 한다.
지역 스코프에는 블록 스코프, 함수 스코프가 있다.
블록 스코프(block scope)는 중괄호({})로 감싸진 영역을 의미한다.(화살표 함수는 블록 스코프이다.)
함수 스코프(function scope) : 함수로 둘러쌓인 영역을 의미한다.

스코프의 특징

안쪽에서 선언한 변수는 바깥쪽에서 사용이 불가능하다.
바깥쪽에서 선언한 변수는 안에서도 사용이 가능하다.
스코프는 중첩이 가능하다.
지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

변수에 따른 스코프 범위

letconstvar
함수 스코프OOO
블록 스코프OOX(화살표 함수만 예외로 O)

스코프 예시

let descartes="나는 존재한다.";
function checkScope(value){
	let thinking="나는 생각한다, 고로 - "
    console.log(thinking+value);
}

checkScope(descartes);//나는 생각한다, 고로 - 나는 존재한다.

console.log(thinking+descartes);//ReferenceError
console.log(thinking);//ReferenceError
console.log(descartes);//나는 존재한다.

외부에서 descartes를 접근해보면 그는 존재하나 thinking은 에러임을 알 수 있다.
함수 내부에서는 외부의 descartes, 내부의 thinking을 사용하고 접근할 수 있지만
함수 외부에서는 내부의 thinking을 사용할 수 없다.

즉, 외부(전역 스코프)에서는 내부의 함수 스코프로 접근할 수 없지만,
함수 스코프에서는 전역 스코프로 접근할 수 있다.

최종 답변
Javascript에서 스코프란 변수의 접근 범위를 의미합니다.
스코프는 가장 바깥의 영역을 전역 스코프, 반대를 지역 스코프라고 합니다.
지역 스코프에는 중괄호({})로 된 블록 스코프, 함수 스코프가 있습니다.
스코프의 가장 큰 특징은 내부에서 선언한 변수는 외부에서 접근할 수 없지만 외부에서 선언한 변수는 내부에서도 접근이 가능하다는 점입니다.
예를 들어 함수 내부에 변수 Y를 선언하고 전역에 X를 선언했다면, 변수 Y는 함수 내부에서만 참조할 수 있습니다.
이외에 스코프는 중첩이 가능하며 전역보다 지역 스코프에서 선언한 변수에 우선순위가 있습니다.
변수의 종류에 따라 스코프도 다릅니다. let,const는 블록 스코프, 함수 스코프에 영향을 받지만 var는 함수 스코프와 블록 스코프 중 화살표 함수에만 영향을 받습니다.

4) 예상 꼬리 질문 대비

  • 스코프에 따른 변수 선언.사용시 주의사항이 있나요?
    전역 변수와 var 사용을 자제하는 것이 좋습니다.
    전역 변수와 var는 어디서나 사용할 수 있다는 편리함이 있으나 스코프의 영역이 넓어 다른 함수나 알고리즘에 의해 수많은 변경(부수 효과. side effect)이 일어날 수 있습니다. 또한 잘못 사용시 내장 함수의 변수를 덮어쓸 수도 있기 때문에 프로젝트 규모가 커질수록 let과 const만을 사용하여 프로그래밍 하는 것이 좋습니다.

Section 1 예상 질문 답변 리스트

HTML

1. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

  • CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하는 이유:
    렌더링이 두 번되는 것을 방지하고 웹표준 및 웹접근성을 준수하기 위해서입니다. CSS의 <link>태그를 <head>에 위치하면 웹페이지가 렌더링되는 동시에 스타일이 적용되지만, <body>에 위치하면 기존 HTML이 렌더링 되고 다시 CSS를 불러와 적용시키게 됩니다. 불가능하진 않으나 이는 불필요한 렌더링을 증가시키고 웹표준에도 맞지 않습니다.

  • JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유:
    그렇지 않으면 DOM 조작, 이벤트 등의 작업을 할 경우 필요한 HTML요소가 로드되지 않아 코드가 제대로 작동하지 않을 수 있습니다. 브라우저가 웹 페이지를 렌더링할 때 순차적으로 불러오기 때문입니다. 그리고 사용자 입장에서 페이지가 렌더링 될 때 HTML, CSS부터 먼저 보여야 불편하지 않습니다.

2. <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
네, 그렇습니다. 지키지 않아도 작동이 안되는 것은 아닙니다만, 시멘틱 마크업과 사용자의 편의 즉 UX를 고려하면 list는 이름 그대로 ul(unordered list)나 ol(ordered list)의 자식요소가 되어야 합니다.

3. id 속성과 class 속성의 차이에 대해서 설명해주세요.
id, class는 HTML CSS선택자로 id는 웹문서에 유일해야 하고, class는 같은 스타일을 적용할 수 있는 속성입니다.
id는 웹문서에 중복이 되어서는 안되며, class는 같은 이름의 속성값을 가질 경우 같은 스타일이 적용됩니다.

CSS

1. CSS box model에 대해서 설명해주세요.
CSS box model은 HTML 요소를 시각적으로 배치하기 위한 모델입니다.
박스모델에는 margin, padding, border, content(width, height)가 있으며 요소가 블록이냐, 인라인이냐에 따라 박스모델을 활용해 요소에 여러 CSS를 적용할 수 있습니다.
박스모델은 크롬 개발자 도구에서 원하는 요소를 선택하고 하단의 'computed'탭을 클릭하면 직관적으로 확인할 수 있습니다.
이 박스모델을 고려하여 CSS 속성을 사용할 때 border와 padding을 자동으로 계산하여 반영하도록 작업하면 작업시 편리한데요, 이를 위해 주로 box-sizing:border-box 속성을 사용하기도 합니다.

2. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
display:flex를 이용하는 방법, position을 이용하는 방법 등이 있습니다.
flex를 사용하는 방법으로 부모 요소에 display:flex를 지정 후 justify-content:center, align-item:center로 각각 자식 요소를 가로 가운데 정렬, 세로 가운데 정렬 할 수 있습니다.
position을 사용하는 방법으로 부모 요소에 position:relative 를 지정 후, 자식 요소에 position:absolute; left:50%; top:50%; transform:translate3d(-50%, -50%, 0); 을 지정하는 방법이 있습니다.
이외에도 여러 방법이 있으나 flex를 사용하면 요소를 더 다양하게 배치할 수 있으며, position은 다른 요소 위에 요소를 겹칠 수 있다는 특징이 있습니다.

3. 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
보편적으로 div.author-container에 display:flex; justify-content:space-between; align-item:center; 을 적용하면 됩니다.
만약 글쓴이 부분과 공유 부분이 일정 간격을 유지해야 한다면 각 너비를 적용하고, 빈칸에 flex-grow:1을 적용하면 길이를 유동적으로 적용할 수 있습니다.

JavaScript

1. 스코프에 대해서 설명해주세요.
Javascript에서 스코프란 변수의 접근 범위를 의미합니다.
스코프는 가장 바깥의 영역을 전역 스코프, 반대를 지역 스코프라고 합니다.
지역 스코프에는 중괄호({})로 된 블록 스코프, 함수 스코프가 있습니다.
스코프의 가장 큰 특징은 내부에서 선언한 변수는 외부에서 접근할 수 없지만 외부에서 선언한 변수는 내부에서도 접근이 가능하다는 점입니다.
예를 들어 함수 내부에 변수 Y를 선언하고 전역에 X를 선언했다면, 변수 Y는 함수 내부에서만 참조할 수 있습니다.
이외에 스코프는 중첩이 가능하며 전역보다 지역 스코프에서 선언한 변수에 우선순위가 있습니다.
변수의 종류에 따라 스코프도 다릅니다. let,const는 블록 스코프, 함수 스코프에 영향을 받지만 var는 함수 스코프와 블록 스코프 중 화살표 함수에만 영향을 받습니다.

2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
배열과 객체는 참조 자료형이어서 변수에 원본 값이 아니라 주소가 저장되기 때문입니다.
그래서 요소나 속성을 추가하거나 삭제해도 원래의 데이터는 영향이 가지만, 주소값 자체에는 영향이 없기에 재할당이 일어나지 않습니다.
따라서 const로 선언해도 요소나 속성을 추가할 수 있습니다.

3. 원시 자료형과 참조 자료형에 대해서 설명해주세요.
데이터는 저장하는 방식에 따라 원시 자료형(primitive data type)과 참조 자료형(reference data type)으로 나뉩니다.
원시 자료형은 변수에 값 자체를 저장할 수 있으며 객체가 아니면서 메서드를 가지지 않는 타입입니다. 종류로는 number, string, boolean, null, undefined 등이 있습니다.
참조 자료형은 변수에 실제 값이 아닌 주소값이 저장됩니다. 실제 값은 고정되지 않은 저장공간인 heap이라는 곳에 따로 저장됩니다. 종류로는 배열, 객체, 함수 등이 있습니다.
이렇게 저장방식에 차이가 있기 때문에 원시 자료형을 다른 변수에 할당하면 값 자체가 복사되지만, 참조 자료형을 다른 변수에 할당하면 실제 값의 주소를 복사합니다. 때문에 원시 자료형은 복사한 변수의 값을 수정해도 원본에 영향이 가지 않지만 참조 자료형은 복사한 변수의 값을 수정하면 원본에도 영향이 갑니다. 따라서 참조 자료형을 복사하고 싶을 때는 메서드를 잘 활용해야 합니다.

4. 얕은 복사와 깊은 복사에 대해서 설명해주세요.
원시 자료형은 변수에 값 자체를 보관하며 참조 자료형은 변수에 그 값이 있는 주소를 보관합니다. 때문에 원시 자료형을 복사하면 그 값 자체가 복사되지만
참조 자료형을 복사하면 실제 값의 주소가 복사됩니다.
이렇게 값 자체가 복사되는 것을 깊은 복사, 주소만 복사되는 것을 얕은 복사라고 합니다.
만약 1차원 배열이나 객체를 복사할 때 Array.slice() 등의 메서드를 사용하면 깊은 복사가 되는 것 같지만 2차원 이상의 중첩된 배열이나 객체일 경우 주소값만 복사가 됩니다. 이는 깊은 복사처럼 보이는 얕은 복사로 실제 깊은 복사를 하기 위해서는 다른 방법을 사용해야 합니다.
이 문제를 해결하기 위해 JSON.stringify()를 사용해 배열을 JSON 문자열로 변환한 후, JSON.parse()로 다시 배열을 구성하는 방법이 있습니다.
(추후 학습 후 깊은 복사 방법 추가할 것)

DOM

1. innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
자식 노드를 innerHTML 메서드로 작성하거나 불러오면 자동으로 노드의 형태로 적용하거나 불러올 수 있습니다. 반면 textContent 메서드는 브라우저에 렌더링되는 것처럼 텍스트 콘텐츠로 적용되거나 불러올 수 있습니다.
innerHTML을 사용하면 DOM 조작이 편리하지만 보안 상의 이유로 사용하지 않으므로 텍스트만 다룰 때는 textContent를 사용하는 것이 좋습니다.

2. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
어떤 이벤트를 등록할 때, 해당 이벤트에 대해 기본 동작을 실행하지 않도록 지정하는 메서드입니다.
예를 들어 submit 버튼을 클릭하면 페이지가 새로고침되지만 event.preventDefault()를 사용하면 페이지가 새로고침 되지 않습니다.
이를 활용하면 form을 제출해도 페이지가 전환되지 않아 사용자의 불편을 막을 수 있습니다.

자가 점검 리스트

질문 이해
질문을 잘 이해했는가?
질문에 대한 답변이 맞는 내용인가?
개념 설명에 맞는 예시였는가?

답변 명확성
이해하기 쉬운 답변인가?
개념 설명이 간단 명료한가?
불명확하게 설명한 부분이 없었는가?
정확한 CS용어를 사용했는가?

자연스러움
개념 설명, 예시가 인위적이지 않았는가?
모르는 부분은 솔직하게 인정했는가?
자세와 표정이 어색하지 않은가?

profile
나현
프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!
이전 포스트

S1 U12. 미니 해커톤 회고

다음 포스트

Section 1 회고

0개의 댓글