기술 면접 3탄

1. http와 https 통신 방식의 차이를 설명해주세요.#

http

http 방식은 네트워크상에서 정보를 누군가가마음대로 열람, 수정이 가능하다.
http 방식이 https 방식보다 빠르다.
http 방식은 민감한 정보를 다룰 때 항상 변조, 해킹 가능성을 생각해야 한다.

https

https 방식은 누가 볼 수 없도록 막아놨다.
https 방식은 http 방식보다 느리다.
https 방식은 설치 및 인증서를 유지하는데 추가적인 비용이 발생한다.

따라서, 민감한 정보가 있는 페이지의 경우 https응 이용하고, 그럴 필요가 없으면 http로 만들면 된다.

2. OOP에 특징에 대해 설명해 주세요.#

Object Oriented Programming 객체지향 프로그래밍이라고 한다. 특징은 크게 4가지가 있다.

상속#

상속이란 기존 상위클래스에 근거하여 새롭게 클래스와 행위를 정의할 수 있게 도와주는 개념이다.
기존 클래스에 기능을 가져와 재사용할 수 있으면서도 동시에 새롭게 만든 클래스에 새로운 기능을 추가할 수 있게 만들어 준다.

다형성#

다형성은 상속을 통해 기능을 확장하거나 변경하는 것을 가능하게 해준다.
이를 통해 코드의 재사용, 코드길이 감소가 되어 유지보수가 용이하도록 도와주는 개념이다.
쉽게 말해, 같은 동작이지만 다른 결과물이 나올때 이를 다형성이라고 생각하면 된다.

예를 들어, 도형을 만들다 라는 기능이 있으면, 어떤 거는 삼각형 도형을 만들고, 어떤거는 사각형 도형을 만드는 거라고 비유해서 생각하면 된다.

캡슐화#

은닉화 : 보통 데이터를 은닉시킨다고 표현하는데, 외부에서 쉽게 데이터를 접근할 수 없게 만듬. (접근제어자, setter, getter 사용)
데이터 캡슐화 : 필드와 메소드를 클래스로 묶음

예를 들자면, 은행이라는 클래스는 잔고라는 변수가 있고 그 잔고를 조회하거나, 잔고를 수정할 수 있는 메서드등이 있다고 가정하자.
캡슐화를 하는 중요한 목적은 바로 정보의 은닉화이다. 잔고라는 변수가 만약 public 으로 선언되어있다고 생각해보자.
200만원인 나의 잔고가 누군가 접근에 의해 0원이 될수도 있다. 따라서 잔고라는 변수를 바로 접근할 수 없도록 private로 선언하고 데이터를 보호하는 것이다.
이렇게 보호된 변수는 getter나 setter등의 메서드를 통해서만 간접적으로 접근이 가능하도록 하는 것이 바로 캡슐화의 중요한 목적이다.

추상화#

추상적으로 생각해서 일단 큰 틀의 클래스를 구현하고, 거기에 최소 이러한 공통적인 요소나 필수적인 요소는 들어갔으면 하는 바램에서 만든 것이 추상클래스 이다.
이 과정에서 공통적인 요소나 특징을 추출하는 과정이 추상화 이다.

예를 들자면, 벤츠, 아우디, 소나타, 티코, 벤틀리 등등 우리가 생각하는 여러 종류의 자동차가 있다.
이것을 다 클래스화하고 변수와 메서드 등을 개별적으로 만드는것은 무모한 짓이다.
따라서 방금 나열한 자동차들의 공통적인 요소나 특징을 추출하는 과정인 추상화를 거쳐 요소를 끄집어 내면, 바퀴, 배기통, 핸들, 차문, 유리창 등 필수적인 부품이 있고 바퀴는 굴러가야하며, 핸들은 좌우로 돌아가야하고 차문은 열려야 한다는 공통적인 행동 즉 어떤 차든 필수적으로 필요한 메서드가 추출된다.
이러한 과정이 추상화하는 과정이다. 이렇게 추상적으로 끄집어 낸 개념들을 큰 틀에서 클래스로 만든 것이 바로 추상클래스이다.

3. React hooks에는 어떤 종류가 있나요 ?? 그리고 각각의 용도를 설명해주세요.#

useState#

가장 많이 사용되는 훅으로써, 함수형 컴포넌트에서도 state를 지닐 수 있게 해주는 훅이다. state는 화면 렌더링과 관련된 데이터를 다룰 때 쓰인다. 이는 곧 state를 바꾸면 컴포넌트가 리랜더링된다는 것을 의미한다.

상태 변경 함수를 이용해서 state 값을 변경할 수 있다.

// 기본 형태const [상태, 상태변경함수] = useState(초기값);const [loading, setLoading] = useState(false);

useEffect#

useEffect는 클래스형 컴포넌트의 라이프사이클을 대체하는 Hook 으로 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있다.
뒷정리(cleanup) 함수를 return하면 컴포넌트가 언마운트되기 전에 지정한 작업을 수행할 수 있다. (class형 컴포넌트에서 componentWillUnmount의 역할)
클래스형 컴포넌트의 라이프사이클과 다르게 컴포넌트 중심이 아닌 데이터 중심으로 실행된다.

deps 값이 있으면 그 값을 추적해서 값이 변경될 때마다 실행된다.
deps에 빈 배열을 넣으면 마운트 될 때 처음 한 번만 실행된다.
deps 값을 아예 넣지 않으면 리렌더링 될 때마다 실행된다.

useEffect(() => {  console.log('render');}, [deps]);

useRef#

ref 는 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 Hook이다. (HTML의 id와 유사한 기능)

화면 리렌더링과 관련이 없는 컴포넌트 로컬 변수를 사용해야 할 떄도 활용할 수있다.

useCallback#

useCallback은 함수를 캐싱(또는 메모이제이션)할 때 사용하는 Hook이다.
컴포넌트의 렌더링 성능을 최적화할 때 활용한다.
두 번째 파라미터 값으로 들어가는 deps(dependencylist)배열이 비어있으면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속 재사용한다
deps에 특정한 값이 있으면 그 값이 바뀔 때마다 함수를 새로 만들어 캐싱한다.
deps는 여러 개의 값을 가질 수 있고 useCallback은 이 값들을 계속 추적하면서 값이 바뀌는지 확인한다.

deps 값이 있으면 값이 바뀔 때만 함수를 새로 만들어서 캐싱
deps 값이 비어 있으면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속해서 재사용

메모이제이션이란?
메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 떄,
이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

useMemo#

useMemo는 컴포넌트 내부에서 발생하는 연산을 최적화할 때 사용되는 Hook이다.
렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다.
useCallback과 마찬가지로 deps 배열이 존재하며 deps 배열 내부의 값이 달라지면 기존 캐싱된 것을 버리고 새로 값을 구하는 방식으로 실행한다.

useMemo와 useCallback
useCallback은 함수 자체를 캐싱하고, useMemo는 값을 캐싱한다. (값이 함수일 수도 있다.)
useMemo와 useCallback 형식이 유사하다.