기술 면접 준비

이유정·2022년 10월 19일

Section2회고 section_2

코드스테이츠 TIL

목록 보기

34/62

JavaScript

Q1.

Promise의 기능과 필요한 이유에 대해서 설명해주세요.

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.
자바스크립트 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것입니다.
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. (API) API가 실행되면 서버에다가 데이터 요청을 보내는데, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈화면이 뜹니다. 이를 해결하기 위한 방법 중 하나가 프로미스입니다.

Q2.

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

순수함수는 함수형 프로그래밍에서 자주 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 따라서 순수함수는 사이드 이펙트를 일으키지 않는다고 할 수 있습니다. side effect는 외부 변수를 참조하거나, 변경하는 모든 종료의 코드를 말한다.(외부 세계에서 관찰할 수 있는 시스템의 모든 변경을 말한다.) 즉, 순수함수는 함수 body내에 있는 코드만 점검하면 됩니다.
자바스크립트 순수함수는 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 전달인자로 참조자료형이 전달되는 경우, 해당 객체 자체를 바꿔서 side effect를 만들 수 있고, 이는 해당 데이터의 불변성을 손상시킬 수 있다. 그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce 등이 각광을 받게 되었다.
순수함수는 외부상태와 완전히 독립적이므로 공유가능한 변경 상태화 관련된 버그의 전체 클래스에 영향을 받지 않는다. 또한 독립적인 특성으로 인해 많은 CPU 및 전체 분산 컴퓨팅 클러스터에서 병렬처리를 수행할 수 있는 훌륭한 후보가 되므로 많은 과학 및 리소스 집약적 컴퓨팅 작업에 필수적이다.
순수함수는 코드에서 쉽게 이동하고, 리팩토링하고, 재구성하기가 매우 독립적이므로 프로그램을 보다 유연하고 향후 변경에 적용할 수 있다.
JS 에는 API, I/O, 이벤트 리스너, 웹 워커, IFRAME 및 시간초과는 모두 프로그램에 불확실성을 유발할 수 있다. 이것이 공유 상태와 결합하면 버그를 만들어 낼 수 있다. 순수함수를 사용하면 이러한 버그를 피할 수 있다.

React

Q3-1.

컴포넌트에 대해 설명하시오.
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.
컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.

class Welcome extends React.Component{
   render() {
   	  return <h1>Hello</h1>;
   }
}

클래스 컴포넌트는 이미 구현되어 있는 react.component를 상속 받는 것으로 기본 형태를 갖춘다.
컴포넌트는 jsx를 반환해야 하는데, 클래스는 return문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 jsx를 반환하기 위해 render() 함수를 사용한다. 리액트는 클래스형 컴포넌트의 render()함수를 자동으로 실행시킨다.

function Welcome(props){
	return <h1>Hello</h1>
}

함수형 컴포넌트는, props로 받을 객체 인자를 정의하고, jsx를 반환하는 것으로 기본 형태를 갖춘다.
함수형 컴포넌트에서는 return 문에서 jsx를 반환할 수 있다.

Q3-2.

React의 state와 props에 대해서 설명해주세요.

props란?

컴포넌트는, 데이터를 가진 하나의 'props' 객체 인자를 받은 후 react 엘리먼트를 반환한다.
props는 컴포넌트에서 컴포넌트로 전달하는 데이터다.
props에는 불리언 값, 숫자, 배열과 같은 다양한 형태의 데이터를 다믈 수 있다. 공백으로 여러개를 담는 것도 가능하다.
props 에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({})로 감싸야 한다.
props는 읽기 전용이므로 컴포넌트의 내부에서 props를 수정해서는 안된다. 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며, 모든 react 컴포넌트는 자신의 props를 다룰 때, 순수 함수처럼 동작해야 한다.

Q4.

React 컴포넌트의 key 속성에 대해서 설명해주세요.

Q5.

useEffect의 dependency array에 대해서 설명해주세요.

HTTP/네트워크

Q6.

CSR과 SSR의 차이점에 대해서 설명해주세요.
SSR : server side rendering
CSR : client side rengering
1) SSR
2)

Q7.

GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.

웹서버 기초

Q8.

HTTP 메세지 구조에 대해 설명해주세요.
start-line 과 HTTP headers 와 empty line 그리고 body로 이뤄져 있다.

http request 메시지 구조
1) start-line

http 메소드
: 요청의 의도를 담고 있는 get, post, put, delete 가 있다. get은 존재하는 자원에 대한 요청, post는 새로운 자원을 생성, put은 존재하는 자원에 대한 변경, delete는 존재하는 자원에 대한 삭제와 같은 기능을 가지고 있다.
request target
: http request가 전송되는 목표 주소다.
http version
: request 메시지 구조나 데이터가 다를 수 있어서 version을 명시한다.

2) HTTP header
: heaer에는 http request 그 자체에 대한 정보를 담고 있다. key: value 형태로 이루어져 있다. 이 헤더의 경우 request, response에만 있는 header외에 공통 header도 있지만 먼저 request header에 있는 정보부터 다뤄보자.

host : 요청하려는 서버 호스트 이름과 포트 번호
user-agent : 클라이언트 프로그램 정보,
referer : 바로 직전에 머물렀던 웹 링크 주소
accept : 클라이언트가 처리 가능한 미디어 타입 종류 나열
if-modified-since : 여기에 쓰여진 시간 이후로 변경된 리소스. 페이지가 수정되었으면 최신 페이지로 교체
authorization: 인증 토큰을 서버로 보낼 때 쓰임
origin: 서버로 post 요청을 보낼때 요청이 어느 주소에 시작되었는지 나타내는 값. 이 값으로 요청을 보낸 주소와 받는 주소가 다르면 cors에러가 발생한다.
cookie : 쿠키 값이 key-value로 표현된다.

3) empty line

4) Body
: http request가 전송하는 데이터를 담고 있는 부분이다. 전송하는 데이터가 없다면 body 부분은 비어있다. 보통 post 요청일 경우에 html 폼 데이터가 포함되어 있다.

http response 메시지 구조
1) start line
: http version, status code, status text가 있다.

status code는 response 상태를 나타내는 코드다. 요청 정상 처리를 나타내는 200이나 페이지가 이동되거나 없어졌을 때를 나타내는 404 와 같은 코드가 있다.
status text는 response 상태를 간략하게 글로 설명해준다.
2) header
location : 301,302 상태코드일 때만 볼 수 있는 헤더로 서버의 응답이 다른 곳에 있다고 알려주면서 해당위치를 지정합니다.
server : 웹 서버의 종류
age : max-age 시간내에서 얼마나 흘렀는지 초 단위로 알려주는 값
referrer-plicy : 서버 referrer 정책을 알려주는 값
www-authenticate : 사용자 인증이 필요한 자원을 요구할시, 서버가 제공하는 인증 방식
proxy-authenticate : 요청한 서버가 프록시 서버인 경우 유저 인증을 위한 값
3) body
: http request 메시지의 body와 동일하다.

http란?

hypertext transfer protocol
웹 브라우저와 웹 서버의 소통을 위한 것

클라이언트- 서버 모델이란?

클라이언트가 http messages양식에 맞춰 요청을 보내면, 서버도 http messages 양식에 맞춰 응답한다.

http의 특징

무상태성 (http는 특정 상태를 유지하지 않는다.)
비 연결성(http는 실제로 요청을 주고 받을 때만 연결을 유지하고 응답을 주고나면 서버와의 연결을 끊는다.)

Q9.

Same-Origin Policy와 CORS에 대해서 설명해주세요.
SOP는 동일 출처 정책으로, 같은 출처의 리소스만 공유가 가능합니다. (이때, 같은 출처란, 프로토콜, 호스트, 포트가 모두 같은 경우를 뜻합니다./ 타 사이트 와의 리소스 공유를 제한해, 로그인 정보등이 타 사이트 코드에 의해 새어나가는 것을 방지) 이러한 정책으로 CORS에러가 뜨는 것을 볼 수 있는데요, 이를 해결하기 위해 CORS가 존재합니다.CORS란 CROSS ORIGIN RESOURCE SHARING으로 교차 출처 리소스 공유라는 뜻입니다. 이는 추가 HTTP 헤더를 사용해서 , 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한 즉, ACCESS-CONTROL-ALLOW-ORIGIN을 부여하도록 브라우저에 알려주는 체계입니다.