1. promise 기능과 필요한 이유
자바스크립트 비동기 처리에 사용되는 객체이다.
콜백함수로 모든 처리를 하면 코드가 난잡하기 때문에 프로미스를 사용한다.
필요한 이유는 서버에서 받아온 데이터를 화면에 표시하기 위해 사용한다.
pending(대기): fulfilled(이행)도 rejected(거절)도 안된 초기 상태
fulfilled(이행): 비동기 연산이 성공적으로 완료된 상태, 결과값을 반환한다.
rejected(실패): 비동기 연산에 실패한 상태, 에러를 반환한다.
2. 순수함수란? 불변성과 사이드 이펙트와 연결하여 설명
어떤 함수에 동일한 인자를 주었을때 항상 같은 값을 리턴하는 함수를 순수함수라고 한다.
외부 변수를 참조하거나, 변경하는 사이드 이펙트가 없어야한다.
또한 순수함수를 제작하기 위해선 데이터의 불변성을 유지하는것이 중요하다.
함수의 전달인자로 참조 자료형이 전달되는 경우, 데이터의 불변성을 손상시킬수도 있다.
그래서 map, filter, reduce를 쓴다.
3. state와 props
state는 컴포넌트 내부에서 선언하고, 내에서 변할 수 있는 값이다.
this.setState, useState 호출시 배열 반환 -> [저장변수, 갱신함수]
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 값을 의미한다.함부로 변경될 수 없는 읽기 전용 객체이다.
하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 된다.
Props Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 React Comoinnt트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.
4. react 컴포넌트 key속성?
key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
5. useEffect의 dependency array?
useEffect의 동작원리 중 두 번째 파라미터로 입력된 dependency array의 각 element가 변경되었을때 랜더링된다.
[] 한번, 변수-> 변수가 바뀔때마다 렌더링한다.
6. csr, ssr차이
csr은 렌더링이 클라이언트에서 일어난다. 서버는 요청을 받으면 클라이언트에서 html과 js를 보내주고, 클라이언트는 그것을 받아 랜더링을 시작한다.
ssr은 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달한다.
csr은 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아오기 때문에 더 빠르다.
반면 ssr은 첫 페이지를 로딩한 과정을 다시 실행한다.
7. get메서드와 post의 차이
get은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드이다.
get요청은 캐시가 가능하다. 또한 길이 제한이 있고, 중요한 정보를 다루면 안된다.(파라미터에 노출될 가능성 존재)
post는 클라이언트에서 서버로 리소스를 생성하거나 업데이트 하기 위해 데이터를 보낼 때 사용되는 메서드이다.
post요청은 캐시되지 않는다. 데이터 길이에 제한이 없고, 브라우저 히스토리에 남지 않는다.
8. http메세지 구조
요청(requests)와 응답(responses)가 있다
start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부릅니다.
HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.
empty line : 헤더와 본문을 구분하는 빈 줄이 있습니다.
body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용합니다.
9. same-origin policy와 cors
동일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이고, 외부 공격을 줄여준다.
동일 출처 정책은 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 ajax 요청을 주고 받을 수 있도록 한 정책이다.
즉, 출처가 다른 도메인에서의 AJAX요청이라도 서버 단에서 데이터 접근 권한을 허용하는 정책이다.
