기술면접질문 정리

🌟 질문리스트

1. HTTP의 정의와, 두 가지 특성에 대해 설명하시오

2. HTTPS의 인증서는 어떻게 보안을 하는지

3. 세션과 토큰의 장단점

4. var, let, const 차이점

5. 자주 사용하는 es6문법에 대해 설명하시오

6. async await이 발전한 순서

7. promise는 무엇이고, 세 가지 상태가 어떤건지

8. REST API란 무엇인가

9. this의 정의

10. react에서 function 과 class conponent의 차이

11. react에서 사용해본 hook에 대해 설명하시오

12. cors란 무엇인가

13. 서버랑 클라이언트랑 구분되어 있는 이유

14. 객체지향프로그래밍 vs 함수형 프로그래밍의 차이

---

1번 대답

HTTP는 서버와 클라이언트 간에 데이터를 주고받기 위한 통신규약이다.
비연결성과 무상태성이라는 특성이 있다.
비연결성은 서버와 클라이언트가 응답을 주고받는 순간에만 서로를 인식하고 있고, 응답이 끝난 후에는 서로를 기억하지 못하는 특성이다.
무상태성은 비연결성과 관련이 있는데, 웹페이지에서 어떤 요청과 응답을 해도 해당 정보가 유지되지 않는 특성이다.

2번 대답

HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜(통신규약)이다.
공개키/개인키 암호화 방식을 이용해 데이터를 암호화하고 있다.
공개키와 개인키는 서로를 위한 1쌍의 키이다.
공개키는 모두에게 공개가능한 키이고, 개인키는 나만 알고 있어야 하는 키이다.
CA : certificate authority ( 인증서 발급기관 )

동작원리는
1.개발회사는 어플리케이션에 HTTPS를 적용하기 위해 CA에게 인증서를 발급받아서,
2.개인키로 암호화를 해서 브라우저에 데이터를 보낸다.
3.그럼 브라우저는 이미 인증서를 발급한 회사의 공개키를 가지고 있어서 복호화를 할 수 있다. (이 과정을 위해 금액을 지불한다.)
4.그리고 공개키로 암호화를 해서 어플리케이션에 데이터를 보내면 개인키로 다시 복호화한다.
때문에 제 3자가 중간에서 탈취해도 암호화가 되어있어서 정보가 유출되지 않는다.

3번 대답

• 세션
  웹브라우저 접속부터 창을 종료할 때까지 유지된다.
  (express-session 라이브러리를 이용하여, 유저 아이디가 담긴 세션을 암호화 한 후 쿠키에 담아 전송했었다.)
  장점 :
  신뢰할 수 있는 유저인지 서버에서 추가로 확인가능
  각 클라이언트에게 고유 ID를 부여하여, 정확하게 구분함
  민감한 정보는 서버에서 관리해서 쿠키보다 안전함
  단점 :
  세션을 서버에 저장해서 사용자가 많을 경우, 메모리 소모 크다.
  하나의 서버에서만 접속상태를 가지므로 분산에 불리

• 토큰
  장점 : 서버의 부담을 덜어줌. 여러개의 서버를 운영할 때 유용.
  단점 : 토큰이 탈취될 가능성이 있다 (만료시간을 둬서 보완)

4번 대답

var은 function 단위.
let, const는 block 단위다.
let은 변수, const는 상수.

var는 다시 재선언해서 할당해도 에러가 뜨지않고 값이 전부 뜬다.
코드량이 많아지는 경우 어디서 값이 바뀌는지 찾을 수 없다.
이를 보완하기 위해 ES6문법으로 let, const가 나왔다.
let은 재선언이 불가하지만 재할당은 가능하다.
const는 재선언도 불가하고 재할당도 불가하다.

기본적으로 const를 우선으로 사용하고, 재할당 필요성이 있는 경우 let을 쓰면된다.

5번 대답

1. let, const : 선언할 때 쓴다.
2. 백틱, 템플릿리터럴 : 기존 + 변수 + '' 보다 가독성이 좋다.
3. async await : 비동기처리할때 자주 쓴다.
4. 구조분해할당 : API 서버를 구축할 때 요청값을 받기위해 주로 쓴다.
5. 삼항연산자 : if문을 간단하게 쓸 수 있는 문법이다.
6. 화살표함수 : 함수를 간단하게 쓸 수 있는 문법이다.
7. Spread(...) 연산자 : 배열의 원본을 건들지 않고 복사하는 방법.
   배열을 펼치거나 합칠 때 유용하다.

6번 대답

콜백함수 -> promise -> async await

• 콜백함수
  콜백이 많으면 가독성이 떨어짐 (콜백지옥). 코드관리가 어렵다.
• promise, .then, .catch
  then은 resolve의 값을 받고,
  catch는 reject의 값을 받는다.
  promise도 많아지면 .then 지옥이 되서 chaining로 작성.
• async await
  비동기인데 표현을 동기적으로 쓸 수 있어서 가독성이 좋음.
  (promise 기반임)

7번 대답

비동기 작업의 결과를 알려주는 객체.
프로미스에는 3가지 상태가 있다. 1. 대기(pending) 2. 이행(fulfilled) 3. 거부(rejected)
프로미스의 인자는 실행함수이다.
return new Promise (resolve, reject) ⇒ {}

8번 대답

(Representational State Transfer)HTTP 통신에서 자원에 대한 CURD 요청을 resource, method 로 하는 방식. 자원의 내용은 JSON, XML 등 다양한 언어로 표기가능.
(메소드 : GET, POST, PUT, PATCH, DELETE)
장점:
HTTP 표준에만 따르면 모든 플랫폼에서 사용가능.
메세지를 읽는 것만으로 메세지 의도 알수있음
서버와 클라 역할이 분명하게 분리되어 있어서 의존성이 줄어들고 개발해야 할 내용 명확
단점:
메소드 형태가 제한적

9번 대답

함수 실행 시 호출 방법에 의해 결정되는 특별한 객체
1. 메소드 호출할 때, 온점 왼쪽에 있는 객체
2. new 키워드 이용할 때 새롭게 생성된 인스턴스 객체
3. call, apply 호출할 때 첫번째 인자로 전달된 객체

화살표함수와 this 같이 쓰지 않기! (this 가 제대로 작동을 안함)

10번 대답

React Hook 은 클래스 컴포넌트를 사용하지 않고,
함수 컴포넌트 내에서 상태를 쓸 수 있는 새로운 기능이다.

• class
  render 함수가 꼭 필요하다.
  state를 constructor 메소드에서 초기값을 설정해줘야 한다.
• function
  state를 사용하지 않고, 훅을 활용하여 단순하게 데이터를 이용할 수 있다.
  훅은 11번 대답에 정리되어 있다.

11번 대답

• useState
  const [count, setCount] = useState(0) 로 정의한다.
  setCount(count + 1) 방식으로 상태를 업데이트할 수 있다.

• useEffect
  주로 side effect를 실행시킬 때 사용한다.
  두번째 인자가 변경될 때만 작동한다.
  빈 배열을 넣으면, componentDidMount처럼 1회만 작동한다.

12번 대답

CORS(cross origin resource sharing). 다른 오리진 간에 리소스를 공유하는 것이다.
같은 오리진끼리 요청하고 응답하는 것은 상관없지만, 오리진이 다르면 해당 정책을 따르게 된다.
브라우저 보안 목적이다.

보통 클라이언트와 서버가 요청과 응답을 주고받을 때 일어난다.
Express 기반의 서버면 cors 모듈을 활용하여, 서버로 요청하는 클라이언트의 오리진을 설정하여 응답을 해줄 수 있다.

13번 대답

하는 역할 다르다.
클라이언트는 필요한 데이터를 요청하는 역할을 하고,
서버는 클라이언트의 요청을 받아 데이터베이스와 통신하여 필요한 데이터를 내보낸다.

무언가를 구분한다는 것은 중요하다고 생각한다. 시간이 많이 흐르고 다시 되돌아봤을 때 잘 정리된 컨텐츠들은 쉽게 파악이 가능하다. 하지만 구분되어 있지 못하고 혼재된 컨텐츠들은 활용하기가 어렵다. 정리부터 해야하기 때문이다.

14번 대답

객체지향형 프로그래밍

객체지향프로그래밍이란 객체를 이용해서 프로그래밍을 하자는 하나의 방법론이다.
필요한 데이터를 추상화시켜 상태와 기능을 지닌 객체로 만들고 이들을 상호유기적으로 연결시키는 프로그래밍이다.

• 클래스와 인스턴스 : 클래스는 집단에 속하는 속성과 행위를 변수와 메소드로 정리한 것이고, 인스턴스는 클래스를 기반으로 실제 프로그램에서 사용되는 데이터이다.
• 캡슐화 : 기능과 특성의 모음을 클래스라는 캡슐에 넣는 것이다.
• 상속 : 클래스간에 종속관계를 형성해, 객체를 조직화할 수 있다.
• 다형화 : 한 요소에 여러 개념을 넣어놓는 것으로
  오버라이딩(같은이름의 메소드가 여러 클래스에서 다른 기능을 하는것)이나 오버로딩(같은이름의 메소드가 인자의 개수나 자료형에 따라 다른 기능을 하는것)을 의미한다.
• 추상화 : 공통의 속성이나 기능을 묶어 이름을 붙인다.

장점은 코드 재사용이 용이하고, 유지보수가 쉽다. 큰 프로젝트에 적합하다.

함수지향형 프로그래밍

함수형 프로그래밍이란 거의 모든 것을 순수 함수로 나누어 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하는 프로그래밍이다.
가변데이터와 사이드이펙트를 배제하려고 노력한다.
자바스크립트 세계에서 함수는 일급객체(first-class citizen)다.

• 순수함수 : 같은 입력값은 같은 출력을 반환한다. 사이트 이펙트가 없다.
• 일급객체 :
  변수에 할당할 수 있다.
  다른 함수의 인자로 전달될 수 있다.
  다른 함수의 결과로서 리턴될 수 있다.
• 고차 함수 :
  함수를 인자로 받거나 함수를 리턴하는 함수를 말한다.
  다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다.

---

참고자료

블로그 / HTTP와 HTTPS 및 차이점

var, let, const 차이점

ES6 문법 빠르게 정리

[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

객체 지향 프로그래밍이 뭔가요?

위키백과/함수형 프로그래밍

잘못되거나 업데이트해야 할 부분이 있으면 댓글로 알려주세요!
피드백에 열려있습니다 :)