면접스터디 데일리 과제
Q1. 프레임워크와 라이브러리의 차이점에 대해서 알고 있나요 ?
프레임워크는 프로그램을 개발하기 위한 구조 의 개념이고,
라이브러리는 특정 기능 개발을 도와주는 도구 의 개념이라고 생각합니다.
비유적으로 설명하자면 프레임워크는 밀키트, 라이브러리는 요리도구라고 할 수 있겠습니다.
밀키트가 어떤 요리를 완성할 때 필요한 재료나 양념, 레시피가 전부 들어있어서
제공되는 레시피에 따라 요리를 만들면 맛있는 요리가 완성되는 것 처럼,
프레임워크는 개발자가 만들고자 하는 구조적, 제어적 흐름을 미리 정의해두고
그 흐름에 맞추어 코드를 작성할 수 있습니다.
요리도구가 재료나 양념을 더욱 쉽게 손질하고 멋진 요리를 완성할 수 있게 도와주는 역할을
하는 것 처럼, 라이브러리는 개발자가 만들고자하는 코드에 필요한 기능을 제공하는
도구의 모음이라고 할 수 있으며, 적재적소에 활용하여 코드를 작성할 수 있습니다.
그렇다면 리액트는 라이브러리 인가요? 프레임워크 인가요?
리액트 공식 문서를 확인해 보면 사용자 인터페이스를 만들기위한
자바스크립트 라이브러리 라고 소개합니다.
리액트는 라우팅, HTTP 요청 처리, 상태 관리 같은 추가적인 기능을 제공하지 않고
이러한 기능들을 별도의 라이브러리들에 의존합니다.
프레임워크인 Vue.js 와 비교해보면 조금 더 쉽게 알 수 있는데,
Vue.js는 Vue Router, Vuex 같은 추가 기능들을 자체적으로 제공합니다.
결론적으로 리액트는 라이브러리 라고 생각합니다.
캐시의 장단점과 어떤 부분에 활용되는지? FE에서 캐시를 사용할 수 있는 방법.
캐시는 이전에 수행한 작업의 결과를 저장하고, 이후에 똑같은 작업이 수행될 때
저장된 결과 값을 보여줌으로써 시스템의 성능을 향상시키는 방법입니다.
연산에 오래걸리지만 자주 변경되지는 않고, 자주 참조되는 데이터에 적용하면 좋습니다.
캐시는 오래 걸리는 연산을 다시 하지 않아도 되서 성능적인 이점을 얻을 수 있으며,
서버에서 불러오는 데이터를 캐싱하면 서버에 재요청을 하지 않아도 되니까
서버의 부하도 감소시킬 수 있다는 이점이 있습니다.
단점으로는 캐시는 이전의 결과값을 메모리에 저장하는 형식이기 때문에
시스템 메모리 사용량이 증가할 수 있고, 캐싱된 데이터가 서버의 데이터와 다른 경우
낡은 데이터를 사용자에게 보여줄 수 있는 가능성이 있어 추가적인 로직을 구현해야 합니다.
프론트엔드에서 캐시를 활용하는 방법은
리액트 환경이라면 useMemo, useCallback 등으로 특정 연산 값이나 함수를
캐싱하여 불필요한 연산을 줄이고 컴포넌트 렌더링 속도를 향상시킨다거나,
서버에서 가져온 데이터를 캐싱해두고 일일히 서버에 데이터를 요청해 화면에 띄워주는 대신
캐싱된 데이터를 보여주는 방법 정도가 있겠습니다.
HTTP에 대해 설명하고, HTTP 메세지 구조에 대해 자세하게 설명해주세요.
HTTP는 서버와 클라이언트 간 데이터를 전송하기 위해 사용되는 통신규약입니다.
기본적으로는 클라이언트가 서버로 요청을 보내고 응답을 받는 구조로 이루어져 있습니다.
HTTP 요청 메시지(Request 메시지)에는
HTTP 메소드, Request-target, HTTP 프로토콜 버전,
headers, request-body 가 담겨있고
HTTP 응답 메시지(Response 메시지)에는
HTTP 프로토콜 버전, Status code, reason-phrase,
headers, response-body 가 담겨있습니다.
Request 메시지 자세하게 알아보기
<method> : HTTP 요청 메소드, GET, POST, PUT, DELETE 등등
<request-target> : 요청 대상의 uri
<version> : HTTP 프로토콜의 버전. 예를들어 HTTP/1.1, HTTP/2
<headers> : 요청에 대한 부가정보.
- Accept : 클라이언트가 원하는 데이터 타입
- Content-Type: 요청 본문의 데이터 타입
- Authorization : 인증 토큰 등의 정보
- Cookie : 클라이언트 측에서 저장되는 쿠키 정보
- User-Agent : 클라이언트의 브라우저 정보
<request-body> : 클라이언트가 서버로 보내는 요청 본문요청 본문에는 텍스트, 이미지, JSON, form-data 등의 다양한 데이터를 담을 수 있고
본문의 형식을 headers 의 content-type 에서 지정해주어야 한다.
Response 메시지 자세하게 알아보기
<version> : HTTP 프로토콜 버전.
<status> : 상태 코드. 서버가 어떤 이유로 요청을 성공 또는 실패 했는지.
ex) 404, 500
<reason-phrase> : 상태코드를 설명하는 간단한 문구. 왜 성공&실패 했는지에 대한 이유.
<headers> : 응답에 대한 부가정보.
- Content-type : 응답 본문의 데이터 타입
- Content-length : 응답 본문의 크기를 바이트 단위로 나타냄.
- Cache-Control : 캐싱 정책. 클라이언트가 미리 캐싱할 수 있는지.
- Location : 리다이렉션 정보. 클라이언트를 다른 URL로 리다이렉션 할 수 있다.
- Server : 서버의 소프트웨어 정보.
- Set-Cookie : 서버에서 생성된 쿠키 정보 전송. 세션 유지를 위해 사용된다.
<response-body> : 서버에서 클라이언트로 보내는 응답 본문.