답변하기 위한 준비
- 기술 공부하는 방법: learning curve, 문제를 정의하고 해결하는 것
- 근거를 말할 때 공식문서 말하면 좋음(예: HTML Living Standard)
- 정의(정답)를 말하고, 쉽게 사례 말하고, 했었던 프로젝트를 설명하면서 이해를 높이기
- 면접관에 따라 실제 예시를 먼저 말하고, 추가로 정의질문이 들어왔을 때, 제대로 답변하면 더 좋을 수 있음
예시 질문과 답변
일반적으로 JavaScript를 불러오기 위해 `<script>` 요소를 `<body>` 요소가 끝나기 직전에 배치합니다. 이유가 무엇인가요?
이유1. html을 다 파싱하고 자바스크립트를 시작하기 위해서 사용
- DOM의 혼선을 방지하기 위해서
이유2. 사용자에게 보이는 화면 갱신 속도 개선
- 일반적으로 화면에서 스크립트의 로딩이나 실행이 끝날 때까지 화면을 갱신하지 않음
- 웹 페이지의 화면 갱신이 끝난 후 스크립트를 로딩 / 실행
주의할 점. document.write()가 포함된 스크립트가 있을 때
- <script>를 </body>의 바로 앞에 작성하는 것이 좋지 않을 수 있음
- 모든 document를 파싱하기 전까지는 script를 다운받을 수 없음
id 속성과 class 속성의 차이에 대해서 설명해주세요.
- 공통점: css선택자로 사용할 수 있다
- 차이점:
id는 HTML요소에 하나의 요소(element)에만 아이덴티디를 부여할 수 있음
class는 HTML요소에 여러 개의 요소에 아이덴티디를 부여할 수 있음
- 주의할 점
id의 값이 같은 HTML 요소가 여러 개 있으면 웹 표준에 어긋나기 때문에, 협업하는 다른 개발자나 검색엔진에 혼란을 줌
CSS box model에 대해서 설명해주세요.
- 모든 element, tag는 박스 모델임
- 모든 박스모델은 'contents, padding, border, margin'의 속성을 갖고 있음
- contents : 순수한 콘텐츠
- padding : 콘텐츠와 경계선 사이의 여백
- border : 경계선. 이 선 자체의 모양이나 두께도 바꿀 수 있다.
- margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
p {
width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */
margin: 0 auto;
}
body {
text-align: center; /* 가운데 정렬 */
}
p {
text-align: left; /* 문자들의 가운데 정렬을 해제 */
width: 100px;
margin: 0 auto;
}
스코프에 대해서 설명해주세요.
- 정의: 자바스크립트의 스코프는 변수 또는 함수의 유효범위
- 즉, 변수나 함수를 참조하거나 표현할 수 있는 범위를 말함
- 하나의 스코프 범위 내에서 외부 스코프의 변수에는 접근 가능하지만, 내부 스코프의 변수에는 접근이 불가능함
- 사례를 추가하여 답변하기
참조대상 식별자를 찾아내기 위한 규칙이다
함수 레벨 스코프(함수 선언 시 생김)와 블록 레벨 스코프(let, const로 사용, 중괄호를 기준으로 생김)가 있다
함수 레벨 스코프는 기본적으로 var를 사용하여 변수 참조를 다르게 할 가능성이 있어 최근에는 let, const를 많이 사용함
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요.
- 배열과 객체는 참조 자료형이기 때문에 변수에 값 자체가 아닌 주소를 할당
- const키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가 가능
- const를 사용하면 새로운 값이 할당되는 것을 방지 가능, 깔끔하고 안정적인 코드 작성 가능
- 참고할 url
Object.freeze() - JavaScript | MDN
Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의
developer.mozilla.org
원시 자료형과 참조 자료형에 대해서 설명해주세요.
- 원시 자료형
자바스크립트에서 객체가 아니면서 method를 가지지 않는 6 가지의 타입
string, number,bigint, boolean, undefined, symbol, (null)
원시 자료형은 모두 하나의 정보, 데이터를 담고 있음
값 자체에 대 한 변경이 불가능하지만, 변수에 다른 데이터를 할당가능
- 참조 자료형
원시자료형이 아닌 모든 것
배열(Array)과 객체(object), 함수(function)이 대표적
- 특징
원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고,
참조 자료형이 할당될 때는 보관함의 주소(reference)가 담김
얕은 복사와 깊은 복사에 대해서 설명해주세요.
- 얕은 복사(Shallow Copy)란 객체의 실제 값이 아닌 참조값(주소값)을 복사하는 것
- 깊은 복사(Deep Copy)란 참조값이 아닌 인스턴스 자체를 새로 복사하여 아예 실제값을 복사하는 것
`innerHTML` 메서드와 `textContent` 메서드의 차이에 대해서 설명해주세요.
- innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정 가능
- textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이
해당 노드가 가지고 있는 텍스트 값을 그대로 읽음
`event.preventDefault` 메서드는 언제, 왜 사용하는지 설명해주세요.
- 정의: 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트의 default 동작을 실행하지 않도록 지정하는 함수
- 언제:
<a> tag를 클릭했을 때 지정된 href 링크로 이동하지 않게 하고 싶을 때
<form> 내의 submit 역할을 하는 버튼을 클릭했을 때, 새로 실행하지 않게 하고 싶을 때
'프로그래밍 > CS' 카테고리의 다른 글
| 객체지향 프로그래밍 (프로토타입 체인) (0) | 2022.05.26 |
|---|---|
| 객체 지향 프로그래밍 (0) | 2022.05.25 |
| Unit8 - [Linux/Git] 기초(코드스테이츠 프론트엔드) (0) | 2022.05.09 |
| SQL 알아보기 (0) | 2022.04.04 |
| [독서] 비전공자를 위한 이해할 수 있는 IT지식 (0) | 2022.03.30 |
댓글