div와 span과 p의 차이

• div - 박스단위로 가로 영역 전체 차지, display: block
• span - 줄 단위로 컨텐츠 크기만큼 영역 차지, display:inline
• p - 단락 단위로 영역 차지, display:block

inline, block, inline-block 차이

• inline - 한줄에 나란히 배치 (span, a, em)
• block - 줄 바꿈을 실행 (header, footer, p, li, table, div, h1)
• inline-block - block 처럼 width, height가 지정 가능하지만, 한줄에 나란히 배치한다. 즉, 내부적으로는 block, 외부적으로는 inline이 적용된다. (button, input, select)

JWT Token과 Session, 쿠키, 로컬스토리지 의 차이

쿠키

• 클라이언트에 저장될 목적으로 생성한 작은 정보를 담은 파일(서버에서 사용자 브라우저로 전송한다.)
• 브라우저는 서버에서 받은 쿠키를 저장해두었다가, 동일한 서버로 재요청할 때 쿠키를 함께 전송한다.
• 사용자가 로그인을 하면, 서버는 ID, PW 정보를 쿠키에 담아 브라우저로 다시 보낸다. 이후 브라우저에서는 요청할 때마다 로그인 정보가 담긴 쿠키를 함께 서버로 보낸다. 브라우저에서 매번 요청할 때마다 서버 입장에서는 로그인 정보가 담긴 쿠키를 받게 되는 것이다.

쿠키의 장점

• 기존 로그인 정보를 사용하기 때문에 인증을 위한 추가적인 데이터 저장이 필요 없다.(쿠키는 서버가 아닌 클라이언트 웹 브라우저에 한다.)

쿠키의 단점

• 사용자의 주요 정보를 매번 요청에 담기 때문에 보안상 문제가 있다.
• 클라이언트에서 쿠키 정보를 쉽게 변경, 삭제할 수 있고, 가로채기 당할 수도 있다.
• 쿠키 사이즈가 커질수록 네트워크 부하가 심해진다.