230906.log

Universe·2023년 9월 6일

목록 보기

10/14

🗓️ 날짜 : 2023.09.06

📚 할 일 : 10to7, 1day 1commit 1post, 1mon 3project

📝 오늘의 목표 : 면접준비, 마음의 준비

⌛ 공부시간 : 10:30 ~ 24:00

면접 해체분석기

이전에도 실수했던 내용인데 잊고 있었다.
어떤 개념에 대해서 이해하고 있어도 문어체로 작성을 하다보면
구어체로 표현할 때 다시금 생각을 돌아봐야 하고
특히, 면접 같은 경우에 이러한 “한번 더 생각해야 하는” 행위가 굉장히 불리하게 작용한다.
그래서 면접에서 비슷한 질문을 받았을 때,
막힘없이 내가 어떤식으로 대답할 수 있는지 구어체로 간단하게 정리해보려고 한다.

면접 질문 원본링크 : https://velog.io/@arthur/지금까지-받았던-신입-프론트엔드-면접-질문들

HTML, CSS

Q : px, em, rem 의 차이에 대해 설명해주세요.
반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
A : px는 절대단위, em, rem 은 상대단위로 알고 있습니다.
px는 상대적인 크기, 예를들어 부모요소라던가 의 영향을 받지 않아서 주로 고정된 크기의 컴포넌트를 만들 때 자주 사용합니다. em은 상위요소에 상대적인, rem은 루트요소인 html 글꼴에 상대적인 크기입니다.
반응형 작업을 할 때는 보통 rem 으로 스타일링을 하고 html 의 글꼴 크기를 변경하는 식으로 작업합니다.

Q : vw, vh에 대해 설명해주세요.
A : wv, vh 는 가로, 세로 길이의 상대적 단위로써 보여지는 영역에서 얼만큼 차지할건지를 의미합니다.
브라우저 크기를 변경하면 상대적으로 요소의 가로, 세로의 길이가 변하기 때문에
뷰포트 영역을 기준으로 한 반응형 컴포넌트를 만들 때 사용합니다.

Q : 반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
A : 스타일링 도구를 테일윈드를 많이 사용하고 있어서 테일윈드의 브레이크 포인트를 따르게 되는 것 같습니다.
sm : 640, md : 768, lg : 1024, xl : 1280, 2xl : 1536 정도로 알고 있고,
이 브레이크 포인트가 고정적으로 사용되는건 아니고, 서비스에 따라서 실제 사용자 경험과 컨텐츠의 표현에
맞추어 여러번의 테스트를 거쳐 가장 서비스에 적합한 브레이크 포인트를 찾는 것이 중요하다고 알고있습니다.

Q : CSS 선택자의 우선순위에 대해 설명해주세요.
A : CSS 선택자의 우선순위는 중요도, 명시도, 순서의 세가지 요소에 의해 결정된다고 알고있습니다.
!important 키워드를 적용한 스타일이 가장 우선되며 명시도는 인라인 스타일 > id > class 로 적용한 스타일 순으로 우선순위를 갖습니다. 명시도가 같다면 가장 나중에 적용한 스타일이 적용됩니다.

Q : 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
A : 두 가지 방법이 있습니다.
하나는 CSS의 aspect-ratio 속성을 이용하는거고,
다른 하나는 자식요소에 padding top, padding bottom을 설정하면 상위 요소에 상대적으로 크기가 계산되는 Padding Hack 이라는 일종의 CSS 트릭을 이용하는 겁니다.
aspect-ratio 가 그냥 원하는 비율을 설정해주기만 하면 되서 조금 더 간편하지만,
최신 문법이라서 오래된 브라우저 버전에서는 지원을 하지 않을 경우도 있습니다.

Q : Flexbox에 대해 설명해주세요.
A : 가로 축, 세로 축 같은 “축” 을 기준으로 하는 레이아웃 모델입니다.
축을 기준으로 하기 때문에 가로, 세로 가운데 정렬 등의 1차원 적인 레이아웃을 편하게 설정할 수 있습니다.

Q : float의 동작에 대해 설명해주세요.
A : 일반적인 문서의 흐름에서 벗어나서 지정한 방향으로 공중에 띄우듯 이동시키는 속성입니다.
원래 개발의도는 이미지 같은 요소가 텍스트 내에서 어떻게 위치할 것인가- 를 결정하려고 만들었는데,
flex, grid 속성이 나오기 전에 그리드 레이아웃이나 사이드 바 등의 구현에 자주 사용됐다고 알고있습니다.
현재는 flex, grid 속성이 워낙에 잘 되어있어서 굳이 사용할 이유는 없을 것 같습니다.

Q : CSS에서 Cascading에 대해 설명해주세요.*
A : CSS 가 캐스케이딩 스타일 시트의 약자 인 만큼, 좀 CSS 의 핵심 원리 라고 생각하는데,
어떤 요소에 스타일을 설정했을 때 규칙에 따라서 스타일을 적용하자- 라는 매커니즘 입니다.
CSS는 중요도, 명시도, 순서의 우선순위를 가지고 스타일이 적용됩니다.

Q : ⭐ SCSS에 대해 설명해주세요.
A : SCSS 를 깊게 다루어 보진 않았지만 CSS 의 한계와 단점을 보완해서 조금 더 쉽고 확장성 있게 스타일링을 할 수 있는 도구라고 알고있습니다. 변수나 네스팅, 믹스인, 상속 같은 기능을 지원해서
CSS 보다 확장성이나 유지보수가 쉽고 효율적입니다.

Q : ⭐ postition 속성에 대해 설명해주세요.
A : Position 는 CSS 에서 요소의 위치를 정의하는 속성입니다.
주로 static, relative, absolute, fixed, sticky 를 사용합니다.
각자의 속성의 기준점이 다른데, relative 는 원래 위치를 기준으로, absolute 는 가장 가까운 relative 속성을 가진 부모 요소를 기준으로, fixed 는 뷰포트를 기준으로, sticky는 스크롤에 따라서 변화하는 특성을 가지고 있습니다.

Q : margin과 padding에 대해 설명해주세요.
A : margin 은 요소의 바깥족 여백을, padding 은 요소의 안쪽 여백을 설정하는 속성입니다.

Q : HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
A : HTML 렌더링 도중에 JS 가 실행되면 JS 에 의해 DOM 요소를 수정하거나 변경할 수 있으므로,
안전한 상태를 유지하기 위해서 렌더링을 중지한다고 알고 있습니다.

Q : Box model에 대해 설명해주세요.
A : Box Model 은 웹 페이지 상의 각 요소를 사각형의 박스 처럼 간주하고 레이아웃을 구성하는 개념입니다.
Content, Padding, Border, Margin 의 네 가지 영역으로 나뉘는데,
Content 는 실제 내용이 들어가는 영역, Padding 은 Content 와 테두리 사이의 간격,
Border 는 테두리 간격, Margin 은 테두리 밖, 요소와 다른 요소의 외부 영역을 가집니다.

Q : Attribute와 Property의 차이에 대해 설명해주세요.
A : Attribute 는 HTML 마크업에 정의되어 있는 초기 값이고,
Property 는 HTML DOM 트리에 있는 JS 를 통해 동적으로 변경될 수 있는 값입니다.

Q : ⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
A : display 는 HTML 요소의 렌더링 방식을 결정하는 속성입니다.
block, inline, inline-block, flex, grid, none 등의 속성이 있습니다.
block 은 부모요소의 가로 크기를 전부 차지합니다. block 요소 다음에 오는 요소는 줄바꿈이 됩니다.
대표적으로는 div 태그가 있습니다.
inline 은 컨텐츠 영역을 딱 감쌀정도의 크기만 차지합니다. block 요소와는 다르게 줄바꿈이 되지 않고
width 값을 가질 수 없습니다. 대표적으로 span 태그가 있습니다.
inline-block 은 block 과 inline 을 합친 속성인데, 기본적으로는 inline 과 비슷한 성질을 가지고 있지만
block 처럼 임의로 크기를 변경할 수 있습니다.
이외에도 flex 속성으로 flex 레이아웃을, grid 속성으로 grid 레이아웃을 적용할 수 있고
none 속성으로 보이지 않게 할 수도 있습니다.

Q : CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
A : CSS 애니메이션은 @keyframs 문을 사용해서 애니메이션을 정의할 수 있습니다.
주로 간단하고 조금 선형적인 애니메이션에 적합합니다. 성능면에서 자바스크립트로 작성한 애니메이션보다
우수하고 브라우저가 최적화를 잘 해줍니다.
반면에 JS 애니메이션은 자바스크립트를 이용해 DOM 요소의 스타일을 동적으로 변경하는 방식입니다.
복잡하거나 사용자와 상호작용 하는 애니메이션을 구현할 때 유용합니다.
CSS 애니메이션으로 구현한 것 보다 성능 최적화에 대해서 조금 더 신경을 써야합니다.

Q : CSS in JS의 장단점에 대해 설명해주세요.
A : CSS in JS 는 컴포넌트 단위 스타일링 및 동적 스타일링이 가능하다는 장점이 있습니다.
그래서 유지보수가 쉽고 코드의 재사용이 편리합니다.
단점으로는 자바스크립트로 실행되기 때문에 런타임 비용이 발생해서 성능에 약간 불리할 수 있고
서버 사이드 렌더링을 활용할 때 호환성이 좋지 않습니다.

Q : ⭐ 시맨틱 마크업에 대해 설명해주세요.
A : HTML 요소의 의미들을 좀 더 명확하게 표현해주는 방식입니다.
구조를 잡는데 div, span 같은 의미없는 태그만 쓸게 아니라 header, footer 처럼
아예 이 요소는 헤더 컴포넌트다, 이 요소는 푸터 컴포넌트다 하고 명시해 줌으로써
구조 자체에 의미를 포함하는 것을 목적으로 합니다.
이렇게 설계하면 검색 엔진 최적화에 유리하고 스크린 리더 같은 보조 기술에도 조금 더 친화적입니다.

Q : HTML5의 태그에 대해 설명해주세요.
A : HTML 5에 시멘틱 마크업을 강화하기 위한 새로운 태그들이 도입되었다고 알고 있습니다.
header나 footer, section 같은 태그 같이 구조적인 태그 뿐 아니라
figure, time 처럼 의미적 태그 들도 함께 도입되어 보다 명확한 시멘틱 태그를 작성할 수 있습니다.

Q : script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
A : HTML 의 스크립트 태그에서 사용되는 문법인데, JS 파일을 비동기적으로 로딩하는 방법입니다.
async 속성을 가진 스크립트는 다운로드 되는 즉시 실행이 되며 defer 속성을 가진 스크립트는
HTML 문서가 완전히 파싱 된 이후에 실행됩니다.

Q : 가상 클래스에 대해 설명해주세요.
A : 가상 클래스는 특정 상태나 조건에 따라서 선택된 요소를 스타일링 할 수 있는 방법입니다.
예를들어서 :hover 같은 가상 클래스는 마우스 커서가 요소 위에 있을 때 적용되는 스타일을 정의할 수 있고,
first-child 나 last-child 처럼 자식요소의 첫번째 혹은 마지막 요소 처럼 구조적인 상황에서의
스타일도 정의할 수 있습니다.

Q : margin 병합에 대해 설명해주세요.
A : 두 개 이상의 블록 요소가 수직으로 만나면 그 사이의 마진이 하나의 마진으로 병합되는 현상입니다.
예를들어, 페이지 상단에 있는 요소의 margin-bottom 이 20px 이고, 하단에 있는 요소의 margin-top 이
30px 이라면 실제로 적용되는 마진은 더 큰 쪽인 30px 로 적용됩니다.

자바스크립트

Q : 자바스크립트는 무슨 언어인가요?
A : 객체 기반의 스크립트 언어입니다. 원래는 클라이언트 측에서 사용자와의 상호작용을 동적으로 처리하기
위해서 만들어졌지만 Node.js 가 개발되면서 서버 측에서도 사용할 수 있습니다.

Q : 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.
A : 변수 선언은 변수를 생성하는 과정으로 자바스크립트에서는 var, let, const 키워드를 사용해
선언할 수 있습니다. 초기화는 선언된 변수에 처음 값을 부여하는 과정으로 자바스크립트에서는
선언과 동시에 undefined 로 자동 초기화가 됩니다. 할당은 변수에 값을 지정하는 과정으로
이전에 저장한 값을 덮어 쓰게 됩니다. 초기화는 처음 딱 한번만 이루어지지만 할당은 const 로 선언된
변수가 아니라면 여러 번 가능합니다.

Q : 데이터 타입에 대해 설명해주세요.
A : 자바스크립트의 데이터 타입은 primitive 데이터 타입과 reference 데이터 타입으로 나뉩니다.
primitive 데이터 타입은 number, string 처럼 메모리에 담길 데이터의 크기가
어느정도 정해져 있는 원시값을 의미합니다.
reference 데이터 타입은 array, object, function 처럼 메모리에 담길 데이터의 크기가
일정하지 않은 값을 의미합니다.

Q : 생성자에 대해 설명해주세요.
A : 생성자는 객체를 생성하고 그 속성을 초기화 하는 메소드 입니다.
contructor 키워드를 사용해서 정의할 수 있고 new 라는 키워드로 호출할 수 있습니다.

Q : ⭐ this에 대해 설명해주세요.
A : 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 입니다.
this 를 통해서 자신이 속한 객체나 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다.
자바스크립트 엔진에 의해서 암묵적으로 생성되기 때문에 어디서는 호출할 수는 있지만,
전역객체를 호출하면 사실 의미가 없는 자기 참조 변수 이므로,
객체의 메서드 내부나 클래스에서 사용합니다.

Q : call, apply, bind에 대해 설명해주세요.
A : call, apply, bind 모두 this 를 명시적으로 바인딩 할 때 사용합니다.
call과 bind 은 쉼표로 구분된 인자를 받고, apply 는 배열 형태로 구분된 인자를 받습니다.
bind 는 명시적으로 this 가 바인딩 된 새로운 함수를 리턴하는 특징을 가지고 있습니다.

Q : ⭐ 콜백 함수에 대해 설명해주세요.
A : 함수에 파라미터로 들어가는 함수를 콜백함수라고 합니다.
어떤 함수를 순차적으로 실행하고 싶을 때 사용합니다.
주로 이벤트 리스너나, 비동기 작업을 할 때 쓰입니다.

Q : ⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.
A : 콜백 지옥을 해결하기 위해서는 대표적으로 Promise나 Async/Await 문법을 사용하는 방법이 있습니다.
Promise 는 콜백 대신에 값을 반환해서 .then이나 .catch 메소드를 사용해서 성공 이후에 실행할 작업을
명확하게 처리할 수 있습니다. 그런데 이 방식도 처리해야 할 작업이 많아지면 .then, .then 이 연속되기 때문에
콜백 지옥과 비슷하게 then 메소드가 중첩되서 코드의 가독성이 나빠질 수 있습니다.
그럴 때 async/await 문법을 사용해 promise 의 결과를 변수에 할당하는 식으로
동기적인 코드 처럼 작성함으로써 해결할 수 있습니다.

Q : ⭐ Promise에 대해 설명해주세요.
A : Promise 는 자바스크립트에서 비동기 작업을 보다 편리하게 다룰 수 있게 해주는 객체입니다.
Promise 객체는 pending, fulfilled, rejected 의 세 가지 상태를 가지며 각각 대기, 성공, 실패를 의미합니다.
Promise 객체는 then, catch 등의 메소드나 async/await 를 사용해 성공 케이스와 실패 케이스를
처리할 수 있습니다.

Q : Promise.all() 에 대해 설명해주세요.
A : Promise.all 메소드는 여러개의 프로미스를 병렬로 실행하고, 모든 프로미스가 fulfilled 되었을 때만
fulfilled 상태가 되는 새로운 프로미스를 반환하는 메소드 입니다. 만약에 하나라도 rejected 상태가 되면
Promise.all 도 rejected 상태가 됩니다.

Q : ⭐ Promise와 Callback를 비교 설명해주세요.
A : Promise 와 Callback 둘 다 비동기 적인 작업을 처리하는 방법입니다.
Callback 함수는 비동기 작업이 완료된 이후에 실행할 함수를 인자로 전달하는 방식이고,
Promise 는 비동기 작업의 성공이나 실패 상태를 객체로 표현하는 방식입니다.
Callback 함수는 콜백이 중첩되면 가독성이 나빠질 수 있는데 이러한 문제점을 Promise 로 해결할 수 있습니다.
또한, then, catch 등의 메소드를 이용해서 에러처리도 보다 쉽게 할 수 있습니다.

Q : ⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.
A : async, await 는 자바스크립트에서 비동기 작업을 보다 쉽고 깔끔하게 처리할 수 있는 문법입니다.
함수의 선언에 async 를 붙히면 함수가 항상 Promise 객체를 반환하게 되며
async 로 선언된 함수 안에서 await 키워드를 사용하면 Promise 가 해결되기 전까지
함수의 실행을 일시적으로 멈춰서 순차적으로 처리합니다.

Q : ⭐ Promise와 Async, Await의 차이를 설명해주세요.
A : Promise 와 async/await 모두 비동기 작업을 처리하기 위한 문법입니다.
차이점은 주로 가독성과 작성 편의성입니다. async/await 로 작성된 코드가 직관적이고 가독성이 좋아서
복잡한 비동기 로직을 다룰 때 좋지만 반드시 async/await 가 좋은것은 아닙니다.
finally, all 메소드를 사용해서 세밀한 조건을 다룰 때는 기존의 promise 를 사용하는게 보다
효과적일 수도 있다고 생각합니다.

Q : ⭐ var, let, const 차이를 설명해주세요.
A : var, let, const 모두 변수를 선언하는데 사용되지만 스코프와 재할당 가능성에서 차이가 있습니다.
var은 함수 레벨 스코프를 가지며 호이스팅이 일어납니다. let과 const 는 블록 레벨 스코프를 가지며,
var 과 마찬가지로 호이스팅이 일어나긴 하지만 TDZ 속성을 가지고 있어서 초기화 전에 접근할 수 없습니다.
var와 let은 재할당이 가지만 const는 재할당이 불가능 합니다.

Q : TDZ에 대해 설명해주세요.
A : Temporal Dead Zone 은 let 과 const 로 선언된 변수가 초기화 되기 전 까지의 코드 영역을 의미합니다.
이 영역에서, 그러니까 초기화 되지 않은 변수에 접근하려고 하면 레퍼런스 에러가 발생합니다.
var 로 선언된 변수는 TDZ 속성이 적용되지 않아서 초기화 이전에 접근하더라도 에러가 발생하지 않고
undefined 가 출력됩니다.

Q : 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
A : function 키워드로 선언하면 함수 선언식이 되고 const 함수이름 function 형태로 선언하면 함수 표현식이 됩니다. 함수 선언식은 호이스팅의 영향을 받아 함수 코드가 함수 호출 코드보다 아래에 있어도 호출이 가능하고,
함수 표현식은 const 의 TDZ 의 영향을 받아 호출보다 먼저 선언되어 있어야 합니다.

Q : ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.
A : 이벤트 버블링은 하위요소에서 상위요소로, 캡처링은 상위요소에서 하위요소로 이벤트가 전파되는 현상입니다.

Q : ⭐ 이벤트 위임에 대해서 설명해주세요.
A : 이벤트 위임은 하위 요소들이 묶인 상위 요소에 이벤트 리스너를 할당해 하위 요소들의 이벤트를 한 곳에서 처리하는 방법입니다.

Q : 이벤트 위임의 동작 방식에 대해서 설명해주세요.
A : 이벤트 위임의 동작 방식은 상위 요소에 이벤트 리스너를 붙혀서 하위 요소에서 발생한 이벤트를 버블링을 통해 상위 요소로 전파될 때, 이벤트를 처리하는 방식입니다. 하위 요소에 각각 이벤트 리스너를 붙히지 않아도
되니까 중복된 코드를 작성하지 않아도 되는 장점을 가지고 있습니다.

Q : ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.
A : 호이스팅은 변수나 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것 같은 현상입니다.
자바스크립트는 JIT 컴파일러를 사용하기 때문에 엔진이 코드를 실행하기 전에 스코프를 스캔하고
변수나 함수의 선언부를 미리 메모리에 저장에 두기 때문입니다.

Q: JIT 컴파일러가 뭔가요?
A : Just In Time 컴파일러라고 해서 프로그램이 실행되는 동안 실시간으로 코드를 컴파일하는 기술입니다.
인터프리터의 즉시 실행 특성과 컴파일러의 빠른 실행 속도를 갖습니다.

Q : 스코프 (Scope)에 대해 설명해주세요.
A : 스코프는 변수의 유효 범위를 의미합니다.
변수의 생명주기와 접근성을 관리하는 개념으로 전역 스코프, 함수 스코프, 블록 스코프 등으로 나눌 수 있습니다.
전역 스코프의 변수는 어디서든 접근할 수 있으며, 함수 스코프는 해당 함수 안에서만 접근할 수 있습니다.
블록 스코프는 변수가 속한 코드 블럭 안에서만 접근할 수 있습니다.

Q : 스코프 체인에 대해 설명해주세요.
A : 스코프 체인은 변수나 함수를 찾아가는 과정의 연결 고리라고 할 수 있습니다.
실행 컨텍스트에서 변수를 찾을 때, 제일 먼저 현재 스코프에서 찾고, 그 다음에 상위 스코프에서 찾아보고,
이 과정을 반복하다가 전역 스코프까지 찾아보게 되는 과정이 스코프 체인입니다.
스코프 체인을 통해서 변수의 생명 주기와 접근성을 관리합니다.

Q : ⭐ 클로져(Closure)에 대해 설명해주세요.
A : 클로저는 함수가 생성될 당시의 그 주변의 환경과 함께 갇히게 되는 것을 의미합니다.
함수가 속하고 있는 렉시컬 스코프를 기억하고, 함수가 렉시컬 스코프 밖에서 실행될 때도
이 렉시컬 스코프에 접근할 수 있게 해줍니다. 가장 대표적인 예로
React 에서 useState 의 상태 관리 문제를 해결하는 방법도 클로저 특성 때문이라고 할 수 있겠네요.

Q : 실행 컨텍스트에 대해 설명해주세요.
A : 실행 컨텍스트는 자바스크립트 코드가 실행될 때 실행되는 범위에 대한 정보를 가지고 있는 객체입니다.
함수가 호출될 때마다 새로운 실행 컨텍스트가 생성 되고 스택으로 관리합니다.
실행 컨텍스트 객체에는 변수와 함수의 선언, 스코프 체인, this 등의 정보를 담고 있습니다.

Q : 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
A : 렉시컬 환경은 실행 컨텍스트의 구성 요소중에 하나로 코드가 실행될 때 지역적인 환경에서
사용할 수 있는 식별자와 값을 저장하는 구조 입니다. 하나하나의 렉시컬 환경이 서로 연결되어
스코프 체인을 형성하고 이 스코프 체인을 통해 식별자를 찾을 수 있습니다.

Q : 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.
A : 자바스크립트의 데이터 형변환은 크게 명시적 형변환, 암시적 형변환으로 나뉩니다.
명시적 형변환은 개발자가 의도적으로 데이터 타입을 바꾸는 것입니다.
String, Number 등의 내장 함수를 사용 하는 방법을 의미합니다.
암시적 형변환은 자바스크립트 엔진이 연산을 수행하는 과정에서 자동으로 데이터 타입을
바꾸는 것입니다. 예를들어 문자열 5와 숫자 3를 더하면 문자열 53이 되는 것 같은 경우 입니다.
이는 자바스크립트가 동적 타이핑을 하는 언어이기 때문에 발생하는 현상입니다.

Q : 자바스크립트가 동적 언어인 이유는 무엇인가요?
A : 자바스크립트가 동적 언어인 이유는 변수의 타입이 코드가 실행되는 시점에 결정되고
변경될 수 있기 때문입니다. 컴파일 시점이 아닌 런타임 시점에서도 변수의 타입이 변경될 수 있고,
이런 특징 때문에 동적 타이핑 언어라고 불립니다.
자바스크립트의 기원 자체가 웹 브라우저에서 동작하는 스크립트 언어이기 때문에,
빠르게 개발하고 수정할 수 있는 유연성을 필요로 하기 때문이라고 알고 있습니다.
그러나 의도하지 않은 타입과 관련된 에러가 발생하여 예상치 못한 결과를 초래할 수도 있기 때문에
사이즈가 큰 프로젝트는 타입스크립트 등의 정적 타이핑 슈퍼셋을 사용해서 이런 이슈를 해결할 수 있습니다.

Q : 깊은 복사와 얕은 복사에 대해 설명해주세요.
A : 얕은 복사는 데이터가 저장된 ‘메모리 주소 값’ 만 복사하는 방식이고 깊은 복사는 완전히 새로운 메모리 공간을 확보해 복사하는 것을 의미합니다. primitive 타입의 데이터는 값이 크기가 아무리 커도 한계가 있기 때문에
복사하더라도 새로운 메모리 주소에 값을 할당해도 상관이 없습니다.
그래서 primitive 타입은 값을 복사하면 값 그 자체가 복사되게 됩니다.
하지만 reference 데이터 타입은 해당 변수에 얼마나 큰 데이터가 담기게 될지 모르기 때문에
얕은복사를 해서 주소값만 참조하게 됩니다.
그런데 원본 데이터를 보호하면서 객체를 수정해야 하는 경우 reference 데이터 타입이더라도
깊은 복사를 해서 수정해야합니다.

Q : reference 데이터 타입의 깊은복사를 하는 방법에 대해서 설명해주세요.
A : 객체의 뎁스가 1뎁스 정도인 간단한 객체라면 Spread 연산자, Object.assign 을 사용해서
간단하게 복사할 수 있습니다. 2뎁스 이상에서는 JSON.parse(JSON.stringify()) 를 이용할 수 있는데,
객체 내부에 함수가 담겨있다면 제대로 복사를 해주지 못합니다. 이럴경우에는 재귀함수를 이용해서 복사하거나
라이브러리의 힘을 빌릴 수 있습니다.

Q : 불변성을 유지하려면 어떻게 해야하나요?
A : 가장 기본적으로는 const 로 변수를 선언해서 재할당을 방지하는 방법이 있습니다.
또 객체를 수정할 때 깊은복사해서 수정하거나 배열을 수정할 때는 새로운 배열을 리턴하는 메소드를 사용하는 방법 등이 있습니다.

Q : Blocking과 Non-Blocking에 대해 설명해주세요.
A : 프로그래밍에서 어떤 작업을 수행할 때 작업이 완료될 때까지 실행흐름이 멈추면 Blocking, 작업이 완료되지 않아도 실행 흐름을 멈추지 않고 다른 작업을 수행한다면 non-Blocking 이라고 합니다.

Q : ⭐ 동기와 비동기에 대해 설명해주세요.
A : 코드가 작성된 순서대로 위에서 아래로 한 작업이 끝나면 다음작업이 실행되는 식으로 진행된다면 동기,
작업이 다 끝나지 않더라도 다음 작업을 실행할 수 있다면 비동기 코드라고 합니다.
동기와 비동기를 가장 잘 설명할 수 있는 예제가 자바스크립트의 이벤트 리스너 라고 생각하는데요,
이벤트 리스너는 “이벤트가 감지됐을 때” 까지 기다린 다음에 이벤트가 감지되면 코드를 실행하게 되는데,
이를 동기적으로 실행하면 이벤트가 감지될 때 까지 작업이 멈추게 됩니다.
그런 일은 있을 수 없기 때문에 이벤트 리스너는 일단 이벤트 감지를 백그라운드에서 기다리고
감지된 이후에 콜백함수를 실행하는 식으로 작동합니다.
보통 비동기 코드로 서버의 요청이나 시간과 관련된 메소드, 이벤트 리스너 같은 것들을 다룹니다.

Q : undefined, null, undeclared를 비교해주세요.
A : 변수는 선언되었으나 아무런 값이 할당되지 않았을때는 undefined를,
변수에 값이 없다는 것을 명시적으로 표현할 때는 null을 사용합니다.
변수가 아예 선언되지 않았을 때의 상태를 undeclared 라고 하는데,
undeclared 상태인 변수에 접근하려고 하면 ReferenceError 가 발생합니다.

Q : 자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요. (이벤트 루프)
A : 자바스크립트의 비동기 로직은 이벤트 루프에 의해 관리됩니다.
자바스크립트 엔진은 현재 실행중인 작업을 추적하는 콜 스택,
완료된 비동기 작업의 콜백함수를 대기시키는 콜백 큐가 있는데
콜 스택이 비어있고 콜백 큐에 작업이 남아있으면 이를 콜 스택으로 옮겨서 작업하는 식으로 작동합니다.
이 옮겨서 작업하는 일련의 과정을 이벤트 루프라고 합니다.
이런 매커니즘으로 자바스크립트가 싱글 스레드 언어임에도 불구하고 비동기 처리가 가능합니다.

Q : 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?
A : async/await 문법을 사용하면 비동기 코드를 마치 동기적으로 작동하는 것 처럼 작성할 수 있습니다.
async 키워드와 함께 선언된 함수는 항상 Promise를 리턴하게 되는데,
await 키워드로 Promise 가 다 처리될때까지 함수의 실행을 중단시켜서 기다렸다가 다음 작업을 수행하는 식으로 작동합니다.

Q : map과 forEach, reduce에 대해 설명해주세요.
A : 배열에 대한 연산을 수행하는 메소드 입니다. map은 배열의 각 요소에 대해 주어진 함수를 실행하고,
결과를 새로운 배열로 리턴합니다. forEach 는 map과 유사하게 각 요소에 주어진 함수를 실행하지만,
새로운 배열을 반환하지 않아서 사이드 이펙트를 수행하는 경우에 사용하고 있습니다.
reduce 는 각 요소에 리듀서 함수를 실행하고 단일 결과값을 제공하는 메소드 입니다.

Q : 자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요
A : 자바스크립트는 가비지 컬렉션 메커니즘을 통해 메모리 관리를 자동으로 수행하는 언어입니다.
그런데 그게 완벽하진 않아서 수동으로 최적화 해주어야 하는 부분이 있습니다.
참조되고 있는 변수나 객체는 메모리에서 정리되지 않기 때문입니다.
필요 없어진 변수는 null 을 할당해서 명시적으로 참조를 끊거나,
아예 객체나 배열의 크기를 줄이거나 하는 방법이 있고,
이벤트 리스너를 등록 이후에 페이지가 전환되면 등록을 해제해주는 식으로 최적화 할 수 있습니다.

이어서 작성할 것.