프론트엔드 면접준비 [ 1 - 12 ]

1. var, let, const 차이를 설명해보세요

 

- var은 ES6이전 문법으로 지역과 함수레벨의 스코프를 지니고 있으며,
  let과 const는 ES6 문법에 추가된 내용으로 블록레벨의 스코프를 지니고 있습니다.
  let과 const의 차이는 const는 선언과 동시에 초기화를 해줘야합니다.

 

2. 이벤트 버블링과 캡처링에 대해 설명해보세요

 - 버블링은 하위 요소에서 상위요소로 이벤트가 올라가는 과정을 얘기하고,
  캡처링은 반대로 상위에서 하위로 내려가는 반응을 합니다.
  버블링을 막는 방법은 stopPropagation을 활용하여 버블링이 더이상 퍼지지 않도록 할 수 있습니다.
  버블링을 사용하는 이유는 하위 요소를 눌렀을 때 상위요소로 올라가기 때문에 이벤트 위임을 사용하기 용이합니다.
  따라서 상위 요소에서 하위요소들이 동작하는 내용을 지정해주면
  이벤트 위임을 통해 하나의 함수로 관리가 가능하게 되어 코드 가독성이 상승합니다.

 

3. Promise를 사용한 비동기 통신과 async, await 를 사용한 비동기 통신의 차이를 설명해보세요

 - Promise통신은 resolve와 reject로 구성되어 then의 경우 resolve, catch의 경우 reject의 요소를 가져오게됩니다.
  이게 내부에 반복되게 되면 코드가독성이 상당히 떨어집니다.
- async await의 경우 비동기 동작을 걸고 동작이 끝날때까지 기다렸다가 처리할 수 있도록 조치해줍니다.
  따라서 코드 가독성이 훨씬 편안해 지며,
   promise동작이 끝나고 받아온 것이기 때문에 async 외부에서 값을 사용하도록 지원가능합니다.

 

4. 호이스팅에 대해서 설명해보세요

- 호이스팅은 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

 

5. virtual DOM에 대해 설명해보세요

- 가상적 UI에 저장해두었다가 리얼돔과 연동시킴 DOM의 구조를 흉내넨 자바스크립트 객체이며,
  인메모리에 존재해 실제 렌더링 되지는 않음 가상돔과 비교하여 바뀐 부분만 실제 DOM에 적용

 

6. 클래스형과 함수형 컴포넌트의 차이점은 무엇인가요?

- 가장 큰 차이점은 상태값과 라이프사이클 함수를 가질 수 있느냐 차이입니다.

7. 클로저(closure)가 무엇인지 설명해보세요

- 자신이 생성될 때의 환경을 기억하는 함수
- 반환된 내부함수가 자신이 선언되었을 때의 환경인 스코프를 기억하여
  자신이 선언되었을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 

 

8. DOM을 건드리는 방식과 아닌 방식의 차이는 무엇인가요?

 - 직접 DOM을 건드리는 방식은 DOM의 구조를 파악하고 있어야하며,
   클래스명이나 태그명이 바뀌는 경우 DOM을 변경해야함
- Angular의 경우 view와 model을 연결시키는 바인딩 작업이 있고 변화감지를 통해서
 상태를 보고있다가 업데이트 되는 식이다.
- React의 경우 가상DOM을 이용하여 가상DOM이 실제 DOM과 비교하여 변경된 state를 감지함

 

9. 함수 scope와 블록 scope에 대해 설명해보세요

- 블록 scope는 주어진 코드 block에서만 사용가능하며, 밖에서는 접근할 수 없음

 

10. Eslint, prettier에 대해 아는대로 설명해보세요

- Eslint는 소스코드를 스캔하여 문법적 오류나, 잠재적 오류까지 찾아내고 오류의 이유를 볼 수 있게 도와주는 도구
  JavaScript, JSX의 정적 분석도
- Prettier는 정해진 규칙되로 코드를 이쁘게 할 수 있는 도구,
  들여쓰기나 따옴표 코멧포멧터 - 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구

 

11. CSS 박스 모델에 대한 얼마나 알고 있고 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명해보세요

- css 박스 모델이란 HTML 요소들을 감싸는 네모난 상자로 margin, border, padding, content로 구성
*블록 레벨 엘리먼트 
  -한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트
  - 다른 인라인 엘리먼트뿐 아니라 블록 레벨 엘리먼트 컨텐츠로 포함할 수 있다.
   ex ) div, h, form, address, table 등
* 인라인 엘리먼트
 - 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트
 - 인라인 엘리먼트만 포함될 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
  ex ) a, img, em, strong
- 변경방법 : display : inline, display : bolck, display : none
- 다른 박스 모델로는 W3E : context-box (width = content 가로크기)
                               IE모델 : border-box ( width = padding, border 포함 가로크기)

 

12. inline과 inline block의 차이점에 대해 설명해보세요

- inline은 텍스트 크기만큼 공간을 점유하고, 줄바꿈을 하지않음
- inline-block은 inline 속성과 block속성의 특징을 둘다 가지고 있음.
inline속성과 다르게 width, height 적용이 가능하고 line-height를 커스텀하게 적용할 수 있다.