반응형
반응형
Q. 배열 객체를 Const 선언한 경우, 요소나 속성 추가가 가능한 이유
// Q. 배열 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요.
A. 원시 자료형과 참조 자료형의 차이 때문에 요소나 속성을 추가할 수 있습니다.
변수에 데이터 값 자체를 할당하고 저장하는 원시 자료형과 달리
배열, 객체는 참조 자료형으로 변수에 데이터 값 자체가 아닌 데이터 값이 담겨있는 주소값을 저장합니다.
참조 자료형은 데이터 값과 주소값을 따로 저장하기 때문에
참조 자료형은 const로 선언해도 저장된 주소값은 동일하기에
heap에 저장된 데이터 값인 요소나 속성을 변경할 수 있습니다.
Q. 원시 자료형과 참조 자료형
// Q. 원시 자료형과 참조 자료형에 대해서 설명해주세요.
A. 원시 자료형과 참조 자료형은 값을 저장하는 방식이 다릅니다.
원시 자료형은 숫자형, 문자열 등이 있고,
원시 자료형에 데이터 값을 할당하면 메모리에 데이터 값 자체를 저장합니다.
참조 자료형은 배열, 객체, 함수 등이 있습니다.
참조 자료형은 데이터 자체의 값을 저장하는 것이 아니라 메모리에 주소 값을 저장하고,
데이터 값 자체는 heap(힙)에 저장됩니다.
Q. li 태그
// Q1. <li> 요소는 왜 <ul>, <ol> 요소의 자식 요소여야만 하나요?
A. <li>요소는 목록 아이템을 보여주기 위한 요소이기 때문에
목록을 담은 <ul>, <ol> 등 요소의 자식 요소이어야 합니다.
// Q2. <li>를 단독으로 쓰면 어떻게 되는지?
A. 에러는 없으나 검색엔진이 목록으로 정확하게 파악하기 어렵고,
시멘틱하지도 않으며, 사용 규칙에도 어긋납니다.
Q. CSS Box Model
// Q. CSS box model에 대해 설명해주세요.
A. box model은 가장 안쪽에서부터 content, padding, border, margin 순으로 있습니다.
각 영역에 값을 입력하여 box의 크기를 조절할 수 있습니다.
Q. 로그인 폼 컴포넌트 화면 중앙에 위치
// Q. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요?
A. flex와 그의 속성을 사용합니다.
<body> 밑에 하나의 자식인 <form>를 두어
flex container인 <body>에 display:flex와 justify-content: center, align-items:center를 입력합니다.
이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에,
HTML요소 배치에 주의해야 합니다.
Q. script 태그를 body 태그가 끝나기 직전에 위치시키는 이유
// Q. 일반적으로 css를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고
// javascript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
A. <script>요소가 <body>요소보다 위에 있으면 에러가 발생합니다.
왜냐하면 html을 파싱할 때 위에서 부터 읽습니다.
그러나 <body>를 읽기 전 <script>가 있으면 그 순간부터 html을 읽는 것을 멈추고 javascript를 읽습니다.
javascript를 읽을 때 html의 내용을 읽지 않은 상태이기에 데이터 등을 적용할 수도, 불러올 수도 없기 때문입니다.
Q. Event.preventDefault
// Q. event.preventDefault 메서드 언제 사용하나요?
A. 우선 preventDefault 메서드에 대해 설명하면
'html에서 표준으로 제공한 tag의 기본 이벤트를 막는 메서드'입니다.
preventDefault 메서드는 주로 <a> 또는 <form>의 submit과 같이 사용 됩니다.
1) <a> 눌렀을 때 href 링크로 이동하지 않게 하는 경우
2) submit은 이벤트 활성화 시 자동으로 브라우저 창이 새로고침 되기 때문에
form에서 값을 입력 후 submit을 눌려도 새로고침이 되어 값이 입력되지 않습니다.
그렇기에 submit의 새로고침을 방지하여 값이 입력될 수 있도록 preventDefault 메서드를 사용합니다.
Q. 스코프
// Q. 스코프(Scope)에 대해 설명해주세요.
A. 스코프를 직역하면 '범위' 입니다.
다른 말로는 '변수 접근 규칙에 따른 유효 범위' 입니다.
풀이하자면 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부릅니다.
스코프에는 중요한 규칙이 있습니다.
범위 안쪽 스코프는 바깥쪽 스코프에서 선언한 변수를 사용할 수 있습니다.
범위 바깥쪽 스코프는 안쪽 스코프에서 선언한 변수를 사용할 수 없습니다.
그리고 스코프의 종류에는 전역스코프, 지역스코프, 블록스코프가 있습니다.
전역 스코프는 가장 바깥쪽의 스코프이고, 전역 변수에 접근할 수 있는 범위를 말합니다.
지역 스코프는 지역(함수, 중괄호) 내에서 선언된 변수이며,
자신의 지역과 하부 지역에 접근할 수 있는 변수입니다.
블록 스코프에서 주의할 점은 var 변수입니다.
요즘은 var 변수를 사용을 지양해서, let과 const 사용을 권장합니다.
var는 블록스코프는 무시하고, 함수스코프만 따르며,
예외적으로 화살표함수의 블록스코프는 무시하지 않습니다.
let과 const는 블록 스코프와 함수 스코프 모두를 따릅니다.
Q. 클로저
// Q1. 클로저(Closure)에 대해 설명해주세요.
A. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.
// Q2. 어휘적 환경이란 무엇인가요?
A. 어휘적 환경이란 함수가 선언된 주변 환경을 의미합니다.
주로 외부함수의 변수가 내부함수의 어휘적 환경에 포함됩니다.
그래서 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부함수의 변수에 접근할 수 있습니다.
// Q3. 클로저는 언제 사용하나요?
A. 클로저는 사실 자바스크립트의 어떤 함수든 가지고 있습니다.
어떤 함수든 전역 변수에 접근할 수 있기 때문입니다. 그래서 언제나 쓰이고 있습니다.
자바스크립트에서 Private 메서드를 구현하기 위해서도 클로저를 활용할 수 있습니다.
클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에,
클로저 내에 있는 변수를 활용할 수 있는 private 메서드만 따로 노출시켜서 인터페이스처럼 사용할 수 있게 됩니다.
section 1의 기술면접 질문을
여러 가지 작성해 보았습니다.
아직 개발의 기술적인 용어와 능력이 부족하여
일목요연하게 적지 못해 너무 아쉬웠습니다.😭
다음 기술 면접 전까지 열심히 공부하여
부족한 부분을 많이 보완해야겠습니다. 😊
기술 면접 준비(1)을 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
