웹 개발에서 클라이언트와 서버 환경에서 활용할 수 있는 대표적인 저장 방식에는 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 그리고 쿠키(Cookies)가 있습니다. 이 중 로컬 스토리지와 쿠키는 용도와 동작 방식이 뚜렷하게 다르기 때문에, 각각의 특성을 정확히 이해하는 것이 중요합니다.로컬 스토리지란 무엇인가?로컬 스토리지는 여러 브라우저 창에 걸쳐 데이터를 공유할 수 있고, 현재 세션이 종료된 이후에도 데이터가 계속 유지되도록 설계된 저장소입니다. 특히 웹 애플리케이션은 성능상의 이유로
JavaScript에서 발생한 이벤트를 확인하는 방법웹 개발을 하다 보면 특정 요소에서 어떤 JavaScript 이벤트가 실제로 발생하는지 확인해야 할 때가 있습니다. 이 글에서는 구글 크롬(Google Chrome) 브라우저의 개발자 도구를 활용해 발생한 이벤트를 추적하는 방법을 단계별로 소개합니다.1. 개발자 도구(DevTools) 열기구글 크롬을 실행한 후 F12 키를 눌러 개발자 도구(Dev Tools)를 엽니다. 페이지에서 마우스 오른쪽 버튼을 클릭한 뒤 검사를 선택해도 동일하게 열 수 있습니다.2. Sources 탭으로
쿠키에 만료 날짜를 지정하고 그 만료 시각을 쿠키 내부에 함께 저장하면, 현재 브라우저 세션이 종료된 이후에도 쿠키의 수명을 연장할 수 있습니다. 이는 expires 속성에 원하는 날짜와 시간을 설정하는 방식으로 구현됩니다.동작 원리핵심은 현재 시간에 원하는 유지 시간(밀리초 단위)을 더해 만료 시점을 계산하는 것입니다. 예를 들어 30분은 30 × 60 × 1000 밀리초이며, Date 객체의 setTime() 메서드를 사용해 이 값을 더한 뒤 toUTCString()으로 변환하여 쿠키의 expires 속성에 저장합니다.예제아래
Google Chrome의 자바스크립트 콘솔에 디버그 메시지를 출력하려면 console 객체가 제공하는 로깅 함수를 사용하면 됩니다. 다만 구형 브라우저처럼 콘솔 기능이 존재하지 않는 환경에서 오류가 발생하지 않도록, 먼저 콘솔 객체의 존재 여부를 확인하는 안전장치 코드를 작성하는 것이 좋습니다.콘솔 미지원 환경을 위한 안전장치 코드아래 스크립트는 브라우저에 콘솔 기능이 없을 경우 빈 객체와 함수를 대신 정의하여 오류 없이 실행되도록 만들어 줍니다.if (!window.console) console = {}; console.log
JavaScript에서는 document.cookie 속성을 사용하면 쿠키에 아주 간단하게 접근하고 값을 읽어올 수 있습니다. document.cookie 객체의 값 자체가 곧 쿠키이기 때문에, 쿠키를 읽는 작업은 쿠키를 생성(쓰기)하는 것만큼이나 쉽습니다. document.cookie 문자열의 구조 document.cookie가 반환하는 문자열은 세미콜론(;)으로 구분된 name=value 쌍들의 목록 형태를 가집니다. 여기서 name은 쿠키의 이름을, value는 해당 쿠키의 문자열 값을 의미합니다. 예를 들어 쿠키가 두 개
기본 매개변수(Default Parameters)란?자바스크립트에서 기본 매개변수(Default Parameters)는 함수를 더욱 유연하고 간결하게 작성할 수 있도록 도와주는 ES6(ES2015) 문법입니다. 함수 호출 시 인수가 전달되지 않거나 undefined가 전달될 경우, 해당 매개변수는 미리 지정해 둔 기본값으로 자동 초기화됩니다. 덕분에 함수 내부에서 일일이 값의 존재 여부를 검사하는 번거로움 없이 안전하게 코드를 작성할 수 있습니다.기본 매개변수 사용 예제아래 예제는 두 수를 더하는 함수에서 증가값(inc)의 기본값을
CSS로 배경 이미지 설정하기웹 페이지에 배경 이미지를 설정하려면 CSS 스타일을 사용해야 합니다. CSS의 <style> 태그 안에 background-image 속성을 추가하면 되며, 이 속성을 통해 jpg, png, svg, gif 등 다양한 형식의 그래픽 파일을 배경으로 지정할 수 있습니다.참고로 HTML5에서는 더 이상 <body> 태그의 background 속성을 공식적으로 지원하지 않습니다. 따라서 과거처럼 HTML 속성으로 배경을 지정하는 대신, 반드시 CSS를 사용해 배경 이미지를 설정해야 합니
JavaScript에서 오류 콘솔에 메시지를 출력하려면 console 객체를 사용하면 됩니다. console 객체는 다양한 종류의 메시지를 브라우저 개발자 도구 콘솔에 표시할 수 있는 여러 메서드를 제공합니다.1. 오류 메시지 출력콘솔에 빨간색으로 표시되는 오류 메시지를 출력하려면 console.error()를 사용합니다.console.error(message);2. 기본 로그 메시지 출력가장 일반적으로 사용되는 기본 메시지 출력 방법은 console.log()입니다.console.log(message);3. 경고 메시지 출력노란색
JavaScript로 콘솔에 유니코드 문자 출력하기유니코드(Unicode)에는 13만 개가 넘는 방대한 수의 문자가 포함되어 있습니다. 한글, 한자, 이모지부터 각종 특수 기호까지 다양한 문자를 웹 환경에서 문제없이 표시하려면, 문자 인코딩을 올바르게 설정하는 것이 무엇보다 중요합니다.1. meta 태그로 문자셋(charset) 지정하기HTML 문서에서 콘솔에 유니코드 문자를 정상적으로 출력하려면, <head> 태그 안의 <meta> 태그를 사용해 문자셋을 UTF-8로 설정해야 합니다.<meta chars
img 태그의 기본 개념 웹페이지에서 이미지를 표시하려면 <img> 태그를 사용합니다. 이 태그에는 이미지 소스(src), 대체 텍스트(alt), 가로 크기(width), 세로 크기(height) 등 다양한 속성을 지정할 수 있습니다. src는 불러올 이미지의 URL을 지정하는 속성이며, alt는 대체 텍스트 속성으로 이미지가 정상적으로 로드되지 못했을 때 화면에 표시되는 문구입니다. 시스템 드라이브 경로를 src로 지정하기 HTML에서는 이미지 소스를 시스템 드라이브의 파일 경로로 직접 지정할 수 있습니다. 이 경우
HTML에서 텍스트를 굵게(bold) 표시하려면 <b>...</b> 태그 또는 <strong>...</strong> 태그를 사용할 수 있습니다. 두 태그 모두 텍스트를 굵게 만든다는 동일한 시각적 결과를 제공하지만, 그 의미와 용도에는 중요한 차이가 있습니다.<b> 태그와 <strong> 태그의 차이점<strong> 태그는 단순히 굵게 표시하는 것을 넘어, 해당 텍스트에 의미론적(semantics)으로 강한 중요성을 부여합니다. 검색 엔진과 스크린 리더 같은
웹 개발에서 쿠키(Cookie)는 사용자 정보를 브라우저에 저장하고 필요할 때 다시 불러오는 데 사용되는 핵심 기술입니다. 이 글에서는 JavaScript를 활용해 쿠키를 생성하는 방법과 저장된 쿠키 값을 읽어오는 방법을 실제 코드 예제와 함께 자세히 알아보겠습니다. 쿠키 생성하기 JavaScript에서 쿠키를 만드는 가장 간단한 방법은 document.cookie 객체에 문자열 값을 할당하는 것입니다. 기본 형식은 다음과 같습니다. document.cookie = key1=value1;key2=value2;expires=date;
문자열을 JavaScript 함수 호출로 변환하기JavaScript에서는 문자열 형태의 함수 이름을 실제 함수 호출로 변환해야 하는 경우가 종종 있습니다. 가장 간단하고 널리 사용되는 방법은 전역 객체인 window를 활용하는 것입니다. 브라우저 환경에서 전역으로 선언된 함수는 window 객체의 속성으로 등록되기 때문에, 대괄호 표기법([])을 사용하면 문자열로 된 함수 이름으로 함수를 실행할 수 있습니다.예제 코드아래 예제는 문자열 변수에 담긴 함수 이름을 이용해 실제 함수를 호출하는 방법을 보여줍니다.<html> &
자바스크립트에서 모든 객체는 자신의 프로토타입(prototype)으로부터 속성과 메서드를 상속받습니다. 예를 들어 new Object()로 생성한 객체는 Object.prototype을 상속받고, new Date()로 생성한 객체는 Date.prototype을 상속받습니다.이러한 프로토타입 기반 상속은 자바스크립트의 핵심 개념으로, 객체가 직접 속성을 가지고 있지 않더라도 프로토타입 체인(prototype chain)을 따라 상위 객체에서 해당 속성이나 메서드를 찾아 사용할 수 있게 해줍니다.생성자 함수와 프로토타입 활용 예제아래
쿠키(Cookie)란 무엇인가?웹 브라우저와 서버는 HTTP 프로토콜을 통해 통신하는데, HTTP는 상태를 유지하지 않는(stateless) 프로토콜입니다. 즉, 요청이 끝나면 서버는 사용자에 대한 어떠한 정보도 기억하지 못합니다.하지만 상업적인 웹사이트라면 여러 페이지에 걸쳐 로그인 상태, 장바구니 내역 등 세션 정보를 지속적으로 유지해야 합니다. 바로 이런 문제를 해결하기 위해 쿠키(Cookie)가 사용됩니다.쿠키는 사용자의 환경 설정, 구매 기록, 커미션 정보 등 방문자 경험 향상이나 사이트 통계 분석에 필요한 다양한 정보를
쿠키를 활용하면 사용자의 환경 설정, 구매 내역, 커미션 정보 등 방문자 경험을 개선하거나 사이트 통계를 분석하는 데 필요한 다양한 정보를 효율적으로 저장하고 추적할 수 있습니다.쿠키 생성의 기본 원리JavaScript에서 쿠키를 만드는 가장 간단한 방법은 document.cookie 객체에 문자열 값을 할당하는 것입니다. 기본 형식은 다음과 같습니다.document.cookie = key1=value1;key2=value2;expires=date;여기서 expires 속성은 선택 사항입니다. 이 속성에 유효한 날짜나 시간을 지정하
때로는 쿠키를 삭제하여, 이후에 해당 쿠키를 다시 읽으려고 할 때 아무런 값도 반환되지 않도록 처리해야 할 경우가 있습니다. 자바스크립트에서 쿠키를 삭제하는 방법은 의외로 간단합니다. 바로 쿠키의 만료 날짜(expiry date)를 과거 시점으로 설정하면 되는데, 이렇게 하면 브라우저가 해당 쿠키를 즉시 만료된 것으로 판단하여 자동으로 제거합니다.쿠키 삭제의 기본 원리쿠키는 생성 시점에 expires 속성에 지정된 만료일까지 브라우저에 저장됩니다. 따라서 같은 이름의 쿠키를 다시 설정하면서 만료 날짜를 현재보다 이전 시간으로 지정하
쿠키는 기본적으로 브라우저 세션이 종료되면 함께 사라집니다. 하지만 쿠키에 만료 날짜(expiration date)를 직접 저장하면 현재 브라우저 세션이 끝난 후에도 쿠키의 수명을 연장할 수 있습니다.이를 위해서는 쿠키 문자열에 expires 속성을 추가하고, 원하는 날짜와 시간을 값으로 지정하면 됩니다. 만료 날짜가 지나기 전까지는 브라우저가 해당 쿠키를 계속 유지합니다.예제 코드아래 예제는 쿠키의 만료 날짜를 현재 시점으로부터 1개월 후로 설정하는 방법을 보여줍니다. 사용자가 이름을 입력하고 버튼을 클릭하면 쿠키가 생성됩니다.&
JavaScript에서 쿠키를 삭제하는 핵심 원리는 간단합니다. 쿠키의 만료 날짜(expiration date)를 과거 시점으로 설정하면 브라우저가 해당 쿠키를 자동으로 제거합니다.쿠키 삭제의 기본 원리JavaScript는 document.cookie 속성을 통해 쿠키에 접근할 수 있습니다. 쿠키를 생성할 때와 마찬가지로, 삭제할 때도 동일한 이름으로 쿠키를 다시 설정하되 expires 옵션에 이미 지난 날짜를 지정하면 됩니다. 그러면 브라우저는 해당 쿠키가 만료되었다고 판단하여 저장소에서 즉시 삭제합니다.예제 코드아래 예제는 사용
JavaScript에서 날짜를 다룰 때는 다양한 표기 형식을 이해하는 것이 중요합니다. Date 객체는 국제 표준 형식부터 일상적으로 사용되는 짧은 형식까지 여러 가지 방식으로 날짜를 표현할 수 있습니다.JavaScript의 주요 날짜 형식JavaScript가 따르는 대표적인 날짜 형식은 다음과 같습니다.날짜 유형형식ISO Date (국제 표준)2017-11-29Short Date (짧은 형식)11/29/2017Long Date (긴 형식)29 Nov 2017Full Date (전체 형식)Wednesday November 29 20