간단한 예상 질문에 답변해보기
기본적인 질문
개발자의 일반적인 질문을 추려서 질문에 대한 답변을 한번 적어보았다.
HTML
- 일반적으로 CSS를 불러오기 위해
<link>요소를<head>요소의 자식 요소로 하고, JavaScript를 불러오기 위해<script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
CSS파일은 웹페이지가 로드될 때 브라우저가 CSS 파일을 먼저 다운로드하고 해석하여 랜더링을 하는 방식으로 동작하기 때문에 브라우저가 HTML 파일을 해석하는 동안 레이아웃, 스타일을 적용하는 데 미리 로드되여 페이지의 로딩 속도를 높일 수 있다. 반면 JS파일은 HTML 파일이 로드될 때 JS파일을 다운로드하고 실행시키기 때문이다. 대부분 JS의 목적은 페이지의 상호작용, 기능구현 같은 요소들이 있는데 HTML 파일을 먼저 읽어야 그 다음 목적에 맞는 HTML 요소들의 상호작용을 실시할 수 있기 때문 이다.
<li>요소는 왜<ul>요소의 자식 요소여야만 하나요?
ul요소는 목록을 만들기 위한 태그이고, 그 안에 들어가는 항목을들 나타내기 위해 li요소를 사용합니다. HTML의 문법적인 규칙 중 하나이며, ul의 자식요소로 li를 사용하지 않을 때 문법에 오류가 있을 수 있다. ul요소는 순서가 없는 리스트를 사용한다 순서가 있는 리스트는 ol요소로 사용된다.
- id 속성과 class 속성의 차이에 대해서 설명해 주세요.
특정한 요소의 이름을 부여하는 속성이며 id 속성 같은경우 페이지에서 동일한 이름으로 재사용이 불가능하며 하나의 요소에 각 한개의 id만 부여할 수 있다. class속성은 재사용이 가능하며 여러개의 class를 부여할 수 있고 여러개의 요소에 동일한 class를 부여할 수 도 있다.
CSS
-
CSS box model에 대해서 설명해 주세요.
웹 페이지의 레이아웃을 구성하는 개념 중 하나다. 각 HTML 요소는 BOX 형태로 존재하며, BOX 안에는 콘텐츠, 패딩, 테투리, 마진으로 구성된다.
-
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
`margin : 0 auto` 를 이용하여 `auto` 로 좌우 간격을 같게 맞춰 가운데로 위치시킬 수 있고또는 `display : flex` 를 사용하여 BOX의 속성을 변경시켜 `justify-content : center` 를 사용하여가운데로 위치 시킬 수 있다. 다만 정중앙에 맞출 때 유의할 점은 위치 시키고 싶은 박스들의
width(너비) 값을 갖고 있어야 원하는 곳에 가운데로 맞출 수 있다.
JavaScript
- 스코프에 대해서 설명해 주세요.
스코프란 범위라고 생각합니다. 변수와 함수를 선언 할 때, 변수와 함수가 어디에서 접근 가능한지 결정되는 역할을 한다. 기본적으로 전역 스코프 와 지역 스코프 두 가지의 스코프가 있다.
- 배열, 객체를
const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해 주세요.
배열과 객체에 요소나 속성을 추가하는 것은 변수의 재할당이 아니기 때문에 가능하다. 이는 배열과 객체가 참조 자료형으로 이루어져있기 때문에 이 참조 값은 배열이나 객체의 메모리 주소를 가리키므로 새로운 참조 값을 할당할 순 없지만, 메모리 주소의 내용을 변경하는 것은 가능하다.
- 원시 자료형과 참조 자료형에 대해서 설명해 주세요.
데이터 타입을 나눌 떄 원시 와 참조로 나누어지는데 원시 자료형은 불변하는 값으로 변수에 값을 저장하더라도 기본 값은 변하지 않는다 number, string, boolean 등이 있다. 참조 자료형은 object, array등이 있으며, 참조 자료형은 변수에 저장을 하더라도 같은 메모리 주소를 공유하기에 변수의 값이 변경되어도 원본의 값도 같이 변경된다.
DOM
innerHTML메서드와textContent메서드의 차이에 대해서 설명해 주세요.
innerHTML , textContent는 DOM요소의 내용을 설정하거나 반환하는 매서드이다. 차이점이라고 하면 innerHTML 같은경우 HTML 코드 문자열을 설정하거나 반환한다. textContent 같은경우 HTML요소안에 텍스트노드만 변경이 가능하다.
event.preventDefault메서드는 언제, 왜 사용하는지 설명해 주세요.
이벤트의 기본 동작을 취소하는 매서드입니다.<a>태그 같은 해당 링크 페이지로 이동하는 동작을 취소할 수 있으며 form 을 사용할 때 기본적으로 폼 데이터를 서버에 전송하지 않게 가능하다. 이처럼 기본 동작을 취소하고, 새로운 동작을 수행하는 대체 방법을 구현할 수 있다.
코드를 그리다.