본문 바로가기
네트워크, 서버/웹,웹서버

(웹)로컬스토리지, 세션스토리지, 쿠키, 세션 / 이벤트 버블링, 캡처링 / 웹팩, 바벨

by 흥부와놀자 2021. 7. 27.

로컬 스토리지

- html5 나오면서 생김. 웹스토리지로써 최대 5mb까지 클라이언트에 영구 저장됨. ex)자동로그인

 

세션 스토리지

- html5 나오면서 생김. 웹 스토리지로써 최대 5mb까지 저장되며 브라우저 종료시 데이터 삭제됨. ex)폼정보, 비로그인 장바구니

 

쿠키

- 클라이언트가 서버와 통신시 항상 헤더에 넣어 보내는 키-값 파일임. 최대 4kb까지 가능하며 쿠키 생성시 지속시간을 정해서 지속시간이 끝나면 사라짐. 

 

세션

- 쿠키기반이지만 브라우저가 아닌 서버에서 관리함. 클라가 접속하면 서버에서 세션ID를 발급해주고, 해당 ID에 데이터를 저장함. 브라우저는 쿠키로 해당 세션ID를 넘기고 서버는 받은 세션ID로 클라를 구별하고 데이터를 가져옴.

브라우저를 종료할때까지 인증상태를 유지하며 보안면에선 쿠키보다 좋지만 동접자가 많은 서버의 경우 서버 메모리를 많이 차지하게 됨.

 

이벤트 버블링

- 이벤트 실행시 전파되는 방향이 이벤트가 발생한 target으로부터 최상위 객체인 window까지 전파해 나간다. 설정하지 않으면 기본적으로 버블링 이설정된다.

 

이벤트 캡처링

- 이벤트 실행시 전파되는 방향이 최상위 객체인 window부터 target까지 전파된다. addEventListener의 두번째 매개변수를 true로 하면 적용된다.

 

웹팩

- 빌드시 의존성을 분석해 모듈들을 하나로 묶어주는 역활을 한다. 

 

바벨

- 해당 자바스크립트 코드를 구형 브라우저에서도 동작하도록 변환시켜준다. 리액트의 JSX문법을 사용할수 있게 해준다.