728x90

Computer Science 6

브라우저 저장소(LocalStorage, SessionStorage, Cookie)

✅ Web Storage란? Web Storage는 HTML5부터 제공하는 기능입니다. 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 쿠키와 비슷한 기능입니다. 키와 값의 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다. 영구적으로 저장하는 Local Storage와 임시적으로 저장하는 Session Storage를 따로 가지고 있어 데이터의 지속성을 구분하여 선택적으로 사용할 수 있습니다. Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없습니다. ✏️ 쿠키와 Web Storage의 비교 쿠키는 HTTP Request에 암호화되지 않은 상태로 사..

Computer Science 2023.06.27

쿠키와 세션

✅ HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜 환경은 "Connectionless, Stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매 번 확인해야 합니다. 이 특성을 보완하기 위해서 쿠키와 세션을 사용합니다. ✏️ Connectionless(비연결성) 클라이언트가 요청을 보낸 후 응답을 받으면 연결을 끊어버리는 특징 HTTP는 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 response를 보내고 접속을 끊는 특성이 있습니다. Header에 keep-alive라는 값을 줘서 커넥션을 재활용하는데 HTTP1.1에서는 이것을 디폴트로 사용합니다. HTTP가 TCP 위에 구현되었기 때문에 (TCP는 연결지향, UDP는 비연결지향) 네트워크 관점..

Computer Science 2023.06.27

Flux 패턴이란?

✅ Flux 패턴이란? Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. https://haruair.github.io/flux/docs/overview.html Flux | 사용자 인터페이스를 만들기 위한 어플리케이션 아키텍쳐 사용자 인터페이스를 만들기 위한 어플리케이션 아키텍쳐 (한국어 번역) haruair.github.io Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다. ✏️ Action Action이란 데이터를 변경하는 행위로서 Dispatcher에게 전달되는 객체..

Computer Science 2023.04.13

[AI] Stable Diffusion을 이용해 원하는 이미지 생성하기

✏️ Diffusion 모델 간단 원리 원본 이미지와 이미지를 설명하는 프롬프트를 주고 이미지가 흐려지는 노이즈를 추가해 다시 노이즈를 해석하면서 원본 이미지로 돌아가는 것을 학습하는 모델 이를 통해 원본 이미지 없이 노이즈와 프롬프트를 통해 데이터가 없는 새로운 이미지 생성이 가능 ✅ stability.ai 이 기업에서 Diffusion 모델을 만들었고 오픈소스로 배포하였고 Hugging Face에서 사용 가능 ✅ Stable Diffusion web UI Stable Diffusion 모델을 사용하여 이미지를 생성하는 것을 web UI로 만들어 사용자들에게 제공해 주는 무료 오픈소스가 있음 https://github.com/AUTOMATIC1111/stable-diffusion-webui GitHub..

Computer Science 2023.03.28

dns-prefetch란?

IP 주소를 사람들이 기억하고 사용하기 쉽게 도메인 주소로 대체하여 사용합니다. 하지만 결국 사용되는 것은 IP 주소이기 때문에 도메인과 IP 주소 간의 핸드셰이크가 일어납니다. 이 때, dns-prefetch는 해당 도메인에 대해 미리 핸드셰이크를 해놓아 속도를 조금 더 빠르게 하는 기능입니다. 브라우저에 도메인의 DNS 확인을 미리 수행하도록 요청합니다. 보통 하나의 웹 사이트는 외부 API 또는 이미지 등을 가져오는데 브라우저가 새로운 도메인에 연결할 때 DNS 확인을 수행해야 합니다. HTML 문서의 헤더에 아래의 코드를 추가해 dns-prefetch를 적용할 수 있습니다. 너무 많은 도메인을 설정하면 오히려 속도가 느려질 수 있습니다. 페이지 뷰가 낮은 웹 사이트의 경우 dns-prefetch ..

Computer Science 2023.03.14

웹 브라우저에 URL을 입력하면?

웹 브라우저에서 https://naver.com과 같은 URL을 입력하면 브라우저는 인터넷에서 사이트를 호스팅하는 서버를 파악해야 합니다. 이는 naver.com 도메인을 검색하여 주소를 찾는 것입니다. 서버, 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 모두 IP 주소라는 4개의 숫자로 이루어진 고유 주소가 있습니다. 하지만 이러한 숫자는 기억하기 어렵기 때문에 도메인 이름 시스템(DNS)을 통해 쉽게 도메인 이름으로 서버의 IP 주소를 찾을 수 있습니다. 빅스비 혹은 시리에게 '홍길동에게 전화해줘'라고 했을 때 '홍길동'은 DNS 조회를 수행하기 위한 도메인 이름이 되고 '홍길동'에 해당하는 전화번호가 IP 주소가 된다. ✏️ 1. 웹 브라우저에 URL을 입력하고 Enter 키 입력 https..

Computer Science 2023.03.14
1
728x90