전체 글 41

웹 스토리지 이해하기

들어가며 이번 시간에는 웹 애플리케이션에서 클라이언트 사이드에 데이터를 저장하는 메커니즘인 웹 스토리지에 대해 알아보도록 하겠습니다. 웹 스토리지가 뭐지? 웹 스토리지(Web Storage)는 웹 브라우저에서 제공하는 두 가지 종류의 스토리지, 즉 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage)를 총체적으로 일컫는 용어입니다. 이들은 각각 클라이언트 사이드에서 데이터를 저장하는 방법에 따라 다르게 동작합니다. 로컬 스토리지(Local Storage) 로컬 스토리지는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 유지되는 영구 저장소입니다. 데이터가 서버로 전송되지 않습니다. 세션 스토리지(Session Storage) 세션 스토리지는 로컬 스토리지와 유사..

Web 2024.03.05

HTTP 세션 이해하기

들어가며 지난 포스팅에서는 웹에서 클라이언트의 상태를 관리하는 방법 중 하나인 HTTP 쿠키에 대해 알아보았습니다. HTTP 쿠키 이해하기 들어가며 '쿠키(Cookie)'라는 단어를 들으면 뭐가 떠오르시나요? 바삭바삭한 과자? 아쉽게도 오늘 알아볼 쿠키는 과자가 아니라 웹사이트에서 사용되는 쿠키입니다. 대체 이 쿠키가 무엇이고 왜 yepchani.tistory.com 이번 포스팅에서는 쿠키와 밀접하게 관련된 또 다른 기술인 '세션'에 대해 알아보겠습니다. 세션이란 세션은 서버가 사용자(클라이언트)를 식별하고 상태 정보를 저장하는 기술입니다. HTTP는 stateless(상태 정보를 유지하지 않는) 프로토콜이므로, 사용자의 상태 정보를 유지하기 위한 별도의 메커니즘이 필요한데요. 이 때 사용될 수 있는 방..

Web 2024.02.20

HTTP 쿠키 이해하기

들어가며 '쿠키(Cookie)'라는 단어를 들으면 뭐가 떠오르시나요? 바삭바삭한 과자? 아쉽게도 오늘 알아볼 쿠키는 과자가 아니라 웹사이트에서 사용되는 쿠키입니다. 대체 이 쿠키가 무엇이고 왜 필요한 지 궁금한 적 없으셨나요? 이번 시간에는 바로 그 쿠키에 대해서 알아보도록 하겠습니다. 쿠키가 뭐지? "쿠키"라는 이름은 "매직 쿠키"라는 용어에서 유래되었습니다. 매직 쿠키는 컴퓨터 프로그램이나 시스템 간에 전달되는 정보의 일부로, 특정 목적을 위해 사용되는 데이터를 가리키는데요. 웹에서의 쿠키(HTTP cookie, web cookie, browser cookie, cookie)도 이와 비슷한 개념으로, 서버가 클라이언트(대개 웹 브라우저)에 전송하는 작은 데이터 파일입니다. HTTP는 stateless..

Web 2024.02.13

REST API? 그게 뭔가요?

들어가며 API(Application Programming Interface)는 각종 애플리케이션에서 데이터를 주고받는 중요한 수단입니다. 이러한 API를 구현하는 방법 중 하나가 REST API인데요. 이번 시간에는 REST API가 무엇인지, 그리고 어떻게 동작하는지에 대해 가볍게 알아보도록 하겠습니다. REST가 뭔데? REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처 스타일입니다. REST 아키텍처는 다음 6가지 제약 조건이 있습니다. 인터페이스 일관성 (Uniform Interface) 클라이언트와 서버 사이의 인터페이스를 정의하며, 아키텍처를 단순화하고 분리합니다. Uniform Interface에는..

Web 2024.02.06

HTTP에 대해 알아보자

들어가며 이번 시간에는 웹 기반 커뮤니케이션의 표준으로 널리 채택되어 사용되고 있는 HTTP에 대해 알아보도록 하겠습니다. HTTP란? HTTP(HyperText Transfer Protocol)란 웹 상에서 클라이언트와 서버 간에 정보를 주고받는 방식을 정의한 프로토콜(규약)입니다. 웹 브라우저(클라이언트)가 웹 서버에 정보를 요청하고, 웹 서버가 해당 요청에 대한 응답을 반환하는 과정에서 사용됩니다. HTTP의 작동 방식 HTTP는 클라이언트가 서버에 요청(request)을 보내며 시작합니다. 이 요청은 HTTP 메서드를 포함하며, 이 메서드는 클라이언트가 수행하고자 하는 작업을 서버에 알려줍니다. 서버는 이 요청을 받아 처리한 후, 클라이언트에게 응답(response)을 반환합니다. 이 응답에는 H..

Web 2024.01.30

React의 라이프 사이클을 이해해보자

들어가며 react는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반으로 동작하는데요. 이러한 컴포넌트들은 각자의 라이프 사이클(생명 주기)을 가지고 있습니다. 이번 시간에는 react의 라이프 사이클에 대해 알아보겠습니다. 라이프 사이클이란? 라이프 사이클은 컴포넌트가 생성되어 화면에 나타나는 순간부터, 변화가 일어나고, 마침내 화면에서 사라지는 순간까지의 전 과정을 말합니다. 사람의 생애처럼, 컴포넌트도 태어나고, 성장하며 변화하고, 마침내는 사라집니다. 이러한 과정 중에서 각 단계별로 특정한 작업을 수행할 수 있도록 도와주는 것이 라이프 사이클 메서드입니다. react 컴포넌트의 라이프 사이클은 크게 세 가지 단계로 나눌 수 있는데요. 마운트(Mounting), 업..

React 2024.01.11

트라이(Trie) - 효율적인 문자열 검색을 위한 자료구조

들어가며 각종 웹 서비스와 애플리케이션에서는 사용자의 검색어 입력에 대해 빠르게 응답해야 합니다. 이러한 요구를 충족시키는 데 효과적인 자료구조 중 하나가 바로 '트라이(Trie)'입니다. 이번 시간에는 트라이 자료구조에 대해서 알아보겠습니다. 트라이가 뭔데? 트라이는 문자열의 집합을 저장하고, 주어진 문자열을 빠르게 찾는 데 특화된 트리 기반의 자료구조입니다. 각 노드는 문자를 저장하며, 루트에서 어떤 노드까지의 경로를 따라 내려가며 만나는 문자들을 모으면 해당 경로에 대응되는 문자열을 얻을 수 있습니다. 예를 들어 문자열이 'be', 'bee', 'bar', 'car', 'cat'인 경우 트라이의 구조는 다음과 같습니다. root / \ b c /| | e a a | | / \ e r r t 그래서 ..

Data Structure/Trie 2023.12.22

BOJ 14426 접두사 찾기

문제 14426번: 접두사 찾기 문자열 S의 접두사란 S의 가장 앞에서부터 부분 문자열을 의미한다. 예를 들어, S = "codeplus"의 접두사는 "code", "co", "codepl", "codeplus"가 있고, "plus", "s", "cude", "crud"는 접두사가 아니다. 총 N개의 문자 www.acmicpc.net 예시 코드 class TrieNode { constructor() { this.children = {}; this.isTerminal = false; } } class Trie { constructor() { this.root = new TrieNode(); } insert(key) { let node = this.root; for (let i = 0; i < key.len..