기술면접 대비
조금 더 보기 쉽게 정리하자
간략한 한 줄로 설명할 것
일반적으로 JavaScript를 불러오기 위해 <script>요소를 <body> 요소가 끝나기 직전에 배치합니다.
이유가 무엇인가요?
HTML이 다 파싱되고 난 후에 자바스크립트를 적용하기 위해서입니다.
HTML이 다 불러와지지 않고, 자바스크립트를 실행하기 시작하면 자바스크립트 프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방지하기 위해서 자바스크립트를 불러오기 위한 <script>요소는 <body> 요소가 끝나기 직전에 작성합니다.
스코프에 대해서 설명해주세요
스코프는 변수 접근 규칙에 따른 유효 범위를 의미합니다. 스코프에는 몇 가지 중요한 규칙이 있습니다. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 반대는 불가능하고, 중첩이 가능하다는 규칙이 있습니다. 이 규칙이 있어서 함수 body(중괄호) 내에서 전역 혹은 외부 스코프의 변수에 접근 할 수 있습니다. 이름이 겹치는 경우에는 가장 안쪽 스코프를 참조하는 특성이 있어서, 전역 변수와 지역 변수의 이름이 같은 경우 지역 변수를 참조합니다. 이를 이용하여 함수 내 매개변수 이름을 동일하게 지정해 도, 함수 외의 장소에서는 사용되지 않아 변화가 적고 안전한 코드를 작성할 수 있습니다.
스코프는 변수가 접근할 수 있는 범위입니다. 한 스코프 범위 내에서 외부 스코프의 변수에는 접근 가능하지만, 내부 스코프의 변수에는 접근이 불가능합니다.
- JavaScript에서 function scope, block scope의 차이는?
블록 스코프는 중괄호를 기준으로 범위가 구분됩니다.
함수 스코프는 function 키워드가 등장하는 함수 선언식 및 함수 표현식이 해당됩니다
화살표 함수는 함수 스코프가 아닌 블록 스코프로 취급합니다. - JavaScript에서 lexical scope와 dynamic scope의 차이는?
자바스크립트에서 변수의 범위 즉, 스코프는 함수의 정의 위치에 따라 결정됩니다. lexical scope와 dynamic scope는 이 변수의 범위를 결정하는 방식에 차이가 있습니다.
Lexical scope(어휘적 범위): 함수가 정의될 때의 변수 스코프를 따릅니다. 즉, 함수 내에서 변수가 선언된 위치가 그 변수가 사용 가능한 범위입니다. 함수 내부에서 선언한 변수는 해당 함수 내에서만 접근 가능합니다.
Dynamic scope(동적 범위): 함수가 실행될 때의 변수 스코프를 따릅니다. 즉, 함수 호출 위치에 따라 변수가 사용 가능한 범위가 결정됩니다. 함수 내부에서 선언한 변수가 해당 함수가 호출된 곳에서도 접근 가능합니다.
자바스크립트는 Lexical scope를 따르는 대표적인 언어입니다. 즉, 함수의 스코프는 그 함수가 정의된 위치에 의해 결정됩니다. 따라서 함수 내부에서 선언된 변수는 그 함수 내부에서만 접근 가능합니다.
Dynamic scope는 JavaScript에서 지원하지 않습니다. 이와 유사한 동작을 구현하려면, 함수 내부에서 this 키워드를 사용하여 실행 컨텍스트를 참조하는 방법이 있습니다. 하지만 이는 정확한 Dynamic scope와는 차이가 있습니다. - var로 선언된 변수는 function scope, block scope 중 어떤 scope를 가지는가?
var로 선언된 변수는 function scope를 가집니다. 특히 for 문을 사용할 때 이 차이가 두드러지는데, for 문의 중괄호는 block scope지 function scope가 아니기 때문에 for 문의 초기화식에 var를 사용하는 경우, function scope 내에서 var로 선언된 변수가 변경될 수 있습니다. 이런 가능성을 최대한 배제해야 예측 가능한 코드를 작성할 수 있기 때문에 var 사용은 다소 위험합니다.
id속성과 class 속성의 차이에 대해서 설명해주세요
id 속성과 class 속성의 차이는 고유성에 있습니다. id는 고유한 하나의 요소를 정하는데 사용하고, class는 여러 요소들에 사용할 수 있습니다. 하나의 HTML 요소에 적용된 id의 값은 다른 요소에는 적용되어선 안됩니다. 어떤 요소에 id 속성을 부여한다는 것은 그 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문입니다. getElementById는 있어도, getElementsById는 없는 이유입니다. id의 값이 같은 HTML 요소가 여러 개 있으면 웹 표준에 어긋나기 때문에, 협업하는 다른 개발자나 검색엔진에 혼란을 줍니다. 정리하면, id는 하나의 HTML 요소에만 사용할 수 있고, class는 여러 HTML 요소에 사용할 수 있습니다.
HTML에서 id속성과 class 속성은 모두 요소를 식별하는데 사용됩니다.
하지만 id속성과 class 속성에는 차이가 있습니다.
id는 문서 자체에서 유일한 값이여야 합니다. 반면에 class는 문서 내에서 여러 요소가 동일한 class 값을 공유할 수 있습니다.
이 점을 활용하여 css 스타일링 시에도 id를 사용하면 특정 요소의 스타일을 지정할 수 있고, class는 동일한 값을 갖는 여러 요소에 대해 스타일을 적용할 수 있습니다. 또한 id가 우선시되어 class보다 나중에 작성되어도 적용이 됩니다.
id는 검색 엔진 최적화에 중요한 역할을 합니다. 검색 엔진은 id 값을 사용하ㅏ여 웹 페이지의 콘텐츠를 이해하고 인덱싱합니다. 반면에 class는 검색 엔진 최적화에 큰 영향을 미치지 않습니다.
따라서, id는 유일성과 스타일링, 자바스크립트 조작 및 SEO에 중점을 둔 속성이고, class는 여러 요소에 대한 스타일링 및 자바스크립트 조작을 위한 속성입니다.
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 css를 어떻게 작성해야 하나요?(centering)
저는 로그인 폼 컴포넌트를 중간에 위치시키기 위해서 flexbox를 사용하는 것이 가장 좋은 방법 중 하나라고 생각합니다. 로그인 폼 컴포넌트를 감싸는 래퍼 요소가 있다면, 그 래퍼 요소에 display 속성값을 flex로 지정하고, justify-content 속성값은 center, align-items 속성값도 center로 지정하면 됩니다. 이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에, HTML 요소 배치에 주의해야 합니다.
부모 요소에 display:flex를 적용하고 flex-direction:row인 상태에서 justify-content:center를 적용하면 가운데에 위치합니다.
얕은 복사와 깊은 복사에 대해서 설명해주세요
자바스크립트에서의 얕은 복사(shallow copy)는 객체를 복사할 떄, 객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 카피하는 것을 의미하고, 깊은 복사는 주소만 카피하지 않고, 값을 모두 복 사하는 것을 의미합니다. 대부분의 경우 shallow copy로도 충분하기 때문에, spread syntax나 Object.assign과 같은 보통의 복사 방법은 shallow copy가 적용되어 있습니다.
얕은 복사와 깊은 복사는 객체나 배열 등의 자료형을 복사할 때 사용하는 용어입니다.
얕은 복사는 원본 객체나 배열의 내부에 있는 값들을 참조하여 새로운 객체나 배열을 생성합니다.
이 경우 새로운 객체나 배열은 원본 객체나 배열과 동일한 참조를 가지기 때문에 원본 객체나 배열이 변경될 경우 복사된 객체나 배열에도 영향을 미칩니다.
깊은 복사는 원본 객체나 배열의 모든 값들을 새로운 객체나 배열에 복사하여 새로운 참조를 생성합니다.
이 경우 원본 객체나 배열이 변경되더라도 복사된 객체나 배열에는 영향을 미치지 않습니다.
하지만 자바스크립트 내부적으로는 깊은 복사를 수행할 수 있는 방법이 없기 때문에 외부라이브러리를 사용해야 합니다.
innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요
innerHTML은 HTML 태그를 인식하여 DOM 조작하는 것 처럼 화면에 HTML 요소로 적용하여 넣어주는 반면에 textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용 하여 넣어주지 못합니다. 일반 텍스트를 넣을 때는 textContent를 쓰는 것으로도 충분하고, 만약 HTML 요소를 추가하고 싶더라도 가능하면 innerHTML은 사용하지 않는게 좋습니다. 이제 많은 메이저 브라우저에서 막 히긴 했지만, innerHTML에
두 메서드는 HTML 요소의 내용을 조작하는 데 사용되는 두 가지 방법입니다.
innerHTML 메서드는 HTML 요소의 내부 HTML 코드를 문자열로 반환하거나, 새로운 HTML 코드를 설정하여 HTML 요소의 내용을 수정할 수 있습니다. 이 방법은 HTML을 동적으로 생성하거나, 특정 요소의 내용을 편집할 때 사용됩니다.
반면 textContent 메서드는 HTML 요소의 텍스트 내용을 문자열로 반환하거나, 새로운 텍스트를 설정하여 HTML 요소의 텍스트 내용을 수정할 수 있습니다. 이 방법은 특정 요소의 텍스트 내용을 변경할 때 사용됩니다. textContent 메서드는 HTML 코드에서 태그를 제외한 텍스트 내용만 반환합니다.
주의할 점은 innerHTML 메서드를 사용할 때, HTML 코드를 임의로 수정하면서 XSS(Cross-Site Scripting) 공격에 취약해질 수 있다는 것입니다. 따라서 textContent 메서드를 사용하여 텍스트 내용을 변경하는 것이 안전한 방법입니다.
event.preventDefault 메서드는 언제 왜 사용하는지 설명해주세요
preventDefalut는 해당 이벤트에 기본적으로 설정된 기본 액션을 동작하지 않게 만드는 메서드입니다. 이 메서드를 사용하는 가장 대표적인 경우가 form 요소의 submit 이벤트입니다. submit 이벤트는 해당 폼의 정보를 서버로 요청을 보내려는 기본 동작을 가지고 있어서, submit 이벤트가 일어나 고 나면 화면이 의도치 않게 전환되거나 새로고침이 되는 경우가 있습니다. 현대 웹 개발에 들어서는 이런 서버 요청은 JavaScript에서 처리하기 때문에 이런 이벤트의 기본 동작은 막아주는 것이 종종 필요합니다.
event.preventDefault() 메서드는 이벤트의 기본 동작을 취소하는 메서드입니다. 일반적으로 클릭, 제출, 링크 등의 기본 동작을 막기 위해 사용됩니다.
예를 들어, 폼 제출 버튼을 클릭했을 때 기본적으로는 폼 데이터가 서버로 제출됩니다. 하지만 이벤트 리스너에서 event.preventDefault()를 호출하면 기본적인 제출 동작을 중지시키고, 자바스크립트 코드에서 폼 데이터를 수집하거나 처리할 수 있습니다.
또 다른 예로는 링크의 기본 클릭 동작을 중지시키는 경우가 있습니다. 예를 들어, 링크가 <a> 태그로 정의되어 있을 때, event.preventDefault()를 사용하면 링크를 클릭했을 때 브라우저가 URL로 이동하지 않고, JavaScript 코드에서 다른 동작을 수행할 수 있습니다.
이외에도 이벤트가 발생한 요소의 기본 동작을 막는 경우 등, 다양한 상황에서 event.preventDefault() 메서드를 사용할 수 있습니다.
클로저에 대해 설명해주세요
클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.
- 어휘적 환경이 뭐죠?
- 함수가 선언된 주변 환경을 의미합니다. 주로 외부 함수(outer function)의 변수가 내부 함수(inner function)의 어휘적 환경에 포함됩니다. 그래서 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부 함수의 변수에 접근할 수 있습니다.
- 클로저를 언제 쓰나요?
- 클로저는 사실 자바스크립트의 어떤 함수든 가지고 있습니다. 어떤 함수든 전역 변수에 접근할 수 있기 때문입니다. 그래서 언제나 쓰이고 있습니다. 자바스크립트에서 private 메서드를 구현하기 위해서도 클로저를 활용할 수 있습니다. 클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에, 클로져 내에 있는 변수를 활용할 수 있는 private 메서드만 따로 노출시켜서 인터페이스처럼 사용할 수 있게 됩니다.
CSS box model에 대해서 설명해주세요
CSS box model은 HTML 요소를 하나의 사각형(box)로 가정하고, 어떻게 디자인적으로 표현할지 정리한 하나의 규정입니다. CSS box model에 따르면, Box는 총 4가지 요소(margin, border, padding, content)로 구성됩니다. content는 HTML 태그 사이에 담기는 내용을 표현하고, padding은 content와 border 사이의 공간을 의미합니다. border는 Box의 경계를 표시하는 역할을 합니다. margin은 다른 박스와의 간격을 의미합니다. 이 Box의 높이와 너비를 규정하는 방식이 대표적으로 두 가지가 있는데, content-box와 border-box가 있습니다. content-box 방식은 content의 width 속성값, height 속성값으로 규정됩니 다. border-box 방식은 border의 width 속성값, height 속성값으로 규정됩니다. 메이저 브라우저의 user agent stylesheet에는 기본값이 content-box인데, Box의 높이와 너비가 눈으로 보 이는 값과 상이하기 때문에 많은 개발자들이 box-sizing 속성값을 border-box로 정한다고 알고 있습니다.
CSS box model은 HTML 요소가 브라우저에서 어떻게 렌더링되는지 설명하는 모델입니다.
모든 HTML 요소는 박스 형태로 표시되며, 각 박스에는 content, padding, border, margin으로 구분되는 네 가지 영역이 있습니다.
content는 박스 내에 있는 실제 콘텐츠가 들어가는 영역입니다.콘텐츠의 너비와 높이를 지정하는 것은 이 영역에 영향을 줍니다.
padding은 콘텐츠 영역 주위의 영역입니다.패딩은 콘텐츠와 border 사이에 공간을 만듭니다.
border는 박스의 경계선입니다.
margin은 박스 주위에 빈 공간을 만드는 영역입니다. 다른 요소와의 간격을 조정하는 데 사용됩니다.
배열 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요
배열과 객체는 참조 자료형입니다. 참조 자료형의 경우에는 변수에 값 자체가 아닌 주소를 할당합니다. 따라서 const 키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨있기 때문에 요 소나 속성을 추가할 수 있습니다. 한편으론, 이런 상황에서 const를 쓰는 것은 오히려 권장됩니다. 변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 보다 깔끔하고 안정적인 코드를 작성할 수 있습니다.
const를 사용하여 배열을 선언하면 배열 변수의 할당을 변경할 수 없게 됩니다. 즉, 다른 배열로 재할당하거나 변수를 다른 값을 할당하는 것이 불가능합니다. 그러나 배열 자체의 내용은 변경할 수 있습니다.
const가 배열에 할당된 메모리 주소를 고정한다는 의미이기 때문입니다.
배열 변수가 참조하는 메모리 주소는 고정되어 있지만, 해당 주소의 배열 요소나 속성의 값은 변경 가능합니다.
따라서 const로 선언된 배열에도 push, pop, splice 등의 메서드를 사용하여 배열 요소를 추가, 삭제, 수정할 수 있습니다.
또한, 객체처럼 배열 요소의 속성에 대해서도 변경이 가능합니다.
<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
li 요소는 목록 아이템을 보여주기 위한 요소이기 때문에 목록을 담는 ul 요소, ol 요소, 그리고 menu 요소의 자식 요소여야 합니다.
화면 상으로는 아무런 문제가 없더라도 이렇게 각 요소의 의미에 맞게(시맨틱하게) HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.
li 요소는 목록을 만드는 데 사용되는 요소로, 반드시 ul 요소나 ol 요소의 자식 요소로 사용해야 합니다.
이는 HTML의 구조적인 요구사항 중 하나입니다. 목록 요소를 만들기 위해 ul 요소나 ol 요소를 사용하면, 그 안에 li 요소를 추가하여 각 항목을 나타낼 수 있습니다. li 요소는 항목 자체를 나타내며, 그리고 이들이 모여 목록을 구성합니다.
이 구조를 사용하면 스크린 리더와 같은 보조기기에서 목록을 인식하는 데 도움이 되고, 시맨틱한 마크업을 제공합니다.
시맨틱한 마크업을 사용하면 웹 페이지가 검색 엔진에 노출되기 쉽고, 웹 접근성을 개선할 수 있습니다.
따라서 li 요소를 ul 요소나 ol 요소의 자식 요소로 사용해야 합니다.
원시 자료형과 참조자료형에 대해서 설명해주세요
원시 자료형은 변수에 할당할 때 값 자체가 할당이 되고, 참조 자료형은 변수에 할당할 때 주소가 할당됩니다. 원시 자료형은 숫자, 문자열, 불린등 주로 하나의 값을 의미하는 타입이고, 참조 자료형은 배열, 객체와 같은 여러 개의 데이터를 가지는 타입이 있습니다. 참조 자료형의 이런 특징 때문에, 함수의 매개변수로 전달될 때 조심해야 합니다. 함수 내에서 참조 자료형을 변경하는 경우 해당 변화가 함수 내에서만 있는게 아니고, 해당 참조 자료형을 참조하는 모든 코드에 영향을 미치기 때문입니다.
원시 자료형은 값 자체를 저장하는 자료형입니다.(자료형이란 값의 종류)
원시 자료형으로는 숫자, 문자열, 불리언, null, undefined, 심볼 이 있습니다.
원시 자료형의 특징으로는 변수에 값을 직접 복사합니다. 따라서 변수에 저장된 값이 변경되어도, 다른 변수에 영향을 주지 않습니다.
참조 자료형은 값이 저장된 메모리 주소를 저장하는 자료형입니다.
객체, 배열, 함수 등이 참조 자료형에 해당됩니다.
참조 자료형의 특징으로는 변수에 메모리 주소를 저장합니다.따라서 변수에 저장된 값이 변경되면, 다른 변수에도 영향을 줍니다.