웹 스토리지

웹 스토리지 1. 웹 스토리지 웹 스토리지에 대해 알아보겠습니다. 웹 스토리지란? 웹 브라우저에서 데이터를 장시간 보관하기 위한 메커니즘입니다. 주로 두가지 유형이 있습니다. 로컬 스토리지(Local Storage) : 브라우저 종료 시에도 유지되는 데이터 세션 스토리지(Section Storage) : 새로 고침 시에도 유지되는 데이터 (같은 탭 내에서만) 웹 스토리지는 쿠키와 달리 요청 헤더에 포함되지 않고, 클라이언트에서만 조정 가능하며, 해당 URL에서만 접근 가능합니다. 2. 웹 스토리지 쓰기, 접근, 삭제 웹 스토리지 쓰기, 접근, 삭제 또한 로컬과 세션으로 나뉩니다. 웹 스토리지 쓰기는 다음과 같은 방법으로 사용합니다. // 1. 웹 스토리지 쓰기 // 로컬 스토리지 localStorage...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 25.
• textsms

쿠키 받아오기(Cookie)

쿠키 받아오기(Cookie) 1. 쿠키 받아오기 이번엔 브라우저 기능인 쿠키에 대해 알아보겠습니다. 쿠키(Cookie)란? 브라우저에 저장되는 작은 크기의 문자열을 뜻합니다. 주로 웹 브라우저에서 사용되며, 웹 서버에서 클라이언트로 전송되어 클라이언트의 로컬 컴퓨터에 저장됩니다. 2. 쿠키의 구성 쿠키의 구성은 다음과 같습니다. Name : 키 Value : 값 Domain : 사용하는 도메인 Path : 접근 경로 Expires / max-age : 쿠키 만료일 HttpOnly : HTTP외의 통신 허용 여부 Secure : 보안 설정 3. 쿠키 설정 쿠키를 설정하는 방법은 크게 두가지가 있습니다. 클라이언트 코드에서는 다음과 같습니다. document.cookie="name=juv; path=/; m..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 25.
• textsms

네트워크 요청

네트워크 요청 1. 네트워크 요청 네트워크 요청에 대해 알아봅시다. 네트워크 요청이란? 클라이언트가 서버에 데이터를 요청하거나 보내는 일련의 통신 과정을 말합니다. 2. Fetch API Fetch API는 JavaScript에서 네트워크 요청을 만들고 응답을 다루는 기능을 제공하는 기술입니다. 기존의 XMLHttpRequest 객체보다 더 간결하고 강력한 인터페이스를 제공하합니다. fetch 함수는 주로 다음과 같은 방식으로 사용합니다. fetch('URL', { method: 'POST', // method : 네트워크 요청의 종류 headers: { // headers : 서버에 부가적으로 전달할 정보를 넣음 Cookie: '', }, body: { // body : 데이터를 실어 보내는 필드 na..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 25.
• textsms

에러 핸들링(Error Handling)

에러 핸들링(Error Handling) 1. 에러 핸들링(Error Handling) 에러 핸들링에 대해 알아봅시다! 에러 핸들링(Error Handling)이란? 코드 실행 중 발생할 수 있는 예외 상황에 대응하는 방법입니다. 올바른 에러 핸들링은 애플리케이션의 안정성을 높이고, UX를 향상 시킵니다. 2. 사용방법 대표적인 에러 핸들링 DOM 이벤트는 다음과 같습니다. try { // 실행하려는 코드 } catch (error) { // error 객체 // 에러 발생 시, 실행할 코드 } finally { // 항상 실행할 코드 } 여기서 error 객체의 속성은 다음과 같습니다. Error { name : 에러명, message : 에러의 상세 내용, stack : 호출 스택, } 예를 들어 봅..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 24.
• textsms

이벤트(Event)

이벤트(Event) 1. 이벤트(Event) JavaScript에서 이벤트에 대해 알아봅시다! 이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다. 이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다. 이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다. 2. 이벤트 핸들러 종류 대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다. 1) click 요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다. 예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다. See the Pen Tistory_Front-End Study_JavaScript..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 24.
• textsms

브라우저 객체

브라우저 객체 1. 브라우저 객체 브라우저 객체에 대해 알아봅시다! 브라우저 객체란? 웹 브라우저 환경에서 사용할 수 있는 객체들을 말합니다. 이러한 객체들은 웹 페이지의 구조, 동작, 스타일 등을 조작하는 데 사용됩니다. 2. 브라우저 객체의 종류 주요한 브라우저 객체들은 다음과 같습니다. 1) Window 객체 모든 브라우저 객체의 최상위 객체로, 브라우저 윈도우를 나타냅니다. 전역 객체이기도 하며, 브라우저 창의 크기, 위치, 브라우저 히스토리, 타이머 등을 다룰 수 있습니다. window 객체의 속성은 다음과 같습니다. window { alert : 경고 메시지 출력 함수, confirm : 확인 메시지 출력 함수, prompt : 입력 메시지 출력 함수, setTimeout : n초 후에 함수를..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 24.
• textsms