질문 고르기
JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.- 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
React
- React의 state와 props에 대해서 설명해주세요.
- React 컴포넌트의 key 속성에 대해서 설명해주세요.
- useEffect의 dependency array에 대해서 설명해주세요.
HTTP/네트워크
- CSR과 SSR의 차이점에 대해서 설명해주세요.
- GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
웹서버 기초
- HTTP 메세지 구조에 대해 설명해주세요.
- Same-Origin Policy와 CORS에 대해서 설명해주세요.
답변 작성하기
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
자바스크립트 비동기 처리에 사용되는 객체로,
비동기처리는 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말합니다.
비동기 처리의 단점을 보완하여 동기적으로 처리할수있게 도와줍니다.
비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다.
(자바스크립트의 비동기처리가 뭔데?
특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말함), (요청 후 정상처리 되기도 전에 화면에 빈 데이터를 표시하는 상태)
프로미스가 필요한 이유는,
fetch등으로 서버에서 데이터를 요청하고 받아온 뒤 처리하기 위해 필요합니다.
Es6이전에 callback이 있었습니다.
promise, callback차이점을 설명드리겠습니다.
callback함수는 함수안에서만 결과값처리와 결과값을 알수있지만
promise는 비동기 로직에서 처리된 결과값이 promise객체에 저장되기 때문에 로직 밖에서도 사용 가능함
callback함수는 함수 내부에서 계속해서 연달아 호출하므로 가독성이 떨어지지만
promise함수는 promiseAPI를 사용해 가독성을 높여준다
또한 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있고,
연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연합니다.
또한 비동기 작업 상태를 쉽게 확인할 수 있으며, 코드의 유지 보수성이 증가합니다.
프로미스 3가지 상태 설명해주세요
pending : 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태
fulfilled : 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
rejected : 실패 - 비동기 처리가 실패하거나 오류가 발생한 상태
콜백함수방식?
callback함수는 다른 함수의 인수로 넘겨줌으로써(두번째 인자로 콜백을 넣음) 실행이 가능한 코드를 말한다.callback을 반복적으로 실행시키기 때문에 코드의 양이 길어지고 비교적 가독성이 떨어진다.
promise, callback차이점?
callback함수는 함수안에서만 결과값처리와 결과값을 알수있지만
promise는 비동기 로직에서 처리된 결과값이 promise객체에 저장되기 때문에 로직 밖에서도 사용 가능함
callback함수는 함수 내부에서 계속해서 연달아 호출하므로 가독성이 떨어지지만
promise함수는 promiseAPI를 사용해 가독성을 높여준다
또한 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있고,
연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연합니다.
또한 비동기 작업 상태를 쉽게 확인할 수 있으며, 코드의 유지 보수성이 증가합니다.
자바스크립트는 ES6이전 비동기 처리를 위해 콜백함수를 사용합니다. 하지만 콜백을 너무 남용하게 되면 콜백 지옥에 빠질 수가 있습니다.
또한 에러처리도 힘들 뿐더러 여러 개의 비동기 처리를 한번에 하는데 한계가 있습니다.
프로미스는 이러한 전통적인 콜백 패턴이 가진 단점을 보완하며
비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있고,
연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연합니다.
또한 비동기 작업 상태를 쉽게 확인할 수 있으며, 코드의 유지 보수성이 증가합니다.
(Promise는 비동기 처리가 성공(fulfilled) 또는 실패(rejected) 등의 상태 정보를 갖게됩니다.
resolve 함수가 호출 된경우 성공된 상태이고, reject 함수가 호출 된 경우 실패 상태이게 됩니다.
ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다.)
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수 함수는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수입니다.
사이드이펙트가 없는 함수로, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수이자, 외부의 상태를 변경하지 않는 함수입니다.
사이드 이펙트란, 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.
함수의 전달인자로 참조 자료형이 전달되는 경우, 의도치 않게 해당 객체 자체를 바꾸는 사이드 이펙트를 만들수도 있고, 이는 해당 데이터의 불변성을 손상시킵니다. 그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce등을 많이 씁니다.
순수함수의 개념은 왜 중요한가요?
사이드 이펙트를 줄이고 모듈화 수준을 높이는 프로그래밍 패러다임인 '함수형프로그래밍'에서 순수함수는 평가 시점이 무관하다는 특징 때문에 효율적인 로직을 구성할 수 있습니다.
(부수 효과 = 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것)
함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다.
부수 효과가 없는 순수 함수를 1급 객체로 간주하여 파라미터나 반환값으로 사용할 수 있으며, 참조 투명성을 지킬 수 있다.
- 일급 객체 : 변수나 데이터에 할당 가능, 인자로 넘기기 가능, 리턴값으로 리턴하기 가능
- 일급 함수 : 함수가 다른 일급 객체와 동일하게 다루어 질때, 일급 함수라고 지칭한다
React의 state와 props에 대해서 설명해주세요.
React에서 state는 변할 수 있는 데이터 상태를 의미합니다.
어플리케이션의 작동 구조를 봤을때, 변할 수 있는 값이면 React의 state를 사용하는 것이 적절합니다. 예를 들어, Socisl Media에서 게시글을 입력하는 input의 value는 사용자가 값을 입력 할때마다 변경할 수 있는 값이기 때문에 state로 적절합니다. state는 값을 바꾸는 순간 렌더링을 일으키기 때문에 편리함이 있지만, 모든 데이터를 stste로 만드는 것은 resource면에서 오히려 비효율적이기 때문에, 어플리케이션을 만들기 전에 어떤 것을 state로 만들 것인지 고민하는 작업이 선행되어야 합니다.
(데이터 흐름이 단방향인 리액트에서)
리엑트에서 props는 상위 컴포넌트에서 하위 컴포넌트로 정보를 전달하는 방법입니다.
props는 오직 외부에서 전달받는 값이기 때문에 컴포넌트 내에서 변경할 수 없습니다. 그래서 React는 하위컴포넌트에서 state를 변경해야 할 때, 상위 컴포넌트로부터 state변경 함수를 속성으로 받아 함수를 실행시키고, 상위 컴포넌트에 속한 state를 변경시키고 다시 변경된 상태값을 props로 받아 side effect를 최소화 시킵니다.
React 컴포넌트의 key 속성에 대해서 설명해주세요.
(Component란?
컴포넌트란 하나의 기능 구현을 위한 코드 묶음입니다. 각자 독립된 컴포넌트를 만들고 이러한 컴포넌트들을 여러개 만들고 조합해 어플리케이션을 만들 수 있습니다. 이러한 컴포넌트 기반의 개발은 가독성이 좋을 뿐 아니라 코드 유지 및 보수를 용이하게 합니다.)
Component의 key 속성?
map 메소드 등을 사용하여 컴포넌트 배열을 렌더링 할 경우, 리액트에서는 각 컴포넌트마다 고유한 key값을 가질 것을 요구합니다. 렌더링 할 때 마다 각 원소에 어떤 변화가 일어났는지 효율적으로 감지할 수 있도록 하기 위함입니다.
key에는 당 원소만이 가지는 고유한 값을 넣어주어야 합니다.
때에 따라서 인덱스 값을 넣어줄 수 있습니다. Math.random()을 통해 생성하는 키 값은 중복값을 가질 수 있고 semantic하지 않기 때문에 지양합니다.
useEffect의 dependency array에 대해서 설명해주세요.
useEffect란?
useEffect란 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook입니다.
(사이드 이펙트란, 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.)
uesEffect는 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 배열을 받는데 이 배열을 dependency array 종속성배열이라고 부릅니다.
dependency array란?
useEffect는
(컴포넌트 생성 후 처음 화면에 렌더링되고
컴포넌트에 새로운 props가 전달되며 렌더링되고
컴포넌트에 상태가 바뀌며 렌더링되는데,)
화면에 첫 렌더링될 때, 그리고 종속성 배열의 value값이 바뀔 때마다 실행됩니다.
따라서 모든 state가 아닌 특정 state에 관해 Side effect를 실행시킬 수 있습니다.
만약 종속성배열로 빈 배열이 전달된다면, useEffect는 첫 렌더링 될때만 실행됩니다.
빈배열이 아닌 아무것도 넣지 않는다면, 렌더링될때마다 useEffect가 실행됩니다.
Hook을 쓸 때 주의 할점
- 최상위에서만 Hook을 호출합니다.
- React 함수 내에서 Hook을 호출합니다
CSR과 SSR의 차이점에 대해서 설명해주세요.
CSR과 SSR의 차이점?
(client side rendering) (server side rendering)
SSR과 CSR의 가장 큰 차이점은, 페이지가 렌더링 되는 위치입니다.
SSR은 서버에서 페이지를 렌더링하고, CSR은 클라이언드에서 페이지를 렌더링합니다.
또한 웹 페이지를 로딩하는 시간에 따라 주요 차이점이 있습니다.
첫 페이지 로딩시간은 SSR이 더 빠르고, 이후 나머지 로딩 시간은 CSR이 빠릅니다. CSR의 경우 모든 스크립트를 한번에 불러오기 때문에 처음 로딩시간이 길지만 이후 로딩시간이 빠르고, SSR의 경우에는 모든 요청에 대해 첫 페이지를 로딩한 과정을 정확하게 다시 실행하기 때문에 더 느립니다.
따라서 SSR은 초기 로딩이 빠르고 SEO(검색 엔진 최적화)가 중요한 서비스에 권장되고,
CSR은 상호작용이 많은 서비스에 권장됩니다.
(처음에는 HTML이 비어있어 SEO문제가 발생하게 된다.쿠키나 localstorage에서 사용자 정보를 저장해야 되기때문에 XSS공격에 취약하다.
XSS(Cross-Site Scripting)웹 애플리케이션에서 일어나는 취약점으로 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법)
https://velog.io/@solimlee/기술문제-면접CSR과-SSR의-개념적-차이와-동작-방식을-구분하여-설명해주세요
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
둘다 브라우저가 서버에 요청하는 메서드지만,
GET메서드는 서버에서 데이터를 조회할 때 쓸 수 있는 메서드 입니다.
POST 메서드는 서버에서 데이터를 추가할 때 사용하는 메서드 입니다.
또한 GET요청에는 url에 쿼리 파라미터나 path 파라미터를 이용해 필요한 정보를 전달하고,HTTP 메시지에 body가 없다.
POST 요청에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다.
마지막으로 GET 요청은 멱등이며, POST는 멱등이 아닙니다.
GET은 리소스를 조회한다는 점에서 여러 번 요청하더라도 응답이 똑같을 것이므로 멱등성을 가지고반대로 POST는 리소스를 새로 생성하거나 업데이트할 때 사용되기 때문에 멱등이 아니라고 볼 수 있습니다.
멱등성?
동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 멱등성을 가졌다고 말합니다.
HTTP 메서드 종류에는 무엇이 있나요?
대표적으로 HTTP메서드는 GET, POST, PUT, PATCH, DELETE가 있습니다. GET은 정보를 조회, POST는 정보를 생성, PUT, PATCH는 정보를 수정, DELETE는 정보를 삭제할 수 있습니다.
PUT과 PATCH의 차이는 무엇인가요?
PUT은 전체 수정, PATCH는 부분수정을 할 수 있습니다.
HTTP 메세지 구조에 대해 설명해주세요.
하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약).
즉 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 라고 보면 된다.프론트앤드 서버와 클라이언트간의 통신에 사용된다.
HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다.
메시지 타입은 두 가지가 있습니다.
요청(request)은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고,
응답(response)은 요청에 대한 서버의 답변입니다.
HTTP 요청과 응답의 구조는 서로 닮았습니다.
start line, header, empty line, body로 구조가 나뉘고,
- 시작 줄(start-line)에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 기록되어 있습니다. 이 줄은 항상 한 줄로 끝납니다.
- 옵션으로 HTTP 헤더 세트가 들어갑니다. 여기에는 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어갑니다.
- 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(blank line)이 삽입됩니다.
- 요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서(document)가 들어갑니다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시됩니다.
HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 요청 헤드(head) 라고 부르며, 이와 반대로 HTTP 메시지의 페이로드는 본문(body)이라고 합니다.
Same-Origin Policy와 CORS에 대해서 설명해주세요.
SOP란?
동일출처정책을 의미합니다. SOP 내에서는 uri의 프로토콜, 호스트, 포트 3가지 모두가 동일해야 같은 출처로 인정합니다. 이 정책이 필요한 이유는 동일한 출처가 아닌 곳에서의 요청이 오는 요청을 막아 보안성을 유지하기 위함입니다.
CORS란?(Cross Origin Resource Sharing)
다만, 서버에서 다른 출처에서의 요청을 허용하게 해줄 수 있는 CORS설정을 해준 경우는 접근할 수 있습니다.
CORS는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원하기 때문에 보안 문제를 예방하고 허용하는 Origin만 요청할 수 있습니다.
node.js나 express.js에서 cors미들웨어를 사용하여 상황에 맞게 cors 설정을 제어할 수 있습니다.
(nodeJS에서는 cors미들웨어 패키지를 설치 후 reqiure해온뒤app.use에 cors를 넣어 모든요청을 허용해줄수도 있고, app.use 안에 넣은 cors에 객체형태로 origin에 url을 할당한 변수를 넣어 특정 url만 허용해줄수도 있다.)
