블로깅 챌린지 5주차 - [기술면접 학습법]

📝 기술면접 학습법

• 제시되는 단답형 질문이나 본인의 프로젝트 기술면접 질문에 대한 짧은 정답 작성하기
• 예상되는 꼬리질문 준비하기
• 단답형 질문과 꼬리 질문에 대해 풍부한 사례를 자신의 언어로 준비하기
• 다른 사람들의 블로그 자료 참조하여 깊게 고민해보기
• 하나의 기술적인 개념에 대해 결론을 내렸다면, 블로그로 작성해보기

⚡ 정리

• 개발 지식에 대하여 어렴풋이 알고 있는 것이 아닌, 결론은 간단 명료하게, 설명을 구체적으로 자신의 언어로 설명할 수 있도록 모의 면접 연습 / 블로깅 하기.

 

📝  기술면접 질문 목록

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

 ❗️ li요소는 말 그대로 list의 item들을 보여주기 위한 요소 이기때문에, 목록을 담는 ul, ol의 자식 요소여야 합니다.

 

❓ [꼬리질문] ul, ol 요소 없이 단독으로 li 요소를 사용하면 어떻게 되나요?

▶  ul, li 등 부모 요소 없이 li요소를 사용할경우 화면상으로는 아무런 문제가 없더라도 li요소와 ul요소의 의미에 맞게 ✳ Semantic한 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해 할 수 있기 때문에 협업에도 유리합니다.

 

▶  HTML spec에서도 li요소는 ol,ul,menu와 같이 사용하도록 권장하고 있습니다. 

 

 ❓ [꼬리질문] Semantic HTML은 무엇인가요?

▶ Semantic HTML 은 적절한 의미의 태그를 사용하여 정보의 구조에 맞게 마크업하는 HTML작성 방법입니다. 시멘틱 태그를 사용하게 되면, 프로젝트 유지보수 및 코드 파악이 용이하다는 장점이 있습니다. 또한, 검색 엔진 최적화(SEO)와 웹 접근성을 향상 시키는데 도움이 되며, 브라우저나 디바이스 종류에 관계없이 일관된 사용자 경험을 제공 할 수 있습니다.

 

❗️ [ 요약 ] ul요소를 옷장이라고 하면, li요소는 옷장에 들어있는 옷들이라고 볼 수 있습니다.  이는 임의의 제 3자가 보았을때도 옷장안에는 옷이 있을거라고 쉽게 유추할 수 있듯이 ul요소와 li요소를 위와 같은 규칙을 지켜 Semantic하게 작성하는 것이 중요하다고 할 수 있습니다.     

 

 

 

⚡ [CSS] CSS box model에 대해서 설명해 주세요. 

 ❗️ 모든 HTML의 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 부릅니다. 이러한 박스 모델은 각각의 요소에 대한 크기, 위치 및 여백 등을 정의 하기 위해 content, padding, border, margin으로 구분 합니다.

 ❓ [꼬리질문] padding, border, margin, context은 무엇인가요?

  ▶  1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

       2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

       3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

       4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 

 

 ❓ [꼬리질문] CSS에서 height와 width속성은 어떤 요소와 관련이 있나요?

▶ CSS에서 height와 width 속성을 설정할때에는 내용(content)부분만을 대상으로 합니다. 즉, 패딩과 테두리, 마진의 크기는 포함되지 않습니다.

 

 ❓ [꼬리질문]  HTML요소의 높이와 너비는 어떻게 구하나요?(기본값: content-box)

▶ HTML요소 높이 =  T margin + T border + T padding + height + + B padding + B border + B margin

     HTML요소 너비 =  L margin + L border + L padding + width + R padding + R border + R margin   

 

❓ [꼬리질문] content-box와 border-box의 차이가 무엇인가요?.

▶ content-box는 박스사이즈로 설정한 값이 content영역에 한정되며, border-box는 padding와 border를 포함한 값이 됩니다.

 

 

⚡ [JS] 얕은 복사와 깊은 복사에 대해서 설명해 주세요.

 ❗️ 얕은 복사와 깊은 복사는 객체나 배열을 복사하는 두가지 방법입니다. 얕은 복사는 원본 객체나 배열의 참조만을 복사하며, 내부 객체나 배열은 참조 그대로 사용합니다. 따라서 내부 객체나 배열을 변경하면, 원본과 복사본 모두 영향을 미치게 됩니다.

 ❗️ 깊은 복사는 원본 객체(배열)과 복사본 객체(배열)이 서로 다른 메모리 공간을 참조하도록 복사 합니다. 즉 새로운 메모리 공간은 확보하여 복사하는 것으로, 내부 객체나 배열을 변경하더라고 원본과 복사본은 영향을 받지 않습니다.  

 

 ❓ [꼬리질문] spread 연산자, Object.assign(), 배열의 slice()메소드는 어떤 복사 인가요? 

▶ 위의 연산자 및 메소드의 내부 객체나 배열은 참조 그대로 사용하기 때문에 얕은 복사 입니다.

 

 ❓ [꼬리질문] 자바스크립트에서 깊은 복사를 수행할 수 있는 방법이 있나요?

▶ JSON.parse()와 JSON.stringify()함수를 사용하면 깊은 복사 구현이 가능합니다. 하지만, 위의 방법도 객체 내부에 함수가 포함된다면 함수의 값이 null로 바뀌게 되어 사용할 수 없습니다. 따라서 lodash, ramda, 및 rdfc 등의 외부 라이브러리를 이용하여야 합니다.

 

 

 

⚡ [DOM]  innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해 주세요.

❗️ 두 메서드 모두 HTML 요소의 컨텐츠에 접근하는데 사용되는 프로퍼티(속성) 입니다. textContent는 html코드를 필터링하거나 처리하지 않고, 단순 문자열만 처리할 수 있는 반면,  innerHTML은 HTML 구조를 변경하거나 추가할 수 있습니다.

 

❓ [꼬리질문] innerHTML의 단점은 무엇인가요?

 ▶ HTML코드를 동적으로 생성하거나 수정할 수 있으므로, 이를 악용한 XSS공격에 노출될 가능성이 있습니다. 또한, HTML을 분석 해야하기 때문에 성능측면에서도 textContent대비 좀 더 느리다는 단점이 있습니다.