오늘 목표
- 수업전 7시 기상 후 운동(O)
- 수업내용 정리 및 모르는 내용 복습(O)
- 프로그래머스 문제 풀기(O)
- js프로젝트에 배운내용 적용해보기(O)
배운 내용
HTTP Stateless
HTTP는 통신 시 정보를 한 번씩 주고받은 후 바로 끊는 형태로 처리함. 이렇게 상태 정보를 저장하지 않는 통신 형태를 stateless 라고 하며 HTTP는 대표적인 무상태 프로토콜이다.
stateful은 서버가 클라이언트의 이전 상태를 보존한다는 의미. stateless는 서버가 클라이언트의 이전 상태를 보존하지 않는다는 의미.
connectionless 는 클라이언트가 서버에 요청을 하고 응답을 받으면 바로 TCP/IP 연결을 끊어 연결을 유지하지 않는 것. 이를 통해 서버의 자원을 효율적으로 관리하고, 수많은 클라이언트의 요청에도 대응할 수 있다.
왜 HTTP는 Stateless 구조를 채택할까?
- 단순성, 확장성, 무상태 연결, 성능, 데이터 일관성.
- 각 요청은 서로 독립적이어야 함. 서버에 요청에 대한 정보를 기억할 필요가 없으므로 개발과 유지 보수가 더 단순해짐.
- 서버가 각 클라이언트의 상태를 추적할 필요가 없으므로 수천 또는 수백만 사용자를 처리하는 대규모 서비스에 적합함. 상태 정보를 저장하고 관리하지 않아도 되므로 자원을 효율적으로 사용할 수 있고 로드 밸런싱이 쉽게 구현된다.
- 각 요청과 응답이 독립적이므로, 여러 서버가 동일한 요청을 처리할 수 있음. 이는 분산 시스템에서 매우 중요 또한 클라이언트 상태를 유지할 필요가 없으므로 서버는 빠르게 응답을 보낼 수 있음, 또 여러 서버 사이에서 데이터 일관성 문제가 발생할 가능성이 줄어든다.
쿠키
HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우,
그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.
쿠키의 동작 순서
- 클라이언트가 페이지를 요청한다.(사용자가 웹사이트에 접근)
- 웹 서버는 쿠키를 생성한다.
- 한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려준다.
- 넘겨받은 쿠키는 클라이언트가 가지고 있다가 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
- 동일 사이트 재방문 시 클라이언트의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다.
사용 예시
아이디와 비밀번호 저장 및 팝업창
세션
일정 시간 동안 같은 사용자로부터 들어오는 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술이다. 여기서 일정 시간은 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다.
세션 특징
웹 서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
웹 서버의 저장되는 쿠키(=세션 쿠키)
브라우저를 닫거나, 서버에서 세션을 삭제했을 때만 삭제가 되므로, 쿠키보다 비교적 보안이 좋다.
저장 데이터에 제한이 없다. (서버 용량이 허용하는 한에서)
각 클라이언트에 고유 Session ID를 부여한다. Session ID로 클라이언트를 구분해 각 요구에 맞는 서비스를 제공
세션의 동작 순서
- 클라이언트가 페이지에 요청한다.
- 서버는 접근한 클라이언트의 Request-Header 필드인 Cookie를 확인하여, 클라이언트가 해당 session-id를 보냈는지 확인한다.
- session-id가 존재하지 않는다면 서버는 session-id를 생성해 클라이언트에게 넘겨준다.
클라이언트는 서버로부터 받은 session-id를 쿠키에 저장한다. - 클라이언트는 서버에 요청시 이 쿠키의 session-id 값을 같이 서버에 전달한다.
- 서버는 전달받은 session-id로 session에 있는 클라이언트 정보를 가지고 요청을 처리 후 응답한다.
세션을 사용하면 좋은데 왜 쿠키를 사용할까?
세션이 쿠키에 비해 보안이 높은 편이나 쿠키를 사용하는 이유는 세션은 서버에 저장되고, 서버의 자원을 사용하기에 서버 자원에 한계가 있고, 속도가 느려질 수 있기 때문에 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.
axios
Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다. Axios는 fetch보다 더 많은 기능을 제공하며, 그 사용성과 편리성으로 인해 많은 개발자들 사이에서 인기가 높습니다.
Axios의 주요 특징
- 자동 JSON 변환: 응답 데이터를 자동으로 JSON 형식으로 변환합니다.
- 요청 및 응답 인터셉터: 요청이나 응답을 가로채고 처리할 수 있는 기능을 제공합니다.
- 취소 가능한 요청: axios.CancelToken을 사용해 요청을 취소할 수 있습니다.
- 브라우저와 Node.js 지원: 클라이언트와 서버 측 모두에서 동일한 API로 사용 가능합니다.
Axios 사용 예시
import axios from 'axios';
async function getUserData() {
try {
const response = await axios.get('https://api.example.com/user');
return response.data;
} catch (error) {
throw new Error('데이터를 가져오는 중 오류가 발생했습니다.');
}
}Axios의 장단점
장점
간편한 오류 처리: HTTP 상태 코드가 200번대가 아닐 경우 자동으로 오류를 발생시킵니다.
고급 기능 지원: 요청 및 응답 인터셉터, 요청 취소, 자동 JSON 변환 등 다양한 고급 기능을 제공합니다.
브라우저와 Node.js 지원: 동일한 코드로 브라우저와 서버 환경에서 모두 사용 가능합니다.
단점
추가 설치 필요: 라이브러리를 설치하고 의존성을 관리해야 합니다.
용량: Fetch API보다 약간 더 많은 용량을 차지합니다.
백엔드 자바
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://127.0.0.1:5500/") // 허용할 출처 (프론트엔드 주소)
.allowedMethods("*") // 모든 HTTP 메서드 허용 (GET, POST, PUT, DELETE 등)
.allowedHeaders("*") // 모든 요청 헤더 허용
.allowCredentials(true); // 쿠키, 세션 정보 허용
}
