지식/Web

JWT (JSON Web Token) 이해와 구조

이번 글에서는 JWT 구조와 간단한 알고리즘 설명, 마지막으로 JWT 생성 과정에 대해 설명할 예정입니다. JWT 홈페이지를 참고하였고 추가 설명을 작성하였습니다. JWT(JSON WEB TOKEN)는 쿠키와 세션 방식을 거치는 과정 속에서 나타난 하나의 인터넷 인증 표준 포맷입니다. 말 그대로 인증에 필요한 정보(JSON 객체)들을 토큰에 담아 전송하는 방식입니다. JSON 객체란? "속성-값" 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 이 정보는 디지털 서명이 되어있기 때문에 안전하게 인증을 시도할 수 있습니다. (서명에 쓰이는 알고리즘은 HMAC 알고리즘,RSA(공개 / 개인 키 쌍 사용) 등의 알고리즘이 있습니다.)..

웹 스토리지(Web Storage)란?

웹 스토리지는 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술이다. DB에 저장하는 데이터보다 상대적으로 덜 중요한 데이터들을 보통 저장하는데, 웹 스토리지에는 두가지 종류의 스토리지가 있다. 로컬 스토리지와 세션 스토리지이다. 로컬 스토리지 (LocalStorage) 특정 웹사이트를 새탭이나 새창으로 띄워도 동일한 데이터를 공유한다. 브라우저를 종료한 후, 실행시켜도 데이터가 남아있다. 직접 브라우저의 캐시 삭제 및 로컬 스토리지 초기화를 하지 않는 이상 데이터는 영구적으로 보관된다. 단, 같은 컴퓨터에서 같은 브라우저를 사용할 때만 적용된다. 세션 스토리지 (SessionStorage) 웹 페이지의 세션이 끝나면 (브라우저 종료) 데이터가 지워진다. 각각의 탭과 창 ..

동기/비동기(Sync/Async), Blocking/Non-Blocking

시작하기에 앞서, 간단히 기준이 되는 용어를 보겠습니다. Blocking/Non-Blocking : '제어권'을 두고 구분 동기/비동기 : 결과값을 기다리느냐로 구분 1. Blocking VS Non-Blocking : 제어의 관점 요청한 처리되어야하는 작업이 전체 작업 흐름을 막는지 안 막는지? 🚩 Blocking 작업에 대한 제어권이 없다. 즉, 다른 주체에게 작업을 요청하면 결과가 돌아올 때까지 다른 작업을 하지않고 기다려야 한다. A함수가 B함수를 호출하면, 제어권을 B함수에게 넘긴다. B함수가 자신의 함수를 실행하고, A함수는 제어권이 없기 때문에 함수 실행을 잠시 멈춘다. B함수의 실행이 끝나면 자신의 제어권을 호출한 A에게 돌려준다. 🚩 Non-Blocking 작업에 대한 제어권을 그대로 가..

서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)

서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링, 클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링입니다. 구체적으로 뜯어봅시다. 서버사이드 렌더링 (SSR) 서버에 HTML 파일을 저장해두었다가 요청이 발생할 때마다 전체 파일을 브라우저에 전달하는 방식 과정 웹사이트를 방문했을 때 1. 브라우저가 서버에 웹사이트 내용 요청 2. 이 요청을 서버가 처리 (랜더링) 3. 요청처리 완료되면 브라우저는 랜더링된 HTML을 가져와서 화면에 표시 특징 HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달 초기화면 로딩이 빠르되, 모든 콘텐츠를 리로딩하므로 정적인 사이트에 좋습니다. 관련기술 : JSP, 타임리프 ➡️ 백엔드 개발자 문제는 요청 발생할..

[HTML] 자동재생되는 유튜브 영상 넣기(음소거)

이번 글에서는 Web에서 자동 재생되는 유튜브 영상을 보여주는 방법에 대해 작성하겠습니다! 방법은 간단합니다. 1. 특정 Youtube 영상의 '공유'버튼을 클릭하여 퍼가기 버튼을 클릭하여 코드를 복사한다. (특정 부분만 사용!) 2. Youtube 영상을 표시할 html 파일에서 내에 아래 코드를 적는다. 가로, 크기는 자신이 나타내고 싶은 크기로 지정해주고, 위에서 복사한 주소를 영상키값에 넣어주면 됩니다. 여기서 중요한 것은 autoplay=1&mute=1 입니다! autoplay=1만 해줄 경우, 신기하게도 먹히지가 않아요.. 그래서 음소거 기능을 켜주는 mute=1 을 추가해줘야 자동 재생이 됩니다. 예를 들면) 위의 유튜브영상의 주소는 'J08a3_dGtmo' 이었으니, 아래와 같이 적어줄 수..