주니어 프론트엔드 개발자 기술면접 예상질문 - CS(2)

- CORS는 무엇인지, 이를 처리해본 경험이 있나요? 정의, 특징, 해결 방법

다른 출처의 자원에 접근할 때 발생한다. 대개는 프런트 개발 시에 로컬에서 API 서버에 요청을 보낼 때 흔하게 발생한다. 서로 다른 도메인 간에 자원을 공유하는 것을 뜻하고, 출처가 다른 서버의 자원을 요청하면 발생하는 문제이다.

 

- cors를 쓰는 구체적인 이유는?

먼저 CORS의 반대인 SOP는 다른 출처라면 무조건 차단함으로써 막강한 보안을 제공한다.

하지만 다른 출처의 리소스를 사용할 때는 CORS를 써야 한다고 생각한다.

또한 CORS는 출처가 다를 시에 Access-Control-Allow-Origin:{도메인}을 HTTP Header에 추가해야한다.

 

-cors를 구현하려면 어떻게 하는가?

CORS를 구현하기 위해 앞서 요청을 허락하기 위해 Access-Control-Allow-Origin:{도메인}과 같은 내용을 Response 헤더에 추가해주어야 한다.

CORS를 알기 전에 먼저 SOP를 알아야한다. SOP(Same Origin Policy)는 동일 출처 정책으로 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다.

 

- HTTP와 HTTPS의 차이점은?

hyperText Transfer Protocol은 서버와 클라이언트(브라우저)간 데이터를 주고받기위한 프로토콜

https는 http에 데이터 암호화가 추가되어 보안기능이 생긴 것

 

HTTP는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다.

HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 암호화 방식을 이용해 데이터를 암호화한다.

HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화 과정이 필요하기 때문에 HTTP보다 속도가 느리다(그러나 실 사용에서는 크게 차이는 없다.) HTTPS는 인증서를 발급하고 유지하는데에 추가 비용이 발생한다.

개인정보와 같은 민감한 데이터를 주고 받는다면 HTTPS를 이용해야 하지만, 단순 정보 조회 같은 사이트는 HTTP를 적용하면 된다.

 

- undefined, null, undeclared의 비교

먼저 undefined와 null은 둘 다 선언은 되었지만 값의 할당 차이가 있습니다.

우리가 var, let, const로 변수를 선언했을 때 자바스크립트 엔진은 메모리에 변수 공간을 생성하는데

아무런 데이터가 할당이 되지 않았다면

자바스크립트 엔진이 자동으로 undefined를 할당시킵니다.

타입은 undefined로 타입이 결정되지 않은 변수입니다.

 

반면 null은 명시적으로 변수 공간이 비어있음을 의미하고 싶을 때

개발자가 의도적으로 ‘null’이라는 빈 값을 할당하여 사용할 수 있습니다.

이러한 null의 타입은 객체입니다.

 

undeclared는 미선언 변수입니다.

변수가 선언조차 되어있지 않은 상태입니다.

그래서 없는 변수이므로 접근하려고 할 때 오류가 뜹니다.

 

- 자바스크립트의 자료형과 형 변환

자료형 → 두 개로 나뉨 : 원시값, 참조값

1. 원시형 : 하나의 값만 가질 수 있다.

number, string, boolean, undefined, null 항상 깊은 복사(다른 메모리에 할당) 

1. 참조형 : 여러개의 값을 가질 수 있다.

array, object, function 복사할 때 주소를 저장하기 때문에 복사 후 수정을 하면 원본도 변경된다.

객체를 복사하는 방법은 두가지,

얕은복사(객체 주소 복사)와 깊은복사(객체 값 복사)

깊은복사 : 원본과 참조가 완전히 끊김, 서로 전혀 영향 주지 않음 → spread 연산자 쓰면됨

• 형변환

자바스크립트 엔진은 다른 자료형과 연산을 할 때 값은 유지하면서 형은 변환하는 형변환을 한다.

 

- 자바스크립트가 불안전한 언어인 이유는? 유동적인 언어인 이유는?

var같은 경우는 재할당, 재선언도 되고, 함수안에서 말고는 모두 전역변수이기에

예측 불가능한 버그가 생길 수 있다.

또한 자바스크립트 엔진은 다른 타입과 연산을 할 때 자동으로 형변환을 하기 때문에

이 또한 예측 불가능한 버그가 생길 수 있다.

 

- "==" 와 "==="의 차이 (비교연산자)

“==”과 “===”는 둘 다 비교연산자인데 다양한 데이터타입을 비교하는 경우 사용합니다.

 

"=="는 느슨한 비교연산자로, 비교하는 대상의 타입이 다르더라도 타입이 변환된 값이 같다면 true를 리턴합니다.

예를들어 문자10과 숫자10을 비교할 때 문자10을 숫자10으로 반환 후 값을 비교합니다.

 

”==="는 엄격한 비교 연산자로, 동등 연산자보다 엄격하게 비교합니다.

”===" 일치 연산자는 타입을 변환하지 않습니다. 더 엄격하게 타입과 값이 모두 같을 경우에만 true를 리턴한다.

 

- 깊은복사, 얕은복사란?

얕은복사 →객체의 주소값을 복사

깊은복사 → 객체의 실제 값을 복사

 

- forEach와 Map의 차이점은?

두 메소드 다 배열의 모든 요소를 돌면서 해당 요소에 관한 작업을 실행하는데,

forEach : 원본 변경 O, 아무 값도 리턴X

map : 원본 변경 X, 새로운 배열 리턴 ⇒ 결괏값을 새로운 변수에 담아야함! 기존 배열 가공하여 새로운 배열 생성할 때 사용

 

⇒ 상황에 맞게 사용하면 좋을 듯.. 원본 배열을 바꾸고 싶은게 목적이면 forEach, 아예 새로운 배열을 반환하고 싶다면 map!

 

- 라이브러리, 프레임워크의 정의를 간단하게 해본다면?

• 라이브러리

프로그램 개발을 위해 필요한 기능을 모아놓은 코드, 함수들의 집합입니다. 필요할 때만 자유롭게 사용할 수 있는 도구같은 존재입니다. 예시로는 react, 제이쿼리가 있습니다.

• 프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 개발 환경(룰, 매뉴얼, 토대)을 제공해줍니다. 프레임워크를 이용할 땐 프레임워크가 정해놓은 필수적인 코드, 알고리즘 등의 룰을 꼭 지켜야합니다. 예를들어 콜백 함수의 정의는 개발자가 하지만 정해진 알고리즘에 따라 그 콜백함수를 실행하는 건 프레임워크입니다. 앵귤러, vue가 있습니다.

 

→ 이렇게 둘의 가장 큰 차이점은 제어 흐름의 권한입니다.

라이브러리를 사용할 때 개발자는 코드의 흐름을 직접 제어합니다. 개발 시 필요한 기능이 있으면 능동적으로 라이브러리를 설치하여 사용합니다. 프레임워크를 사용할 때 개발자는 프레임워크가 짜 놓은 틀에서 필요한 코드를 작성합니다. 프레임워크가 코드를 연결할 수 있는 위치를 제공해주고 그곳에 개발자가 연결한 코드를 호출합니다.