일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- unique identifiers
- 딥다이브
- 진행기록
- peerdependencies
- 학습내용정리
- 블로그 서비스 최적화
- 이미지 갤러리 최적화
- 제너레이터와 async/await
- const
- 자바스크립트
- 자바스크립트 딥다이브
- DOM
- 커리어
- js pattern
- version management
- package management
- js pattern
- 자바스크립트 패턴
- pr review
- 올림픽 통계 서비스 최적화
- 새 코드 받아오기
- 프로그래머스
- Babel과 Webpack
- 브라우저의 렌더링 과정
- 프론트엔드 성능 최적화 가이드
- mixin pattern
- middleware pattern
- 모던 자바스크립트 Deep Dive
- 이벤트
- 스코프
- Today
- Total
Dev Blog
6. HTTP 본문
1. HTTP reqeust에는 어떤 것들이 있나요? 리스트업 해 주시고 설명해 주세요
일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 주요 메서드를 갖고 있습니다.
- GET : 존재하는 자원에 대한 요청
- POST : 새로운 자원을 생성
- PUT : 존재하는 자원에 대한 변경
- DELETE : 존재하는 자원에 대한 삭제
이와 같이 데이터에 대한 조회, 생성, 변경, 삭제 동작을 HTTP 요청 메서드로 정의할 수 있습니다. 참고로 때에 따라서는 POST 메서드로 PUT, DELETE의 동작도 수행할 수 있습니다.
기타 요청 메서드는 다음과 같습니다.
- HEAD : 서버 헤더 정보를 획득. GET과 비슷하나 Response Body를 반환하지 않음
- OPTIONS : 서버 옵션들을 확인하기 위한 요청. CORS에서 사용
참고: joshua1988.github.io/web-development/http-part1/
2. 브라우저에 URL을 입력하고 요청한 페이지를 볼때까지 어떤 일이 일어나는가?
- You enter a URL into a web browser
- The browser looks up the IP address for the domain name via DNS
- The browser sends a HTTP request to the server
- The server sends back a HTTP response
- The browser begins rendering the HTML
- The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
- Once the page is loaded, the browser sends further async requests as needed.
참고: wsvincent.com/what-happens-when-url/
3. HTTP 요청과 응답 헤더에 어떤 내용이 들어가는가?
goddaehee.tistory.com/169gmlwjd9405.github.io/2019/01/28/http-header-types.html
4. HTTP와 HTTPS 프로토콜의 차이점은 무엇인가?
1) http
HTTP stands for Hypertext Transfer Protocol. When you enter http:// in your address bar in front of the domain, it tells the browser to connect over HTTP. HTTP uses TCP (Transmission Control Protocol), generally over port 80, to send and receive data packets over the web. To put it simply it is a protocol that's used by a client and server which allows you to communicate with other websites. The client sends a request message to an HTTP server (after the TCP handshake) which hosts a website, the server then replies with the response message. The response message contains completion status information, such as HTTP/1.1 200 OK.
2) https
HTTPS stands for Hypertext Transfer Protocol Secure (also referred to as HTTP over TLS or HTTP over SSL). When you enter https:// in your address bar in front of the domain, it tells the browser to connect over HTTPS. Generally sites running over HTTPS will have a redirect in place so even if you type in http:// it will redirect to deliver over a secured connection. HTTPS also uses TCP (Transmission Control Protocol) to send and receive data packets, but it does so over port 443, within a connection encrypted by Transport Layer Security (TLS).
- HTTP URL in your browser's address bar is http:// and the HTTPS URL is https://.
- HTTP is unsecured while HTTPS is secured.
- HTTP sends data over port 80 while HTTPS uses port 443.
- HTTP operates at application layer, while HTTPS operates at transport layer.
- No SSL certificates are required for HTTP, with HTTPS it is required that you have an SSL certificate and it is signed by a CA.
- HTTP doesn't require domain validation, where as HTTPS requires at least domain validation and certain certificates even require legal document validation.
- No encryption in HTTP, with HTTPS the data is encrypted before sending.
참고: www.keycdn.com/blog/difference-between-http-and-https
5. URL 축약서비스(bit.ly와 같은 url shortner)를 어떻게 설계하겠는가?
const input = document.getElementById('url-input'),
button = document.getElementById('shorten-button'),
out = document.getElementById('out');
input.focus();
async function shorten (href) {
const shortid = (await (await fetch('/api/new', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({href}),
})).json()).shortid;
return shortid;
}
button.addEventListener('click', async () => {
const link = `${location.origin}/l/${await shorten(input.value)}`;
out.innerHTML = `<a href="${link}" target="_blank">${link}</a>`;
});
참고: www.youtube.com/watch?v=tIuU_ra1YmY
6 .CORS란 무엇인가요? CORS의 목적과 CORS 활용에 대해 이야기해 주세요
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources.
서로 다른 출처에서 자원을 공유해도 되는지에 대한 웹브라우저의 정책으로 어플리케이션을 사용하는 유저들을 보호하기 위함이다.
쉽게 말해 다른 origin 간에 리소스를 공유하는 경우이다.
요청을 할때는 cross-origin HTTP 에 의해 요청됩니다.
하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다.
What requests use CORS?
This cross-origin sharing standard can enable cross-site HTTP requests for:
- Invocations of the XMLHttpRequest or Fetch APIs, as discussed above.
- Web Fonts (for cross-domain font usage in @font-face within CSS), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
- WebGL textures.
- Images/video frames drawn to a canvas using drawImage().
- CSS Shapes from images.
Functional overview
The Cross-Origin Resource Sharing standard works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser. Additionally, for HTTP request methods that can cause side-effects on server data (in particular, HTTP methods other than GET, or POST with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request. Servers can also inform clients whether "credentials" (such as Cookies and HTTP Authentication) should be sent with requests.
=> GET, POST 메소드를 제외한 HTTP 메소드의 경우, 서버 데이터에 부작용을 일으킬 수 있기 때문에(actual request가 위험할 수도 있기 때문), HTTP OPTION method를 이용한 Preflight 요청을 의무화 한다. 또한 서버는 client에 쿠키와 HTTP 인증과 같은 인증을 요구하기도 한다.
CORS failures result in errors, but for security reasons, specifics about the error are not available to JavaScript. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.
*MIME type: Multipurpose Internet Mail Extensions. 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
자세한설명: nomadkim880901.tistory.com/356
7. 대표적인 HTTP 응답 코드에 대해 설명해 주세요
2xx (성공)
이 클래스의 상태 코드는 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다.
- 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
- 201(작성됨): 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.
- 202(허용됨): 서버가 요청을 접수했지만 아직 처리하지 않았다.
- 203(신뢰할 수 없는 정보): 서버가 요청을 성공적으로 처리했지만 다른 소스에서 수신된 정보를 제공하고 있다.
- 204(콘텐츠 없음): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.
4xx (요청 오류)
4xx 클래스의 상태 코드는 클라이언트에 오류가 있음을 나타낸다.
- 400(잘못된 요청): 서버가 요청의 구문을 인식하지 못했다.
- 401(권한 없음): 이 요청은 인증이 필요하다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있다. 상태 코드 이름이 권한 없음(Unauthorized)으로 되어 있지만 실제 뜻은 인증 안됨(Unauthenticated)에 더 가깝다.[2]
- 402(결제 필요): 이 요청은 결제가 필요합니다.
- 403(Forbidden, 금지됨): 서버가 요청을 거부하고 있다. 예를 들자면, 사용자가 리소스에 대한 필요 권한을 갖고 있지 않다. (401은 인증 실패, 403은 인가 실패라고 볼 수 있음)
- 404(Not Found, 찾을 수 없음): 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.
5xx (서버 오류)
서버가 유효한 요청을 명백하게 수행하지 못했음을 나타낸다.[1]
- 500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.
- 501(구현되지 않음): 서버에 요청을 수행할 수 있는 기능이 없다. 예를 들어 서버가 요청 메소드를 인식하지 못할 때 이 코드를 표시한다.
- 502 (Bad Gateway, 불량 게이트웨이): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 잘못된 응답을 받았다.
- 503(서비스를 사용할 수 없음): 서버가 오버로드되었거나 유지관리를 위해 다운되었기 때문에 현재 서버를 사용할 수 없다. 이는 대개 일시적인 상태이다.
- 504(게이트웨이 시간초과): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 제때 요청을 받지 못했다.
'Learn then Key points > Tech Interview Questions' 카테고리의 다른 글
8. Cloud Infra (0) | 2021.03.29 |
---|---|
7. Network (0) | 2021.03.29 |
5. Data Structure (0) | 2021.03.29 |
4. Node.js (0) | 2021.03.29 |
3. Javascript (0) | 2021.03.29 |