리액트 면접준비 [ 31~40문항 ]

31. 웹 프로토콜이란?

- 웹에서 쓰이는 통신 규약 - 통신할 때 상호간의 규칙

  protocol://computer_name:port/document_name?parameters

  프로토콜 : 문서에 접근하기 위해 사용하는 프로토콜 이름 (http, https 등)

  computer_name : 문서가 있는 컴퓨터 도메인 (아이피, 도메인)
  port : 서버가 어떤 포트 숫자를 바라고 있는지 (http: 80, https:443 등)
  document_name: 서버 컴퓨터에 있는 특정 문서의 이름
  parameters : 페이지에 넘기는 변수 "

- HTTP : get, head, post, put 브라우저 웹 서버 통신 주요 프로토콜

- FTP 파일, 문서, 이미지 등 다양한 형태, 파일 교환시 호환성 보장 필요

- SMTP 메일 전송 프로그램이 서버로 메일을 보낼 때 사용하는 프로토콜 텍스트만 전송 가능한 것이 특징

- MIME : SMTP를 보완하여 데이터 전송 가능이 추가된 프로토콜

32. AJAX란 무엇인가

- ajax - asynchronous Javascript and xml

  자바스크립트를 이용해서 비동기를 xml을 이용하여 서버와 통신하는 방식

  최근에는 xml보다 json을 더 많이 사용 Ajax는 웹페이지의 디자인 요소와 정보요소 분리

  XMLHttpRequest객체를 이용해 전체 페이지를 새로 고치지 않고 페이지 일부만 로드하는 기법

  * 동작 원리

    요청 (브라우저가 서버에 요청),

    응답 : (브라우저는 콘텐츠를 처리하여 추가) json 데이터 - [ “데이터 이름” : 값 ] 으로 이루어짐

33. Promise와 Callback의 차이점은?

- Promise는 resolve와 reject라는 2개의 파라미터를 가지고, 성공값을 then으로 실패값을 catch로 넘긴다

- callback은 setTimeout방식으로 사용하며, 콜백 내부에서만 값을 가진다.

  콜백 내부에 계속 값을 넣어줘야 하기 때문에 가독성이 많이 떨어짐

34. 자바스크립트와 타언어의 차이점

- 느슨한 타입의 동적 언어라는 점

- 자료형에 관계없이 데이터 입력 싱글 스레드 기반 비동기 처리를 함 - 작성된 순서대로 실행 x (이벤트 루프 개념 참고)

35. ES6의 호환성 해결방법은?

- ES6 버전 이상의 스크립트부터 브라우저 호환 문제 발생

  브라우저별 구동원리, js엔진 차이로 호환성 이슈 발생

  차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업 = 크로스 브라우징

  javascript 호환성에 따른 충돌 부작용을 줄이기 위한 도구 = Babel

36. babel은 컴파일러 인가 ? 트랜스파일러인가?

- 트랜스 파일 = 어떤 특정 언어로 작성된 소스코드를 다른 소스 코드로 변환

- 컴파일 = 한 언어로 작성된 소스 코드를 다른 언어로 변환

- 트랜스 파일 = 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른언어로 변환

  바뀌는 언어의 차이에 따라 컴파일과 트랜스 파일 기준이 달라짐

  Babel은 ES6이상 문법을 ES5이하 브라우저가 호환하는 js로 트랜스 파일

37. 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)

38. Context API란?

- 리액트에 내장된 기능으로 props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해줌

- 사용방법 : createContext를 선언하여 Provider로 값 제공, useContext로 사용

- 단점 : provider의 state 등이 변할 때 마다,

            Provider 구독하고 있는 모든 컴포넌트들이 리렌더링됨,

            useMemo를 통해 provider의 valuer props를 메모제이션 하거나 독립적인 context를 만들어주는 방법도 있음.

39. 라이프사이클 메소드에 대해 설명

- 생명주기 메서드 - 컴포넌트가 브라우저에 생성, 업데이트, 제거 때 호출됨

- 리액트 라이프 사이클

  1. 컴포넌트 디드 마운트 - 생성 (첫 렌더링 마치면 호출)

  2. 컴포넌트 디드 업데이트 - 업데이트 (ex)의존성 배열 useEffect)

  3. 컴포넌트 윌 언마운트 - 제거(컴포넌트가 화면에서 사라지기 직전 호출) 의존성 배열유무에 따른 차이존재

클레스형 컴포넌트에서만 사용 가능

 constructor : 컴포넌트 생성자 메서드

 → getDerivedStateFromProps : props로 받아온걸 state로 넣어줄 때

→ shouldComponentUpdate : 리렌더링 여부 결정

→ render : 컴포넌트 렌더링

40. react 클래스형과 함수형의 차이

- 클래스형 컴포넌트

  1. class 키워드로 시작

  2. Component를 통해 상속 받음

  3. render() 함수를 사용해서 jsx 반환

  4. props 조회 시 this 키워드 사용

  5. 생명주기 함수 사용 가능

  6. constructor 안에서 this.state 초기 값 설정 가능

  7. constructor 없이도 바로 state 초기값 설정가능

  8. this.setState()를 통해 state값을 변경

- 함수형 컴포넌트

  1. jsx를 return 문을 사용해서 반환

  2. state를 사용할 수 없다

  3. 생명주기 함수를 작성할 수 없다.

  4. useState로 state 사용