프론트엔드 면접준비 [ 49 - 60 ]

49.javascript ES6에 추가된 것은 무엇인가요?

- 1. Block scope 변수 - let, const

- 2. String Literal - ` ${변수}` 기법

- 3. 객체 비구조화 객체의 특정 값을 받아오는 방식으로 작성 가능
     ex ) const {id} = useParams(); es5 : useParams().id

- 4. 프로퍼티 초기화 단축 : key, value가 동일 시 생략하는 기능

- 5. for in, for of 기법

- 6. 화살표 함수 (가독성 증가 | this 바인딩의 차이, 생성자 함수 사용x, arguments객체 생성x, 호이스팅x)

50. ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요

- 1. 코드의 간결성을 위해서

- 2. 콜백 함수 this에 값을 참조시킬 때

- 3. map 사용할 때 this를 넘겨주어 코드를 더 쉽게 작성 가능

51. TCP와 UDP의 차이점은 무엇인가요?

- TCP는 안정성, UDP는 신속성

52. 함수 호출 시에 this의 용법에 대해 아는대로 설명해보세요

- 함수를 실행하고 있는 그 객체를 참조하기 위해서

- 화살표 함수의 경우 상위 함수

53. javascript는 싱글 스레드 언어인데, 싱글 스레드 언어의 특징에 대해 설명해보세요

- 1. 문맥교환 작업을 요구하지 않음

- 2. 자원 접근에 대한 동기화를 신경쓰지 않아도 됨

- 3. 프로그래밍 난이도가 쉽고 CPU, 메모리를 적게 사용함

- 4. CPU만 사용하는 작업이라면 싱글 스레드가 멀티 스레드보다 빠름

54. Webpack이 무엇인지 설명해보세요.

- 파일을 하나로 묶어주는 모듈번들러

55. React hooks는 무엇인가요?

- http 요청, 직접적인 dom 동작, window사이즈 쿼리 등 컴포넌트 상태에 접근하며,
  사이드 이펙트를 트리거할 수 있는 함수

56. React hooks의 장점은 무엇인가요?

- 코드 길이가 짧아짐

- 로직의 재사용이 가능하고 관리가 쉬워지며, 가독성이 좋음

- 클래스가 주는 혼동을 줄여줌 ( 생명주기 함수, this )

57. JSX란 무엇인가요?

- 자바스크립트 + xml

- 바벨을 사용하여 자바스크립트 형태로 코드로 변환

- virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트
 내부는 하나의 DOM트리 구조로 이루어져야한다는 규칙이있다.

- 자바스크립트 표현식을 쓰려면 코드를 {}로 감싸주면 된다.

- if, for문 대신에 삼항연산자 or map함수 허용

- 인라인스타일 적용시 카멜문법 사용 필요

58. HOC란 무엇인가요?

- High Order Component (고차 컴포넌트)

- 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수

- 컴포넌트가 UI를 props로 변환하는 반면, HOC는 컴포넌트를 다른 컴포넌트로 변환

- Redux의 connet나 Relay의 createContainer가 대표적 예

59. Redux를 주로 사용하셨는데, Flux에 대해 알고 계신가요?

- MVC 패턴의 문제를 해결하기 위한 패턴

- 모델과 뷰의 양방향 데이터 흐름은 단방향으로 변경하도록 만듬

- redux의 배경이 되는 패턴 기반

- dispatcher, store, view, action이 단방향 바인딩처럼 체크해서 전

60. React에서 상태변화가 일어나면 어떻게 변화를 감지하는지 아는대로 설명해보세요.

- 가상돔과 비교하여 수정된 부분을 실제 돔에 반영