p r o g r a m m i n g

section 1 기술면접 준비

hee.hee 2022. 5. 23. 11:16

섹션 1을 마치며 기술면접 예상 질문에 간단하게라도 답을 정리할 것이다.

답-내경험-내결론의 형식으로 기술할 것을 권장한다.

 

 

HTML

<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?

<li> 요소의 부모 요소는 <li>의 내용을 보여주는 형식을 결정합니다. 때문에 <li> 요소는 <ul>, 혹은 <ol> 요소의 자식 요소이어야만 합니다. <li> 요소의 표현 형식은 두 가지가 있습니다. 숫자나 알파벳으로 순서를 표현하는 oredered list, <ol> 요소가 부모이면 순서를 표현할 수 있습니다. 반면에 unordered list, <ul> 요소를 사용하면 순서를 표현하는 숫자나 알파벳 없이 표현할 수 있습니다. 즉, <li>요소는 순서가 표시되지 않는 리스트를 표현할 때, <ul>의 자식 요소여야만 합니다.

이 외에도 list를 표현하는 형식으로 <dl> 요소가 있습니다. <dl>은 definition list로, 용어를 설명할 때 <dt>, <dd>요소와 함께 사용됩니다.

 

레퍼런스 답안

요소는 목록 아이템(list item)을 보여주기 위한 요소입니다. 그래서 목록을 담는 <ul> 요소의 자식 요소여야 합니다.

화면 상으로는 아무 문제가 없더라도 이렇게 <li> 요소와 <ul> 요소의 의미에 맞게 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.

(html 리빙스탠다드에서는 부모 요소가 있어야 한다는 것을 읽었다. 마크업 테스트를 했는데 ul 없이 썻더니 오류가 떳었다.

 

hml 밸리데이터를 확인. 시멘틱하게 사용하려고 노력하고 있음. li 혼자 와도 되지만 어느 개발자가 와도 이해할 수 있게 시멘틱하게 작성하기 위해 부모 요소를 사용해야한다.)

 

 

 

 

 

CSS

간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?

div.author-container
+--------+------+------+
|  글쓴이 | 빈칸  | 공유 |
+--------+------+------+

html에서 <li> 요소로 글쓴이, 공유 메뉴를 만들고 CSS에서 <li>의 list stlye를 none으로 설정해 <li>의 bullet points를 없앱니다.  다음으로 display flex로 <li> 요소 두 개를 flex로 만들어 나란히 오게한 뒤, justify content, space between 으로 두 요소를양쪽 끝으로 정렬 합니다.

<ul>
<li>글쓴이</li>
<li>공유</li>
</ul>
ul li{
	list-style: none;
    display: flex;

 

레퍼런스 답변

이 레이아웃은 글쓴이 정보가 모인 컴포넌트와 소셜 공유 로고가 모인 컴포넌트를 각각 왼쪽과 오른쪽으로 붙이는 레이아웃 입니다.

중간에 큰 공간이 필요한데, 이런 레이아웃 구현을 위해서 flexbox가 필요합니다. div.author-container가 flex-container가 되어야 하고 (display:flex) flex-item 간에 최대한 간격을 주기 위해서 justify-content: space-between이 필요합니다. 각 item에 flex-grow 속성을 0으로 주면 불필요하게 요소가 늘어나지 않고, 빈 칸 글쓴이 요소와 공유 요소 컨텐츠가 파지하는 만큼만 빼고 모든 공간을 차지하게 되어서 원하는 그림이 나옵니다.

 

flex를 적용하는 요소 -> flex-container

개발자의 용어 사용하기

 

 

 

 

JS

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명하라

배열과 객체는 참조 자료형 데이터이기 때문에 변수에 값 자체가 아닌, 주소가 할당됩니다. const 키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨 있기 때문에 요소나 속성을 추가할 수 있습니다. 이런 상황에서 const를 쓰는 것은 오히려 권장됩니다. 변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 보다 깔끔하고 안정적으로 코드를 작성할 수 있습니다.

 

 

원시자료형과 참조자료형에 대해 설명해주세요

원시자료형은 변수에 할당할 때 값 자체가 할당되고, 참조 자료형은 변수에 할당할 때 주소가 할당됩니다.

원시 자료형은 숫자, 문자렬, 불린 등 주로 하나의 값을 의미하는 타입이고, 참조 자료형은 배열, 객체와 같은 여러 개의 데이터를 가지는 타입이 있습니다. 참조 자료형의 이런 특징 때문에, 함수의 매개변수로 전달될 때 조심해야합니다. 함수 내에서 참조 자료형을 변경하는 경우 해당 변화가 함수 내에서만 있는 게 아니고 해당 참조 자료형을 참조하는 모든 코드에 영향을 미치기 때문입니다.

 

 

☆ 얕은 복사와 깊은 복사에 대해서 설명해주세요 ☆

더보기

내 답변 -> 얕은 복사는 외부 함수, 변수는 복사가 이루어졌으나, 내부의 변수는 복사한 원본을 참조하고 있는 형태를 말합니다. assign, spread 를 사용할 때 일어나며 객체 안의 객체가 얕은 복사에 해당됩니다. 반면에 깊은 복사는 원본 변수와 아예 다른 주소값을 할당하여 원본 값을 참조하지 않는 고유한 변수가 다시 선언됩니다.

레퍼런스 답변 -> 자바스크립트에서 얕은 복사는 객체를 복사할 때, 객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 카피하는 것을 의미하고, 깊은 복사는 주소만 카피하지 않고, 값을 모두 복사하는 것을 의미 합니다. 대부분의 경우 얕은 복사로도 충분하기 때문에, spread syntax나 Object.assign과 같은 보통의 복사 방법은 얕은 복사가 적용되어 있습니다.

 

 

innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요

innerHTML은 HTML 태그를 인식하여 DOM 조작하는 것처럼 화면에 HTML 요소를 적용하여 넣어주는 반면에, textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용하여 넣어주지 못합니다.

일반 텍스트를 넣을 때는 textContent를 쓰는 것으로도 충분하고, 만약 HTML 요소를 추가하고 싶더라도 가능하면 innerHTML은 사용하지 않는 게 좋습니다. 이제 많은 메이저 브라우저에서 막히긴 했지만, innerHTML에 <script> 요소를 직접 삽입해서 JavaScript를 실행시키거나, 다른 방식으로 JavaScript를 실행시킬 수 있어 보안 우려가 있기 때문입니다.