프론트엔드 기술 면접 질문 리스트

기술 면접을 준비하면서 자주 나왔던 질문들을 공부하고 정리했던 것이 있었는데 프론트엔드 개발자 취업 준비를 하시는 분들께 도움이 될까 싶어 질문 리스트를 공유한다.

하지만 질문에 대한 대답만 외우는 것은 절대 비추천이며, 해당 내용에 대한 공부를 반드시 하기를 추천드린다.

브라우저 / API

1. 브라우저 렌더링 과정 ⭐
첫번째는 Parsing단계로, HTML파일과 CSS파일을 파싱하여 각각 트리를 만듭니다. HTML 파일을 해석하여 DOM 트리를 구성하고, 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM 트리 구성 작업도 함께 진행합니다.
두번째는 Style단계로, 두 트리를 결합하여 렌더 트리를 만듭니다. Render 트리는 화면에 보여질 내용만 포함하기 때문에 display: none과 meta tag같은 화면에 보이지 않는 것들은 포함되지 않습니다.
세번째는 layout단계로, Render 트리를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산합니다.
네번째는 Paint단계로, 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다.
마지막으로 Composite단계로, 레이어를 합성하여 실제 화면에 나타냅니다.

2. 주소창에 URL을 입력하면 어떤 일이 생길까요? ⭐
첫번째로 사용자가 브라우저 주소창에 URL을 입력하면,
두번째로 브라우저가 URL의 IP주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다.
DNS 기록을 찾기 위해 브라우저는 브라우저 캐시, OS 캐시, 라우터 캐시, ISP 캐시 차례대로 확인합니다.
세번째로 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버가 URL을 호스팅하는 IP주소를 찾습니다.
네번째로 브라우저가 해당 웹 서버와 TCP 연결을 시작합니다.
다섯번째로 TCP 연결이 설정되면 브라우저가 웹 서버에 HTTP 요청을 처리하고 응답을 보냅니다.
그렇게 응답을 보내면 브라우저가 HTML 컨텐츠를 보여주게 됩니다.

3. CORS란? 대응 방법은? ⭐
서버와 브라우저 간에 서로 통신을 할 때, 서버는 브라우저가 자원에 접근하는 것에 대해 권한을 부여하고 이를 알려줘야 합니다. 그러지 않을 시 브라우저 측에선 해당 자원에 접근하는 것이 안전하지 않다고 판단하여 통신을 차단해버리는데, 이 때 발생하는 것이 CORS 오류입니다. 이에 대응하기 위해 서버 측에서 브라우저에게 접근에 대한 권한이 있음을 알리는 방법과 응답 헤더의 Access-Control-Allow-Origin에 접근을 허용할 출처를 반환하는 방법이 있습니다.

4. RESTful API란? ⭐
RESTful API는 HTTP URL을 통해 사용자가 받고자 하는 리소스를 명시하고 POST, GET, PUT, DELETE와 같은 HTTP Method를 통해 서버에 요청을 보내면 서버는 리소스를 확인하여 응답하는 방식인 REST 규격을 준수하는 API를 의미합니다.

5. GET과 POST의 차이, PUT과 PATCH의 차이점은? ⭐
GET은 서버로부터 데이터를 받아오기 위한 메서드이고, POST는 서버에 데이터를 전송하기 위한 메서드입니다. PUT은 리소스의 모든 것을 업데이트하지만, PATCH는 리소스의 일부를 업데이트합니다.

6. Payload와 Header의 차이는?
Payload는 전송할 실제 데이터이고, Header는 Payload의 정보를 담고 있는 보충 데이터입니다. Header는 데이터 블록의 맨 앞에 위치하며 데이터가 어디로 전송되어야 하는지 어떤 데이터인지 등의 부가적인 정보를 담고 있습니다.

7. OAuth란? OAuth의 동작 방식은?
인증을 위한 개방형 표준 프로토콜이며, 사용자의 비밀번호 없이도 접근 권한을 위임받을 수 있습니다. 사용자가 유저이고, 소비자가 앱/웹 서비스이고, 서비스제공자가 구글이라고 했을 때 OAuth의 동작 방식은 소비자가 Request Token을 요청하면, 서비스제공자가 Request Token을 발급해줍니다. 사용자 인증 페이지 호출이 되고 사용자 로그인이 완료되면, 사용자의 권한 요청 및 수락이 되면서 Access Token을 발급되고 이를 통해 서비스 정보를 요청합니다.

8. JWT방식과 Session방식의 차이
Session은 서버의 메모리를 사용하여 데이터를 저장하고, 로컬에는 세션 ID만을 쿠키에 저장하여 이를 서버로 보내 데이터를 받아오는 방식이므로, 매번 유저가 요청할 때마다 전체 데이터를 보내주어 서버에 과부하가 생길 위험이 큽니다. JWT는 필요한 정보를 payload에 담고, 암호화/복호화 데이터를 header에 넣어 한 번에 암호화하고, 이 토큰을 서버에 보내 검증 여부만 서버에서 전송받으므로 서버에 무리가 덜하지만 토큰을 탈취당하면 보안상 문제가 발생할 수 있습니다.

9. HTTP와 HTTPS 통신의 차이 ⭐
HTTP는 서버와 클라이언트 간 보안 절차 없이, HTTPS는 암호화, 복호화와 같은 보안 절차를 걸친 후 요청과 응답을 한 후 종료합니다.

10. localStorage, sessionStorage, cookie의 차이 ⭐
localStorage는 같은 도메인에 대하여 같은 정보를 저장하며, 창을 닫거나 탭을 닫는 등 세션이 만료되어도 정보가 지워지지 않습니다. sessionStorage는 같은 도메인이더라도 탭, 창 별로 서로 다른 정보를 저장하며, 세션이 만료되면 데이터도 함께 사라집니다. Cookie는 용량이 상당히 작은 텍스트 파일로, 만료 기간을 가져 일정 시간이 지나면 만료되어 데이터가 삭제됩니다.

💡 사용 용도

• localStorage : 자동로그인
• sessionStorage : 자동 임시 저장 용도
• cookie : 팝업창 안보게 하는 용도

11. SEO란? ⭐
검색 엔진 최적화의 약어로 검색 엔진이 보다 컨텐츠를 잘 이해하고, 사용자에게 제공할 수 있도록 도와주어 사이트를 개선하는 프로세스를 의미합니다. 사이트의 디렉토리 구조가 단순하고, 의미가 명확한지, 독창적인 메타 데이터와 URL 구조, 사이트 접근과 크롤링에 대한 처리를 담당하는 robot.txt의 구성, 페이지 순위, 이미지 최적화 등을 고려해볼 수 있습니다.

12. 사이트 렌더링 시간이 길어질 때 확인 해봐야할 것은? ⭐
첫번째로 웹팩 사용입니다. 웹팩을 사용하면 파일 용량이 압축되고 모듈 번들링을 통해 파일 개수가 감소합니다.
두번째로 image lazy loading입니다. Img 태그에 loading=’lazy’ 속성을 작성하면 화면에 실제로 이미지가 보여야 할 때 이미지를 다운로드하여 CSS, JS 파일보다도 먼저 다운로드하게 됩니다.
세번째로 lazy component입니다. Lazy component를 사용하면 첫 화면에 보이지 않는 컴포넌트는 나중에 다운로드하기 때문에 처음에 다운로드해야 할 파일 개수가 감소합니다.
네번째로 웹 폰트입니다. 압축률이 제일 좋은 WOFF2 형식의 폰트를 사용하는 것이 제일 좋고, WOFF2 형식의 폰트를 지원하지 않은 브라우저가 있을 경우를 대비해서 폴백 형식을 통해 그 다음으로 압축률이 좋은 WOFF 형식을 지정할 수 있습니다. 또 실생활에서 거의 사용하지 않는 글자를 폰트에서 제거한 서브셋 폰트를 통해 폰트 용량을 줄일 수 있습니다.
마지막으로 이미지 최적화입니다. 만약 이미지가 사용 용도에 비해 불필요하게 크면 이미지 크기를 줄입니다. 또 색상이 많은 이미지는 JPG 형식을, 색상이 적은 이미지는 PNG 형식을 사용하는 것이 좋습니다. 그리고 이미지 최적화 사이트를 통해 사진의 색상 수를 줄일 수 있어 이미지 파일 용량을 줄여 이미지를 최적화할 수 있습니다.

13. 크로스 브라우징이란? ⭐
웹 페이지를 만들 때 모든 브라우저에서 깨지지 않고 의도한 대로 나오게 하는 작업을 말합니다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 파일 등 코드가 원하는대로 동작하지 않을 수 있습니다. 그래서 브라우저가 달라도 정상적으로 작동하도록 설정해줘야 하는데 이에 대한 사전 대응 방법 첫번째는 브라우저 호환성 검토합니다. Flex 등 브라우저 호환이 잘 되지 않는 것이 있기 때문에 타겟으로 한 브라우저가 호환이 되는지 확인해봐야 합니다. 두번째, CSS 초기화 작업을 하여 브라우저마다 저장되어 있는 기본 스타일 값들을 초기화 시켜줍니다. 마지막으로 CSS 속성인 prefix를 통해 브라우저별로 스타일 적용을 시키는 방법이 있습니다.

14. CSR과 SSR의 차이점 ⭐
SSR은 사용자가 웹페이지에 접근할 때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식입니다. 반면에, CSR은 클라이언트 측에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행합니다.

15. DOM과 가상 DOM 이란?
Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미합니다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 됩니다. 가상 DOM은 추상화된 DOM을 뜻합니다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄입니다. 그리고 DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상 DOM을 바꿔 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있습니다.

HTML & CSS

16. ‘attribute’와 ‘property’의 차이점
Attribute는 HTML 문서의 정적인 속성이고 property는 이와 반대로 HTML DOM에서의 동적인 속성을 뜻합니다. 만약 <div> 태그 안에 ‘myClass’라는 class가 있다고 가정하면 attribute는 값이 "myClass"이고 이름이 className인 property를 가집니다.
둘의 차이는 Attribute는 HTML 텍스트 문서에 있고, property는 HTML DOM 트리에 있습니다. 즉, attribute는 변하지 않고 property는 변할 수 있습니다.

• attribute : <div class=’myClass’></div>에선 class가 attribute
• property : 아래 사진에서 className이 property

17. Cascading이란?
HTML 요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선 순위가 정해져야 합니다. 이를 Cascading이라고 합니다. Cascading은 3가지에 의해 결정되는데 CSS가 어디에 선언되었는지, 대상을 명확하게 지정할수록 높은 우선순위를 가지고, 코드 순서에 의해 결정됩니다.

18. Flex 속성 설명해주세요. ⭐
Flexbox는 기존 컨텐츠를 수평으로 배치할 때 쉽게 해결할 수 있도록 추가된 기능입니다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로서 반응형 웹 사이트에 유용하게 쓰입니다. Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식 요소 Flex Item으로 구성되어 있습니다. Flexbox 적용방법은 부모 요소인 container에 display:flex를 선언하고 전체적인 정렬과 관련된 속성인 flex-direaction, align-items, flex-wrap 같은 속성을 정의합니다. 그리고 자식 요소인 flex item에는 flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의합니다.

19. Box model에 대해 설명해주세요. ⭐
모든 HTML 요소는 BOX모양으로 구성되며, 이것을 박스모델이라고 합니다. 박스 모델은 총 네 영역으로 이루어지고, 이 네가지 영역은 padding, border, margin, content로 구분합니다. Content는 텍스트나 이미지가 들어가 있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있으며, padding은 내용과 테두리 사이의 간격입니다. 또 border는 내용과 패딩 주변을 감싸는 테두리이며, margin은 테두리와 이웃하는 요소 사이의 간격입니다.

20. Display에 대해 설명해주세요. ⭐
Display 속성은 요소를 배치할 때 사용합니다. None, block, inline, inline-block, flex, grid 총 5가지 속성이 있는데 none은 요소가 차지하는 공간이 사라지게 만듭니다.
Block은 블록 박스 요소에 기본으로 적용되는 값으로, 인라인 박스 요소를 블록 박스 요소로 변경시킬 수 있고, Inline은 box와는 반대로 사용됩니다.
Inline-block은 block 요소의 특성과 inline 요소의 특성을 따릅니다. Block 요소의 특성으로는 width와 height를 지정할 수 있고 margin, border, padding 영역을 갖는다는 점이 있습니다. Inline 요소의 특성으로는 요소의 크기가 내용에 의존적이라는 점과 줄바꿈 현상이 일어나지 않는다는 점입니다.
Flexbox는 1차원 레이아웃을 대상으로 하고, 컨테이너들의 레이아웃, 정렬 그리고 간격을 설정하는데 효과적입니다. Flexbox는 주로 반응형을 만들 때 사용됩니다.
Grid는 2차원 레이아웃을 대상으로 하고 그리드 기반의 레이아웃을 생성할 때 사용합니다.

21. Position에 대해 설명해주세요.
Position 속성은 문서 상에 요소를 배치하는 방법을 지정하며, Static, relative, absolute, fixed, sticky 총 5가지 속성이 있습니다. Static은 position의 기본 값이며, 요소를 문서 흐름에 맞게 배치합니다. Relative는 요소가 차지하는 공간은 static과 같으나 top/right/left/bottom 값을 적용시킬 수 있습니다. Absolute는 일반적인 문서 흐름에서 제거되고 부모 블록의 박스 안에 속해 위치가 지정됩니다. 만약 전부 static 값을 갖고 있으면 최상위 블록에 의존합니다. Fixed는 요소가 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤할 때 이동하지 않습니다. 마지막으로 sticky는 지정된 임계값을 넘을 때까지 relative 위치로 처리되며 특정 지점에서 fixed 위치로 처리됩니다.

22. Float가 어떻게 작동하는지?
블록 박스는 기본적으로 줄바꿈 현상이 일어나는데, float 속성을 지정하면 해당 블록의 좌측 혹은 우측 주변으로 다른 요소들이 한 줄에 올 수 있게 됩니다. 원하지 않는 요소들까지 올라오는 것을 막으려면 clear 속성을 통해 달성할 수 있습니다. 그렇게 하면 clear 속성이 지정된 요소를 포함한 후속 요소들은 float 속성의 효과에서 벗어나게 됩니다. Clear 역시 왼쪽/오른쪽 관계없이 값을 정리하는 both 값이 있습니다.

23. CSS 애니메이션과 JS 애니메이션의 차이점
간단하게 처리하는 애니메이션의 경우 CSS로 처리합니다. Transform의 translate를 사용해서 구현할 수 있는 애니메이션을 JavaScript의 style.top과 style.left 속성으로 변화시키게 되면 브라우저 렌더링 과정에서 layout이나 paint 단계를 거쳐야할 경우가 생길 수 있기 때문에 성능 개선에 효율적이지 않을 수 있습니다.
JavaScript 애니메이션은 CSS로 처리하기엔 훨씬 복잡하고 무거운 애니메이션 작업을 효율적이고 세밀하게 다루기 위해 사용합니다. 만약 translate를 VanillaJS로 구현할 경우 요소의 위치를 재계산하기 때문에 비효율적이고 사람들의 눈에 가장 부드러운 60fps가 유지되지 않습니다. 이 때문에 RAF(Request Animation Frame)가 등장했고 동일한 구현 방식으로 60fps를 달성시킬 수 있습니다. 또한 외부 라이브러리로 성능 좋은 애니메이션을 구현할 수 있습니다. 크로스 브라우징 측면에선 JavaScript 애니메이션을 사용하는 것이 유리합니다.

JavaScript

24. var, let, const 차이점 ⭐
var는 재선언이 가능하고, let const는 재선언이 불가합니다. var와 let은 값을 재할당이 가능하고 const는 불가능합니다. 그리고 var는 함수 레벨 스코프여서 함수 내에서 선언된 변수는 함수 내에서만 유효해 함수 외부에서는 참조할 수 없습니다. let과 const는 블록 레벨 스코프여서 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효해 코드 블록 외부에서는 참조할 수 없습니다.

25. 얕은 비교와 깊은 비교의 차이
얕은 비교는 기본 타입 데이터의 경우 값이 동일한지 비교하지만 객체의 경우 참조만 비교합니다. 깊은 비교는 얕은 비교와 달리 객체의 경우에도 값으로 비교합니다.

26. 호이스팅이란? ⭐
코드가 실행되는 과정에서 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 합니다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생합니다. 반면 let이나 const의 경우엔 선언과 초기화 단계가 동시에 일어나지 않고, 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄집니다.

27. Prototype과 Prototype Chaining이란? ⭐
프로토타입이란 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 만듭니다. 이 때, 만들어진 객체 안에 proto 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 링크가 바로 프로토타입입니다.
어떤 데이터의 proto 프로퍼티 내부에서 다시 proto 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인이라 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝이라고 합니다.

28. 이벤트 캡쳐링, 이벤트 버블링이란? ⭐
이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다. 이벤트 캡쳐링은 이벤트 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려갑니다.

29. This란? ⭐
This는 문맥에 따라서 다양한 값을 가지고 크게 4가지로 나뉩니다. 첫번째, 일반 함수로 호출된 경우 this는 전역 객체입니다. 그리고 이 this는 브라우저에서 window 객체가 됩니다. 두번째, 메소드로 호출되었다면 this는 메서드를 호출한 객체입니다. 세번째, 함수가 호출될 때나 생성될 때 apply, call 또는 bind가 사용되었다면 이 함수 안에서 this는 첫번째 인자값이 됩니다. 마지막으로 함수가 호출될 때 new 키워드를 사용했다면 이 함수 안의 this는 새로운 객체이기 때문에 빈 객체일 것입니다.
💡 call과 apply의 차이점
This가 함수 호출식에 따라 객체를 가리켰다면 call, apply, bind는 함수가 직접 실행 문맥을 결정합니다. 그 중 call과 apply는 함수를 호출해서 실행합니다. 두번째로 쓰이는 매개변수가 배열일 경우엔 apply를 사용합니다.

💡 bind
새로운 함수를 반환합니다. 따라서 보통 변수를 할당하여 호출하는 형태로 사용되고, 첫번째 인자로는 this 키워드를 지정하고 그 뒤의 인자들은 바인드 된 함수에 매개변수로 제공됩니다.

30. 콜백함수란? ⭐
콜백함수는 함수의 매개변수로 다른 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다. 보통 비동기 처리시 콜백함수를 사용하며, 콜백지옥에 빠지면 가독성이 떨어지기 때문에, Promise나 Async/Await를 이용해 보완할 수 있습니다.

31. 얕은 복사와 깊은 복사란?
우선 기본형의 복사는 값이 그대로 복사되는 것을 의미합니다.
그리고 참조형의 얕은 복사는 참조값의 복사를 나타냅니다. 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조값을 전달하여 한 데이터를 공유하는 것입니다.
마지막으로 참조형의 깊은 복사는 얕은 복사처럼 참조값이 복사되는 것이 아니라 값만 복사되어 독립적인 메모리에 값 자체를 할당하여 생성합니다. 1차원 배열을 복사할 땐 Object.assign()이나 spread operator를 사용하고 2차원 이상의 배열을 복사할 땐 함수를 커스텀하여 하는 방법과 lodash 라이브러리의 cloneDeep() 메소드를 이용하여 복사하는 방법이 있습니다.

32. 실행 컨텍스트란? ⭐
코드를 실행하기 위해 필요한 정보들을 가진 범위를 객체 형태로 나타낸 것입니다. 실행 컨텍스트는 VariableEnvrionment, LexicalEnvironment, ThisBinding 3가지로 구성되어 있는데
VariableEnvrionment는 현재 컨텍스트 내부의 식별자 정보인 EnvironmentRecord와 외부 환경 정보인 outerEnvironmentReference가 있고, LexicalEnvironment는 VariableEnvrionment를 그대로 복사하여 사용하나 변경 사항이 실시간으로 적용되어 VariableEnvrionment는 초기 상태를 저장하고, LexicalEnvironment는 최신 상태를 저장합니다. 마지막으로 ThisBinding는 this 식별자가 바라보고 있는 대상 객체를 뜻합니다.

33. Promise란? ⭐
Promise는 비동기 연산이 종료된 이후에 결과값이나 실패 사유를 처리하기 위한 것이고, Promise를 이용하면 동기 메서드처럼 값을 반환할 수 있습니다. Promise는 resolve와 reject를 파라메터로 받고 있는데 비동기 작업이 성공하면 resolve 함수를 호출하고, 실패하면 reject 함수를 호출합니다.
💡 메서드: 첫번째로 then() 메서드는 2개의 콜백함수를 인수로 받는데 하나는 Promise가 이행했을 때고 다른 하나는 거부했을 때의 콜백 함수입니다. 두번째로 Catch() 메서드는 거부했을 때 실행되는 메서드입니다. 세번째로 finally() 메서드는 이행과 거부 상관없이 비동기 작업이 완료된 후 실행합니다. 네번째로 Promise.all() 메서드는 배열이나 객체에 있는 모든 프로미스가 이행하거나 거부하였을 때 Promise를 반환합니다. 단, 하나라도 거부되는 것이 있다면 어떤 데이터도 얻지 못해서 Promise.all() 메서드는 정보를 다 보여주거나 혹은 다 보여주지 않을 때 사용하는 것이 좋습니다. 마지막으로 Promise.race() 메서드는 배열이나 객체 안에 있는 프로미스 중 이행, 거부 상관없이 가장 먼저 완료된 Promise의 결과를 받을 수 있습니다.

34. async-await란? ⭐
async와 await는 기존의 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 코드 가독성을 좋게 만들어주는 비동기 처리 패턴입니다. async가 붙은 함수는 프로미스를 반환하고 프로미스가 아닌 것은 프로미스로 감싸 반환하며, await 키워드를 만나면 프로미스가 처리될 때까지 기다립니다. 프로미스가 처리되어 resolve 될 땐 값만 따로 추출하여 리턴할 수 있습니다.

35. 자바스크립트는 싱글 스레드 기반 언어인데 비동기 프로그래밍은 왜 가능한 걸까요?
자바스크립트 엔진은 하나의 Memory Heap과 하나의 Call Stack을 가지고 있습니다. 즉, 한 번에 하나의 함수만 동기적으로 실행 가능하다는 것입니다. 그런데도 자바스크립트가 비동기적으로 작동할 수 있었던 이유는 자바스크립트 엔진 밖에서도 자바스크립트 실행에 관여하는 요소 즉, Web API, Task Queue, Event Loop가 존재하기 때문입니다. 만약 setTimeout 함수가 실행한다고 가정했을 때 Call Stack에 setTimeout 함수가 추가되고 Web API가 Timeout 작업을 요청한 시간이 지나면 Task Queue에 인자로 받은 콜백함수를 전달합니다. Event Loop는 Call Stack이 비어져 있는 것을 확인하고 Task Queue에 있던 콜백함수를 Call Stack으로 옮기고 실행하게 됩니다. 이러한 과정 덕분에 자바스크립트는 싱글 스레드 기반 언어인 데도 불구하고 비동기 프로그래밍이 가능한 것입니다.

36. 클로저는 무엇인가요? ⭐
외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는데 이런 중첩 함수를 클로저라고 합니다. 클로저는 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용됩니다.

37. OOP 특징
객체지향프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법입니다. OOP의 장점은 코드 재사용성입니다. 클래스를 한번 만들어 놓으면 계속 이용 가능하고, 상속을 통해 확장이 가능합니다. 수정해야할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기 때문에 해당 부분만 수정하면 되어 유지보수가 쉽습니다. 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것입니다. OOP의 특징으로는 클래스와 객체, 캡슐화, 상속 등이 있습니다. 클래스는 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것이고, 객체 즉 인스턴스는 클래스에서 정의한 것을 토대로 실제 메모리 상에 할당된 데이터입니다. 상속은 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고, 코드의 중복을 없애기 좋습니다.

38. 화살표 함수와 일반 함수의 차이점 ⭐
화살표 함수는 함수를 간단하게 표현할 수 있는 ES6문법입니다. 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같습니다. 또한, 화살표함수는 프로토타입 프로퍼티를 가지고 있지 않기 때문에 생성자 함수로 사용이 어려우며, 일반함수는 생성자 함수로 사용이 가능합니다. 그리고 일반함수에서는 함수가 실행될 때 암묵적으로 arguments변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지 않습니다. 그래서 객체 프로토타입으로 메소드를 선언할 때에는 화살표 함수는 적합하지 않습니다.

39. ‘==’과 ‘===’의 차이점
"=="는 동등 연산자로, 비교하는 대상의 타입이 다르더라도, 타입을 강제로 변환시켜 타입을 같게 한 뒤 비교합니다. 즉, 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴합니다. "==="는 일치 연산자로 타입과 값이 모두 같을 경우에만 true를 리턴합니다.

40. 이벤트 바인딩이란?
발생하는 이벤트와 그 후에 어떤 일이 일어나는지 알려주는 콜백함수와 연결해주는 것이 이벤트 바인딩인데 총 3가지 방법이 있습니다. HTML 이벤트 핸들러, DOM 핸들러, EventListener를 이용한 핸들러가 있는데, 우선 HTML 핸들러는 HTML 요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식인데 HTML과 JS가 혼용될 수 있는 문제가 발생합니다. 그리고 DOM 핸들러는 HTML과 JS가 혼용되는 문제를 해결했으나 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있고, 함수에 인수를 전달하지 못하며 바인딩 된 이벤트 핸들러가 2개 이상인 경우 제일 마지막에 추가된 코드의 이벤트 핸들러만 실행됩니다. 앞에서 설명한 것의 단점을 보완하기 위해 만든 것이 EventListener를 이용한 이벤트 핸들러입니다. addEventListener를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 실행될 콜백함수를 지정합니다. 하나의 이벤트에 대해 다수의 핸들러를 추가할 수 있고, 캡쳐링과 버블링을 지원하며 HTML뿐만 아니라 DOM요소에도 동작한다는 장점이 있습니다.

41. event.target과 event.currentTarget의 차이점
event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치 즉, 내가 클릭한 자식 요소를 반환하지만 event.currentTarget은 이벤트가 부착된 부모의 위치를 반환합니다.

42. Map과 Set 설명 및 차이점 ⭐
Map은 key-value의 쌍을 저장합니다. 객체의 key는 무조건 string과 symbol만 가능하지만 map의 key는 자료형 제약이 없습니다. 또 map은 삽입된 순서를 기억하기 때문에 반복문 사용시 삽입 순서대로 반복됩니다.
Set은 중복을 허용하지 않는 값을 모아두는 객체입니다. Set은 key가 없는 값을 저장한다는 점에서 배열과 유사합니다. 요소의 유무를 판단할 때 array.find()보단 set.has()가 더 효율적입니다.

React

43. Virtual DOM 작동 원리
우선 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교하여 바뀐 부분만 실제 DOM에 적용합니다.

44. Virtual DOM이란? ⭐
DOM을 자주 조작하면 성능에 많은 영향을 끼치기 때문에 속도가 느려집니다. 이는 웹 브라우저에서 DOM에 변화가 일어나면 브라우저 렌더링 과정을 거치게 되고 이 과정에서 시간이 소요되고 성능이 저하되는 것입니다. 그렇기 때문에 Virtual DOM을 사용해 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 해줍니다.

45. 왜 React를 사용하는지?
우선 Virtual DOM이 존재하기 때문입니다. 기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM 전체를 바꾸게 되는데 Virtual DOM은 DOM과 비교해서 달라진 부분만 찾아 바꾸기 때문입니다
두번째로 컴포넌트 단위 작성인데, 컴포넌트 단위로 작성하게 되면 또 다른 웹에서 재사용이 가능해집니다. 이는 생산성과 유지 보수를 용이하게 합니다.
마지막으로 커뮤니티입니다. 개발을 하다 보면 막힐 때나 오류가 발생할 때가 생깁니다. 리액트는 vue에 비해 사용자가 많고 페이스북에서 업데이트를 계속 하고 자료가 방대하기 때문에 리액트를 사용하게 되었습니다.

46. 클래스 컴포넌트와 함수 컴포넌트의 차이 ⭐
클래스 컴포넌트의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능합니다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능합니다.
함수 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점입니다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용합니다.

47. useMemo()란? ⭐
컴포넌트의 성능을 최적화시킬 수 있는 hook이고, Memoization된 값을 반환합니다.
여기서 memoization된 값은 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 값을 재사용한다는 것을 의미합니다. 이렇게 되면 함수 호출 시간도 줄이고, props로 받는 하위 컴포넌트의 재렌더링도 방지할 수 있습니다.

48. useCallback()이란? ⭐
Memoization된 함수를 반환하는 대표적인 hook입니다.
함수를 props로 넘겨줄 경우 함수는 객체이고, 새로 생성된 함수는 다른 참조 값을 가져 하위 컴포넌트가 재렌더링이 발생하게 됩니다. 이런 경우 useCallback()으로 함수를 감싸면 의존성 배열 안에 넣어준 값이 바뀔 경우를 제외하고 항상 동일한 객체를 넘겨줌으로써 불필요한 재렌더링을 방지할 수 있습니다.

49. 리액트 렌더링 성능 최적화 방법은 무엇이 있는지? ⭐
첫번째로 useMemo()가 있습니다. useMemo()는 memoization된 값을 반환하기 때문에 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 값을 재사용합니다. 이로 인해 함수 호출 시간도 줄이고, 하위 컴포넌트에서 함수를 props하여 사용하고 있다면 재렌더링도 방지할 수 있습니다.
두번째로 React.memo가 있습니다. React.memo는 컴포넌트의 props가 바뀌지 않도록 하여 성능 최적화할 수 있습니다.
세번째로 useCallback()이 있습니다. useCallback()은 memoization된 함수를 반환합니다. 함수를 props로 넘겨줄 경우 함수는 객체이고, 새로 생성된 함수는 다른 참조 값을 가져 props가 변한 것이라고 인지합니다. 이런 경우 useCallback()으로 함수를 감싸면 의존성 배열 안에 넣어준 값이 바뀔 경우를 제외하고 항상 동일한 객체를 넘겨줌으로써 불필요한 재렌더링을 방지할 수 있습니다.
네번째로 자식 컴포넌트에 props로 객체를 넘겨줄 경우 변형하지 않고 넘기는 방법입니다. Props로 전달한 객체는 동일한 값이어도 새로 생성된 객체는 이전 객체와 다른 참조 주소를 가진 객체이기 때문에 재렌더링이 일어납니다. 그래서 자식 컴포넌트에 객체를 변형하는 함수를 작성하면 값이 바뀌지 않는 이상 재렌더링을 방지할 수 있습니다.
다섯번째로 컴포넌트를 매핑할 때는 key값을 index로 사용하지 않는 방법입니다. 리액트는 key가 동일한 경우 동일한 DOM Element를 보여주기 때문에 예상치 못한 문제가 발생할 수 있고, 데이터와 key가 매치되지 않아 서로 꼬이는 부작용도 발생할 수 있습니다.
여섯번째로 useState()의 함수형 업데이트입니다. 예를 들어 useCallback() 안에 setState()를 작성할 때 새로운 값을 작성하는 것이 아닌 prevState를 통해 값을 변경하면 useCallback() 의존성 배열에 값을 넣어주지 않아도 됩니다.
마지막으로 Input 태그에 onChage() 이벤트 최적화 방법입니다. 사용자가 Input 태그에 작성할 때마다 재렌더링이 되는데 디바운스(debounce)나 스로틀(Throttle)를 통해 최적화를 해줄 수 있습니다.

50. React, Vue, Angular의 차이는 무엇인가요? ⭐
일단 3개의 공통점은 SPA 기반 프론트엔드 프레임워크 혹은 라이브러리인 것입니다. react는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다. Vue는 러닝커브가 낮은 편이고, react나 angular는 러닝커브가 높은 편입니다.

51. React의 라이프사이클에 대해 설명해주세요. ⭐
리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리입니다. 그러다 보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전부터 페이지에서 사라질 때 끝이 납니다. 라이프 사이클은 크게 보면 컴포넌트가 처음 실행될 때인 mount, 데이터에 변화가 있을 때인 update, 컴포넌트가 제거될 때인 unmount 이렇게 3개로 나눌 수 있습니다.

52. MVC, MVVM 모델에 대해 설명해주세요.
MVC 패턴은 모델 + 뷰 + 컨트롤러를 합친 용어입니다. 모델은 데이터 및 데이터를 처리하는 부분이고, 뷰는 사용자에게 보여지는 UI 부분입니다. 그리고 컨트롤러는 사용자의 입력을 받고 처리하는 부분입니다. MVC는 사용자의 액션이 컨트롤러에 들어오면, 컨트롤러가 액션을 확인하고 모델을 업데이트합니다. 컨트롤러는 모델을 나타내줄 뷰를 선택하고, 뷰는 모델을 이용하여 화면을 나타냅니다. 컨트롤러는 여러 개의 view를 선택할 수 있는 1:N 구조이고, 뷰를 선택할 뿐 직접 업데이트를 하진 않습니다. 보편적으로 널리 사용되는 패턴이지만 뷰와 모델 사이의 의존성이 높고, 어플리케이션이 커질수록 복잡해 유지보수가 어렵다는 단점이 있습니다.
MVVM 패턴은 모델 + 뷰 + 뷰 모델을 합친 용어이고, 모델과 뷰는 MVC와 동일합니다. 뷰모델은 뷰를 표현하기 위해 만든 뷰를 위한 모델이자 뷰를 나타내기 위해 데이터 처리를 하는 부분입니다. 액션이 뷰를 통해 들어오면 뷰 모델에 액션을 전달합니다. 뷰 모델은 모델에게 데이터를 요청하고, 모델은 요청받은 데이터를 뷰 모델에게 응답하고, 뷰 모델은 받은 데이터를 가공하여 저장합니다. 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 동작 방식입니다. 이 패턴의 가장 큰 장점은 뷰와 뷰 모델의 의존성을 없애고, 각 부분이 독립적이라는 것입니다. 단점은 뷰 모델의 설계가 쉽지 않다는 점입니다. 이 패턴의 주요 목적은 로직의 분리이고, 리액트에서는 데이터와 화면 컴포넌트를 분리하는 것을 예시로 들 수 있습니다.

53. 웹팩과 바벨에 대해서 설명해주세요. ⭐
웹팩은 여러 개의 파일을 하나로 합쳐주는 모듈 번들러입니다. 웹팩은 모듈 지원, 파일 분할, css loader, jsx 변환 작업을 해줍니다. 그리고 여러 개로 나눠진 자바스크립트 파일을 html이 실행할 수 있는 하나의 자바스크립트 파일로 합쳐줍니다. 이로 인해 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있습니다.
바벨은 대표적인 트랜스파일러인데 모든 브라우저가 ES6 문법을 제공하지 않기 때문에 ES5 문법으로 변환시켜줍니다.

54. use strict이란? 장단점은?
자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킵니다. 전역에서 선언하면 모든 소스코드가 대상이고, 로컬로 선언하면 함수 내에서만 대상이 됩니다. use strict 모드에서는 삭제가 불가능한 프로퍼티를 삭제하거나 함수의 매개변수를 중복해서 사용하는 것 등이 금지됩니다. 코드의 문제를 더 빨리 알 수 있기 때문에 디버깅이 쉬워지고 실수로 전역변수를 만드는 것이 불가능하다는 장점이 있지만, 단점으로는 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 수 있다는 점입니다.

55. NPM이란?
Node Packaged Manager의 약자로, NPM은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 자바스크립트 패키지 매니저이고, Node.js에서 사용할 수 있는 모듈들을 패키지화에서 모아둔 저장소 역할이기도 합니다. 많은 자바스크립트 프로그래머들이 유용한 패키지들을 만들어 NPM에 코드를 공개합니다.

56. TDD란?
테스트 주도 개발이라는 뜻으로, 먼저 테스트 코드를 작성한 후에 구현을 하는 방식입니다. TDD는 실패→ 성공 → 리팩토링이 서로 꼬리를 물고 이뤄집니다. TDD를 진행하면 테스트 케이스를 작성할 때 주로 작은 단위로 만들기 때문에 코드가 방대해지지 않고, 코드의 모듈화가 자연스럽게 잘 이루어집니다. React에서는 테스트를 위한 jest(프레임 워크)와 enzyme(라이브러리)등이 있습니다.

TypeScript

57. 타입스크립트를 사용해 본 경험이 있는지? 어떤지? ⭐
정적 타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고, ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있습니다. 명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 할 수 있다는 장점이 있었습니다.

58. 타입스크립트의 특징 ⭐
첫번째로 언어의 패러다임입니다. TypeScript도 JavaScript에 속합니다. 하지만 TypeScript는 클래스와 인터페이스 그리고 정적 타이핑을 제공하는 Java와 같은 객체 지향 프로그래밍 언어이기도 합니다.
두번째로 타이핑 방법입니다. JavaScript는 기본적으로 변수에 값이 할당될 때 변수의 자료형이 결정되는 동적 타이핑 언어입니다. 반면 TypeScript는 선언할 때 타입을 지정해줘야 하는 정적 타이핑 언어입니다.