반응형
반응형
Q. Promise
// Q. Promise 의 기능과 필요한 이유에 대해 설명해주세요.
A. Promise는 비동기 작업시 개발자의 의도대로 결과를 제공 받기 위해 필요합니다.
Promise는 비동기 처리 상태와 처리 결과를 관리하는 객체입니다.
Promise를 사용하면 비동기 처리를 마치 동기 처리 처럼 코드를 순서대로 동작하게 할 수 있습니다.
Promise의 상태 정보로는 비동기 처리 성공(fulfilled) 혹은 실패(rejected)와
비동기 처리를 아직 수행하지 않은 상태(pending)이 있습니다.
promise.prototype.then은 비동기 처리 성공 했을 때 호출되는 콜백 함수이며,
promise.prototype.catch는 비동기 처리 실패 했을 때 호출되는 콜백 함수이고,
promise.prototype.finally는 비동기 처리 성공과 실패와 상관없이 무조건 한 번 호출됩니다.
Q. Side Effect
// Q1. 순수함수란 무엇인가요? (불변성과 side effect와 연결하여 설명해주세요)
A. 순수함수는 부수효과(side effect)가 없는 함수입니다.
부수효과가 없는 함수라 함은 어떤 외부 상태에 의존하지도 않고,
외부 상태를 변경하지도 않는 함수를 의미하며,
언제나 동일한 인수에 대해 동일한 값을 반환하는 함수입니다.
// Q2. 부수 효과(side effect)란 무엇인가요?
A. 함수가 수행해야 하는 본연의 일 이외에 부수적으로 수행하는 일을 의미합니다.
Q. State와 Props
// Q. React의 state와 props에 대해 설명해주세요.
A. state : 컴포넌트의 상태(state)를 의미합니다.
state는 컴포넌트 내에서 변할 수 있는 값입니다.
React에서 제공하는 useState hook을 사용하여 state를 관리할 수 있습니다.
props : 컴포넌트의 속성(property)을 의미합니다.
props는 변하지 않는 외부(부모 컴포넌트)로부터 전달받은 값이며, 객체 형태입니다.
props는 변하지 않는 값이기에 읽기 전용 객체 입니다.(read-only)
Q. 컴포넌트의 key 속성
// Q. React의 component(컴포넌트)의 key 속성에 대해 설명해주세요.
A. 리액트는 컴포넌트의 key 프로퍼티 값이 변하면 새로운 요소로 인식합니다.
즉, 리액트는 key 프로퍼티 값을 기준으로 각 컴포넌트들을 인식합니다.
따라서 컴포넌트의 key 프로퍼티 값을 state 로 주게되면 상태변화를 통해 여러개의 컴포넌트가 있는 것 같은 효과를 줄 수 있습니다.
대표적으로 Motion UI 에서 key 값을 state 로 주고 Slider 를 구현합니다.
Q. useEffect의 dependency array
// Q. useEffect의 dependency array에 대해 설명해주세요.
A. useEffect 는 dependency array의 요소에 해당하는 상태(state)가 변경 될 때마다 실행됩니다.
dependency array에 상태(state)가 입력되어 있는 경우([state])에는 첫 렌더링과 해당 상태(state)가 변경 될 때에만 실행됩니다.
dependency array가 빈 배열인([]) 경우에는 해당 컴포넌트 첫 렌더링 시에만 실행됩니다.
dependency array가 아예 없는 경우()는 모든 상태(state)가 변경 될 때(= 렌더링 될 때마다) 실행됩니다.Q. CSR과 SSR의 차이점
// Q. CSR과 SSR의 차이점에 대해 설명해주세요.
A. CSR과 SSR의 차이점은 페이지가 렌더링되는 '위치'입니다.
일반적으로 CSR과 SSR은 반대입니다.
SSR(Server Side Rendering)는 서버에서 렌더링하고,
SEO(Search Engine Optimization)와 웹 페이지 첫 화면 렌더링 속도가 빠릅니다.
CSR(Client Side Rendering)는 클라이언트에서 렌더링하고,
SSR에 비해 월등한 사용자와 상호작용을 제공할 수 있습니다.
따라서 요즘은 상황에 따라 SSR 과 CSR 을 합쳐서 각각의 장점을 취하는 것이 트렌드입니다.
Q. GET 메서드와 POST 메서드의 차이점
// Q1. GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
A. HTTP 요청 메서드로는 GET, POST 이외에 PUT, PATCH, DELETE, OPTIONS가 있습니다.
GET은 리소스를 가져오며, 페이로드가 없습니다.
POST는 리소스를 생성하며, 페이로드의 MIME 타입을 지정해야 합니다.
// Q2. REST API 설계 원칙에 대해 설명해주세요.
A. 1) URI는 리소스를 표현해야합니다.
리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용하여야 합니다.
2) 리소스에 대한 행위는 HTTP 요청 메서드로 표현해야합니다.
HTTP 요청 메서드로는 GET, POST, PUT, PATCH, DELETE, OPTIONS가 있습니다.
// Q3. 로그인 할 때 GET과 POST 중 무엇을 사용하나요?
A. GET은 URL을 통해 모든 데이터를 전달하기 때문에 전달되는 값이 모두 URL에 노출되고,
POST는 HTTP body에 전송데이터를 담아서 전달하여 데이터 노출이 없고, 이것을 HTTPS를 적용하면 암호화가 되기 때문에
보안성 문제로 GET보다는 POST를 사용합니다.
Q. HTTP 메세지 구조
// Q. HTTP 메세지 구조에 대해 설명해주세요.
A. HTTP 메세지는 크게 '요청'과 '응답'으로 나뉩니다.
'요청'과 '응답' 각각 Start Line / Status Line을 시작으로 Header 와 Body 로 이루어져 있습니다.
Start Line (head) : 1) HTTP 메서드 2) 요청 대상 3) 프로토콜 버전을 포함합니다.
Status Line : 1) 프로토콜 버전 2) 상태 코드 3) 상태 텍스트를 포함합니다.
Header (head) : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.
Body (payload) : 모든 요청에 Body가 필요하지 않으며 데이터 정보를 나타냅니다.
Q. CORS와 SOP 설명
// Q1. SOP(Same-Origin-Policy)와 CORS에 대해 설명해주세요.
A. SOP(Same-Origin-Policy)는 '동일 출처 정책'을 뜻합니다.
같은 출처의 리소스만 공유가 가능한 정책입니다.
CORS(Cross-Origin Resource Sharing)는 '교차 출처 리소스 공유'를 뜻합니다.
즉, 특정 외부 출처에게 특정 리소스에 접근할 수 있는 권한을 부여해줍니다.
서버의 응답 헤더 아래에 조건들을 부여하여 접근 권한을 부여해 줄 수 있고,
조건을 만족하지 못하면 CORS 에러가 발생합니다.
// 서버 요청을 보낼 수 있는 곳 지정
'Access-Control-Allow-Origin': '*',
// 리소스 접근을 허용하는 HTTP 메서드를 지정
'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
// 요청을 허용하는 헤더 지정
'Access-Control-Allow-Headers': 'Content-Type, Accept',
// 클라이언트에서 preflight의 요청 결과를 저장할 기간을 지정 (= 헤더에 캐시될 시간)
'Access-Control-Max-Age': 10,
// 클라이언트 요청이 쿠키를 통해 자격 증명을 해야 하는 경우 true
'Access-Control-Allow-Credentials': true,
// 브라우저 측에서 접근할 수 있게 허용해주는 헤더 지정
'Access-Control-Expose-Headers': 'Content-Length'
// Q2. 출처(Policy)에 대해 설명해주세요.
A. '출처'란 프로토콜(protocol), 호스트(host), 포트(port)로 이루어져있습니다.
느낀점
여러가지 기술면접 준비를 해보았습니다.
그룹원분들과 실제 면접 연습을 했을 때
'GET메서드와 POST 메서드의 차이'에 대해 답변을 하였습니다.
꼬리 질문으로 '로그인 할 때 GET과 POST중 무엇을 사용하나요?' 에서
저는 데이터를 가져와서 유저가 입력한 값과 비교해야되니 GET을 사용해야 한다고 말했지만
보안상 이유로 POST를 사용한다는 것에 놀랬고, 또 새로운 사실을 알게 되어서 좋았습니다.
다른 질문들도 꼬리질문을 받아 답변해보는 시간을 가졌으면 좋았겠지만, 시간상 되지 않아 아쉬웠습니다. 😭
기술 면접 준비(2)을 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
