HTML
일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유는 각각의 파일이 웹 페이지를 렌더링하는 과정에서 어떤 순서로 로드되는지에 대한 영향을 받기 때문입니다.
- CSS 파일은 페이지가 로드되기 전에 먼저 로드되어야 하기 때문에 head 요소에 위치시키는 것이 좋습니다. 반면, JavaScript 파일은 페이지가 로드되고 나서 실행되어야 하는 경우가 많기 때문에 body 요소가 끝나기 직전에 위치시키는 것이 좋습니다.
- 이렇게 파일의 로드 순서를 올바르게 지정하면 웹 페이지의 성능을 최적화할 수 있습니다. 또한, 스크립트 파일을 body 요소 맨 끝에 위치시키면 페이지 로드 시간을 단축시키고 사용자가 페이지를 볼 수 있는 시점을 빠르게 만들 수 있습니다.
li 요소는 왜 ul 요소의 자식 요소여야만 하나요?
li요소는 목록을 나타내는ul또는ol요소의 자식 요소로 위치해야 합니다. 이는 웹 표준과 웹 접근성을 준수하기 위한 규칙입니다.ul또는ol요소는 목록을 나타내는 요소이며,li요소는 리스트 항목을 나타내기 때문에 이를 따르지 않으면 올바른 HTML 문법이 아니며, 웹 페이지의 호환성과 가독성, 유지보수성 등이 향상되지 않습니다.
id 속성과 class 속성의 차이에 대해서 설명해주세요.
- id 속성과 class 속성은 모두 HTML 요소에 대해 추가적인 정보를 제공하기 위한 속성이지만, 그 역할과 사용법에서 차이가 있습니다.
- id 속성은 해당 요소를 구분하기 위해 사용되며, 한 HTML 문서 내에서 고유해야 합니다. 따라서 동일한 id 값을 가진 요소가 여러 개 있으면 안 됩니다. 주로 스타일링이나 자바스크립트를 적용할 때 특정 요소를 가리키기 위해 사용됩니다.
- 반면, class 속성은 여러 요소들에 대해 같은 스타일을 적용하거나, 자바스크립트에서 해당 요소들을 선택하기 위해 사용됩니다. 한 요소가 여러 개의 클래스를 가질 수 있고, 다른 요소에서도 같은 클래스를 공유할 수 있습니다. 따라서 class 속성은 id 속성과 달리 HTML 문서 내에서 중복해서 사용될 수 있습니다.
- 요약하면, id 속성은 고유한 식별자로서 한 요소에 대해 유일하게 사용되며, class 속성은 그룹핑을 위해 여러 요소에서 공유하여 사용됩니다.
CSS
CSS box model에 대해서 설명해주세요.
- CSS box model은 HTML 요소의 크기와 위치를 결정하는 모델입니다. 각각의 HTML 요소는 content, padding, border, margin으로 이루어진 상자 형태의 영역으로 나누어집니다.
- content는 요소의 실제 내용이 들어가는 영역을 의미하며, padding은 content 주위에 여백을 설정하는 영역, border는 padding 주위에 경계선을 설정하는 영역, margin은 border 바깥쪽에 공백을 설정하는 영역입니다.
- 이러한 영역은 각각의 크기를 지정할 수 있으며, 요소의 크기는 content, padding, border, margin의 크기의 합으로 결정됩니다. 또한, box-sizing 속성을 통해 content 영역의 크기를 계산하는 방법을 지정할 수 있습니다.
- CSS box model은 요소의 레이아웃을 결정하는 중요한 개념으로, 웹 페이지 디자인과 개발에 필수적인 지식입니다.
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
- flex 기능을 이용하여 로그인 폼 컴포넌트를 가운데 위치시키기 위해서는 부모 요소에 display: flex 속성을 주고, align-items: center와 justify-content: center를 이용하여 로그인 폼을 가운데 정렬할 수 있습니다.
display: flex를 사용하여 부모 요소를 flex container로 만들고, align-items: center와 justify-content: center를 통해 가운데 정렬합니다. 로그인 폼 컴포넌트에는 별도의 위치 지정이 필요 없으므로 추가적인 스타일링이 필요하지 않습니다. 이렇게 작성하면 간단한 로그인 폼 컴포넌트를 가운데 위치시킬 수 있습니다.
간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
- author-container 클래스가 적용된 div 요소를 flex 컨테이너로 만들고, 내부 요소들을 수평으로 배치하기 위해 justify-content: space-between; 속성을 사용합니다. 그리고 align-items: center; 속성을 사용하여 수직 방향으로 중앙 정렬을 수행합니다. 이렇게 하면 author-container 클래스가 적용된 div 요소의 자식 요소들인 글쓴이와 공유가 화면의 좌우 양 끝으로 배치되고, 그 중간에 빈칸이 자동으로 생성됩니다.
JavaScript
스코프에 대해서 설명해주세요.
- 자바스크립트에서 스코프(Scope)는 변수의 유효범위를 의미합니다. 스코프는 변수가 선언되어 사용될 수 있는 영역을 정의하며, 변수의 생명주기와 밀접한 관련이 있습니다.
- 스코프는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉘며, 변수가 선언된 위치에 따라 결정됩니다. 전역 스코프에서 선언된 변수는 어디서든지 접근이 가능하지만, 지역 스코프에서 선언된 변수는 해당 지역 내에서만 접근할 수 있습니다.
- 또한, 스코프는 함수 스코프(Function Scope)와 블록 스코프(Block Scope)로도 나뉩니다. 함수 스코프에서 선언된 변수는 해당 함수 내에서만 접근이 가능하며, 블록 스코프에서 선언된 변수는 해당 블록 내에서만 접근이 가능합니다.
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
- 배열이나 객체를 const로 선언하면 해당 변수를 재할당할 수 없습니다. 그러나 변수가 const로 선언되었다고해서 해당 변수가 참조하는 배열이나 객체가 불변해지는 것은 아닙니다. 즉, const로 선언된 배열이나 객체의 요소나 속성은 여전히 변경될 수 있습니다.
- 이는 const 선언이 변수가 가리키는 메모리 주소를 고정시키는 것이지 변수가 참조하는 메모리의 내용을 고정시키는 것이 아니기 때문입니다. 그러므로 const로 선언된 배열이나 객체의 요소나 속성을 변경하는 것은 변수가 참조하는 메모리의 내용을 변경하는 것이 아니라, 해당 요소나 속성이 저장된 메모리의 내용을 변경하는 것입니다. 이는 const로 선언된 변수의 값이 불변인 것과는 다릅니다.
- 따라서 const로 선언된 배열이나 객체의 요소나 속성을 변경하는 것은 가능합니다. 그러나 이는 코드의 가독성을 해치고 예기치 않은 동작을 초래할 수 있으므로 가능한 이러한 동작은 피하는 것이 좋습니다.
원시 자료형과 참조 자료형에 대해서 설명해주세요.
- 원시자료형은 숫자(number), 문자열(string), 불리언(boolean), null, undefined 5가지 타입으로 구성되어 있습니다. 원시자료형은 값(value)을 직접 할당하고, 이 값은 변경될 수 없습니다.
- 참조자료형은 객체(object), 배열(array), 함수(function) 등이 있습니다. 참조자료형은 변수에 객체의 주소값을 할당하며, 변수가 객체를 참조하게 됩니다. 따라서 변수의 값은 변경될 수 있습니다.
- 원시자료형은 값을 직접 할당하고, 이 값은 변경될 수 없지만, 참조자료형은 변수에 객체의 주소값을 할당하며, 변수의 값은 변경될 수 있습니다.
얕은 복사와 깊은 복사에 대해서 설명해주세요.
- 복사란 기본적으로 배열이나 객체와 다른 주소값을 가지면서 요소의 값은 같은 새로운 배열이나 객체를 생성하는 것을 의미합니다.
- 얕은 복사는 배열이나 객체의 1-depth까지만 복사하고, 그보다 깊은 배열이나 객체는 원본과 같은 주소값을 가집니다. 얕은 복사의 방법으로는 slice(), Object.assign(), spread styntax 등의 있습니다.
- 깊은 복사는 배열이나 객체의 모든 depth를 복사하는 것입니다. 모든 depth에서 원본과 다른 주소값을 가집니다. javascript 내장 함수로는 깊은 복사를 할 수 있는 방법이 없으며, 외부 라이브러리를 사용하면 깊은 복사를 할 수 있습니다.
클로저에 대해 설명해주세요.
- 클로저(closure)란, 함수가 선언될 때의 환경을 기억하여, 함수가 이 환경을 기반으로 실행되는 것을 말합니다. 이 때 함수는 자신이 선언된 렉시컬 스코프(lexical scope)에서 외부 변수(lexical environment)를 참조할 수 있습니다.
- 클로저는 함수형 프로그래밍에서 함수를 사용하는 패턴 중 하나로, 특정 함수 내에서만 사용되는 지역 변수를 보호하고, 그 변수를 기억하며, 나중에 다시 사용할 수 있게 합니다.
- 클로저를 구현하는 방법은 다양하지만, 가장 일반적인 방법은 중첩된 함수를 사용하는 것입니다. 이 때 외부 함수의 변수를 내부 함수에서 참조하게 됩니다.
DOM
innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
- innerHTML 메서드와 textContent 메서드는 모두 DOM(Document Object Model) 요소의 내용을 조작하는 데 사용됩니다. 하지만 두 메서드는 다른 방식으로 동작합니다.
- innerHTML 메서드는 HTML 코드 문자열을 인자로 받아 해당 요소의 내용을 바꿉니다. 이 때 HTML 코드 문자열 안에는 태그나 속성 등도 포함될 수 있으며, 해당 요소의 하위 요소들도 함께 변경됩니다. 따라서, 보안 측면에서 취약하다는 단점이 있습니다.
- 반면에 textContent 메서드는 텍스트 문자열을 인자로 받아 해당 요소의 내용을 변경합니다. 이 때 HTML 태그나 속성 등은 모두 무시되고, 텍스트 문자열 그대로가 요소의 내용으로 설정됩니다. 따라서, 텍스트만 표시되어야 하는 경우에는 textContent 메서드를 사용하는 것이 좋습니다.
event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
- event.preventDefault() 메서드는 이벤트가 발생한 요소의 기본 동작을 취소합니다. 이 메서드는 보통 이벤트 리스너 내에서 사용되며, 특정 이벤트에 대한 브라우저의 기본 동작을 막아야 할 때 사용합니다.
- 예를 들어, 링크를 클릭하면 브라우저는 해당 링크의 주소로 이동하도록 기본 동작을 설정합니다. 이 때, event.preventDefault() 메서드를 사용하면 링크 클릭 시 해당 페이지로 이동하지 않도록 할 수 있습니다.
- preventDefault() 메서드는 이외에도 다양한 상황에서 사용될 수 있습니다. 예를 들어, 폼(form) 제출 이벤트에서 preventDefault() 메서드를 사용하면 페이지가 다시 로드되는 것을 막고, AJAX를 이용한 비동기 처리를 할 수 있습니다.
- 또한, 드래그 앤 드롭(drag and drop) 이벤트에서 preventDefault() 메서드를 사용하면 브라우저가 요소를 이동시키는 기본 동작을 막고, 개발자가 직접 요소를 이동시킬 수 있습니다.
코린이