Yepchani's place

들어가며개발과 관련된 일을 하다 보면 JSON 형식을 많이 보셨을 텐데요. 이번 시간에는 JSON이 무엇인지에 대해 알아보도록 하겠습니다. JSON이 뭔가요?JSON(JavaScript Object Notation)은 키-값 쌍을 기반으로 구조화된 데이터를 나타내는 텍스트 형식입니다. 아래와 같이 나타냅니다.{ "name": "Leo Kim", "age": 30, "isStudent": false, "languages": ["Korean", "English"], "address": { "street": "123 St", "city": "Seoul", }}  사용가능한 데이터 타입은 아래와 같습니다.StringNumberBooleannullArray..

들어가며오늘날 웹사이트에는 많은 사용자들이 방문합니다. 이들을 식별할 수 있다면 웹사이트를 운영하는 데 있어 큰 도움이 될 수 있습니다. 그런데 로그인 정보나 쿠키의 도움 없이 사용자들을 어떻게 식별할 수 있을까요? 이번 시간에는 이를 가능케 하는 브라우저 핑거프린팅(Browser fingerprinting) 기술에 대해 알아보겠습니다. 브라우저 핑거프린팅이란?브라우저 핑거프린팅이란 웹사이트가 브라우저와 기본 운영체제의 구별되는 특징들을 수집하고 결합해 특정 브라우저(더 나아가 특정 사용자)를 식별하는 방식인데요. 간단히 말해 웹 사용자의 디지털 지문을 만들어낸다고 볼 수 있습니다. 브라우저 핑거프린트는 주로 자바스크립트를 통해 수집이 이루어지는데요. 대표적인 브라우저 핑거프린팅 라이브러리인 Finger..

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

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

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

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

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

들어가며 웹 개발에 있어서 렌더링은 웹 페이지의 HTML, CSS, JavaScript 등을 해석하여 사용자가 보는 최종적인 화면을 생성하는 과정을 의미합니다. 이번 글에서는 CSR(Client Side Rendering), SSR(Server Side Rendering), 그리고 SSG(Static Site Generation)라는 세 가지 주요 렌더링 방식에 대해 알아보겠습니다. CSR (Client Side Rendering) CSR은 클라이언트(브라우저)에서 자바스크립트를 이용해 동적으로 페이지를 렌더링하는 방식입니다. 작동 방식 사용자가 웹 페이지에 접속하면 서버로부터 최소한의 HTML과 모든 자바스크립트 파일을 받아옵니다. 브라우저에서 자바스크립트가 실행되며 필요한 데이터를 API를 통해 받아..