-
면접질문중 헷갈렸던것 (프로토콜,SSR,CSR,브라우저 저장소,콜백 함수,GET)프론트앤드/[JavaScript] 2023. 7. 14. 12:10728x90
요즘 면접을 보고 있는데,
개념을 익히고 있다고 생각했지만 막상 물어보면 대답을 제대로 못하는 것 같아 아쉬운 마음에..
끝나고라도 정리해 보자 하고 마음먹었는데 지금 해야겠다.. 히히
이렇게 하나하나 배워가는거지뭐.. ㅠ_ㅠ
여튼..정리시작!!
1. 여태 한 프로젝트 중에서 프로토콜을 이용한 사례 및 방법에 대해서 말해주세요.
여기서...HTTP말씀하시는거 맞냐고 물어보고 조금 헛소리한것같아서..
모르는것은 바로바로 알아야하기때문에 !! 정리해본다 !!
먼저,
프로토콜 ?
: 프로토콜은 통신하기 위한 약속들을 기술적으로 잘 정의해 준 것으로, 데이터를 송수신하는 순서와 내용을 결정한다.
ex) HTTP , TCP/IP, UDP
HTTP(Hypertext Transfer Protocol):
- 웹 브라우저와 웹 서버 간의 통신에 사용한다.
- 사용자가 웹 페이지를 요청하고, 서버는 해당 페이지를 전송하여 브라우저에 표시한다.
- ex) 사용자가 브라우저에서 www.example.com에 접속하여 웹 페이지를 요청하는 경우, 브라우저는 HTTP 프로토콜을 사용하여 서버에 요청을 전송하고, 서버는 요청에 대한 응답으로 해당 웹 페이지를 전송한다.
장점 : 통신간의 연결 처리나 상태 정보를 관리할 필요가 없어 서버 디자인이 간단하다.
단점 : 이전 통신의 정보를 모르기 때문에 매번 인증을 해줘야 한다. 이를 해결하기 위해 쿠키나 세션을 사용해서 데이터를 처리한다.
- HTTP와 HTTPS의 차이점?
HTTP는 평문 데이터를 전송하는 프로토콜이기 때문에, HTTP로 중요한 정보를 주고받으면 제 3자에 의해 조회될 수 있다.
이러한 문제를 해결하기 위해 HTTP에 암호화가 추가된 프로토콜이 HTTPS이다.
HTTPS는 SSL (Secure Soket Layer) 인터넷을 통해 전달되는 정보를 보호하기 위해 개발한 통신규약 의 껍질을 덮어쓴 HTTP이다.
그래서 HTTP는 원래 TCP와 직접 통신했지만, HTTPS에서는 HTTP->SSL과 통신 & SSL->TCP와 통신 함으로써 암호화와 증명서, 안정성 보호를 이용할 수 있게 되었다.
TCP/IP(Transmission Control Protocol/Internet Protocol):
- 인터넷에서 데이터 전송을 위한 가장 일반적인 프로토콜이다.
- 데이터의 패킷화, 전송 제어, 경로 설정 등을 담당한다.
- 예시: 웹 브라우징, 이메일 전송, 파일 전송 등 인터넷에서 다양한 통신 활동에 TCP/IP 프로토콜이 사용된다.
그냥.. 내가 만든 프로젝트 브라우저에 띄울때 ..당연하게 했던 행동들이었는데 막상 말로 저렇게 물어보시니 대답을 못했다...
정리하는 김에 다른 프로토콜들도 정리해 보았다.
SMTP(Simple Mail Transfer Protocol)
- 전자 메일을 보내는 데 사용된다.
- 사용자가 이메일을 작성하여 보낼 때, 메일 클라이언트는 SMTP 프로토콜을 사용하여 메일 서버에 이메일을 전송한다.
- 예시: 사용자가 이메일 클라이언트를 통해 이메일을 작성하고, "보내기" 버튼을 클릭하면, 클라이언트는 SMTP 프로토콜을 사용하여 이메일을 수신 서버에 전송한다.
FTP(File Transfer Protocol)
- 파일 전송을 위한 프로토콜이다.
- 파일 서버와 클라이언트 간에 파일 전송을 가능하게 한다.
- 예시: 사용자가 FTP 클라이언트를 사용하여 웹 서버에 접속하고, 파일을 업로드하거나 다운로드할 수 있다.
DNS(Domain Name System):
- 도메인 이름과 IP 주소 간의 매핑을 위한 프로토콜입니다.
- 도메인 이름을 IP 주소로 변환하거나, IP 주소를 도메인 이름으로 변환하는 역할을 합니다.
- 예시: 사용자가 웹 브라우저에서 도메인 이름(예: www.example.com)을 입력하면, DNS는 해당 도메인 이름을 IP 주소로 변환하여 웹 서버에 연결합니다.
즉 , 프로토콜은 네트워크 통신의 기초를 형성하며, 인터넷이나 기타 네트워크 기반 서비스를 운영하는 데 중요한 역할을 한다.
각 프로토콜은 자체적인 규칙과 동작 방식을 가지고 있으며, 이를 준수하는 네트워크 장비와 응용 프로그램은 효율적이고 안정적인 통신을 보장할 수 있다.
2. CSR SSR 차이에 대해서 설명해주세요
CSR (Client-Side Rendering):
- CSR은 초기 로딩 시에는 서버로부터 빈 HTML 문서를 받아온다.
- 클라이언트(브라우저)는 JavaScript 파일을 다운로드하고 실행하여 페이지의 렌더링을 담당한다.
- 클라이언트 측에서 데이터를 요청하고 받아와서 동적으로 페이지를 구성한다.
- CSR은 사용자 경험을 향상시킬 수 있으며, 단일 페이지 애플리케이션(SPA)과 재사용 가능한 UI 컴포넌트를 구축하기에 적합하다.
- 초기 로딩 속도는 느릴 수 있으며, JavaScript 파일 다운로드 및 실행에 따른 지연이 발생할 수 있다.
SSR (Server-Side Rendering):
- SSR은 서버에서 초기 렌더링을 수행하여 완전한 HTML 문서를 클라이언트에게 전달한다.
- 서버는 요청된 페이지를 구성하고 데이터를 가져와서 렌더링하여 클라이언트에게 완성된 HTML을 제공한다.
- 클라이언트는 초기 로딩 시에 완전한 페이지를 받아와 즉시 렌더링할 수 있으므로 초기 로딩 속도가 빠르다.
- SSR은 검색 엔진 최적화(SEO)에 유리하며, 초기 컨텐츠 로딩 속도가 중요한 경우에 적합하다.
- 서버 측에서 렌더링을 처리하기 때문에 클라이언트의 브라우저 성능에 영향을 받지 않는다.
- 동적인 변화가 자주 발생하는 페이지의 경우 서버 측에서 매번 렌더링을 수행해야 하므로 부하가 발생할 수 있다.
3. 브라우저 저장소와 차이점
Local Storage
: 로컬 스토리지는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하다.
ex) 자동로그인
Session Storage
: 세션 종료시 클라이언트에 대한 정보가 삭제된다.
ex) 비로그인 장바구니, 입력 폼 정보
쿠키
: 웹사이트에서 쿠키를 설정하면, 모든 웹 요청에는 쿠키 정보가 포함되는데, 이때 서버 부담이 증가한다.
ex) 팝업창
- 쿠키와 세션의 차이점
쿠키 : 사용자의 컴퓨터에 저장하는 작은 기록정보 파일이다. HTTP에서 클라이언트의 상태정보를 PC에 저장했다가 필요시 정보를 참조하거나 재사용할 수 있다.
세션 : 일정시간동안 같은 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술이다.
즉, 이용자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 그것을 세션이라고 한다.
쿠키(Cookie) 세션(Session) 저장 위치 클라이언트(=접속자 PC) 웹 서버 저장 형식 text Object 만료 시점 쿠키 저장시 설정
(브라우저가 종료되도, 만료시점이 지나지 않으면 삭제되지 않음)브라우저 종료시 삭제
(기간 지정 가능)사용하는 자원(리소스) 클라이언트 리소스 웹 서버 리소스 용량 제한 총 300개
하나의 도메인 당 20개
하나의 쿠키 당 4KB(=4096byte)서버가 허용하는 한 용량제한 없음 속도 세션보다 빠름 쿠키보다 느림 보안 세션보다 안좋음 쿠키보다 좋음 - 서버인증과 브라우저 저장소
- 주요 정보를 요청 헤더에 넣는 방법 : 보안에 매우 취약하다
- Session, Coocke : 서버 과부화가 증가하고, 세션 하이재킹 공격에 취약하다
- JWT 방식 : 별도의 브라우저에 저장하지 않고, JWT를 발급하고 검증하면 되기 때문에 확장성이 뛰어나다. ( 단점 : Payload 정보가 제한적이고 JWT 길이가 길다는 단점이 있다. )
4. 콜백 & 콜백함수에 대해서 설명해주세요.
* 콜백(callback)은 프로그래밍에서 비동기적인 작업을 처리하거나 다른 함수에게 작업을 위임하기 위해 사용되는 개념입니다.
* 콜백 함수(callback function)는 콜백의 구현을 위해 사용되는 함수를 말합니다. 콜백 함수는 일반적으로 함수의 인자로 전달되며, 해당 작업이 완료되거나 이벤트가 발생했을 때 호출됩니다. 이때 콜백 함수는 미리 정의된 로직을 수행하거나 다음에 실행할 작업을 정의합니다.
일반적으로 프로그램은 작업을 순차적으로 실행하면서 결과를 반환하는 동기적인 방식으로 동작하는데,
비동기적인 작업은 작업이 완료되기 전에 다음 작업으로 진행되는 경우가 있다.
이때 콜백을 사용하여 비동기 작업의 결과를 처리하거나 다음 작업을 지정할 수 있다.
콜백은 보통 다음과 같은 상황에서 사용된다.
- 이벤트 핸들링: 사용자의 입력, 클릭, 타이머 등의 이벤트가 발생할 때, 콜백을 사용하여 해당 이벤트에 대한 응답을 정의할 수 있습니다.
- 비동기 작업 완료 처리: 파일 로딩, 데이터베이스 쿼리, 네트워크 요청 등의 비동기 작업이 완료될 때, 콜백을 사용하여 결과를 처리할 수 있습니다.
- 에러 처리: 비동기 작업 중에 발생한 에러를 처리하기 위해 콜백을 사용할 수 있습니다.
5. GET과 POST의 차이에 대해 설명해주세요
- GET : 데이터를 조회하기 위해 사용되는 방식으로, 데이터를 헤더에 추가하여 전송하는 방식이다.
단점 : URL에 데이터가 노출되므로 보안적으로 중요한 데이터를 포함하면 안된다.
- POST : 데이터를 추가 또는 수정하기위해 사용되는 방식으로, 데이터를 바디에 추가하여 전송하는 방식이다.
특징 : 완전히 안전하다는것은 아니지만, url에 데이터가 노출되지 않아 GET보다 안전하다.
6. www.naver.com에 접속할 때 생기는 과정에 대해 설명해주세요(웹 동작방식이해)
- 사용자가 브라우저에 url을 입력한다.
- DNS 서버에 도메인 네임으로 서버의 진짜 주소를 찾는다.
- IP 주소로 웹 서버에 TCP 3 handshake로 연결 수립한다.
- 클라이언트는 웹 서버로 HTTP 요청 메세지를 보낸다.
- 웹 서버는 HTTP 응답 메세지를 보낸다.
- 도착한 HTTP 응답 메세지는 웹 페이지 데이터로 변환되고, 웹 브라우저에 의해 출력된다.
개념을 잘 쌓아서 최합까지 가보쟈!!!
화이팅!
728x90'프론트앤드 > [JavaScript]' 카테고리의 다른 글
[프로그래머스 코테] N보다 커질 때 까지 더하기 (1) 2024.01.12 Semantic Tag, 반복문 정리 및 복습 (0) 2023.07.14