bergerac 님의 블로그

1. 로컬 스토리지란?localStorage는 웹 브라우저가 제공하는 클라이언트 측 영구 저장소다. HTML5에서 도입된 이 API는 사용자의 컴퓨터에 데이터를 영구적으로 저장할 수 있게 해준다.데이터를 문자열로 저장브라우저를 껐다 켜도 데이터 유지쿠키보다 더 많은 용량을 저장 가능 (대부분 5MB 이상)서버로 전송되지 않아 보안성이 조금 더 우수2. 로컬 스토리지에 데이터 저장로컬 스토리지는 localStorage.setItem(key, value)를 통해 데이터를 저장한다. 저장 가능한 데이터는 문자열이어야 하며, 객체나 배열 같은 복잡한 구조는 **JSON.stringify()**로 변환해야 한다. // 기본 자료형 저장localStorage.setItem('username', 'bergerac')..

1. 쿠키란?웹 사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일이다. 쿠키를 통해 웹 서버는 사용자의 상태를 기억하고, 로그인 정보나 설정값, 방문 기록 등을 저장할 수 있다. 2. 쿠키의 구조하나의 쿠키는 다음과 같은 요소들로 구성된다.이름(Name): 각 쿠키의 식별자 역할값(Value): 쿠키에 저장할 정보 (문자열 형태)만료 날짜(Expires): 쿠키의 유효기간을 결정그 외에 선택적으로 아래와 같은 옵션들을 설정할 수 있다.경로(Path): 쿠키가 접근 가능한 경로 지정도메인(Domain): 쿠키가 유효한 웹사이트의 도메인Secure 플래그: HTTPS 연결에서만 전송HttpOnly 플래그: JavaScript에서 접근 불가, 서버만 접근 가능3. 쿠키의 한계 용량 제한: 보통 하나의 쿠..

프론트엔드 개발에서 클라이언트 측 저장소는 사용자 경험을 향상시키고, 서버 리소스를 절약하는데 매우 유용한 기술입니다.  클라이언트 측 저장소(Client-side Storage)란?클라이언트 측 저장소는 서버가 아닌 **사용자의 로컬 환경(브라우저)**에 데이터를 저장하는 기술입니다. 사용자의 컴퓨터나 모바일 장치에 직접 데이터를 저장함으로써 서버와의 불필요한 통신을 줄이고, 더 빠르고 효율적인 데이터 접근이 가능해집니다. 클라이언트측 저장소(Client-side Storage)의 주요 특징 퍼포먼스 개선 : 서버와의 통신 횟수와 필요성을 줄이기 때문에 응답 시간과 성능이 향상된다.오프라인 엑세스: 네트워크 연결이 없어도 데이터에 접근 가능사용자 경험 개선 : '개인설정이나 이전 상태를 저장'하여, 사..

에러란? 부정확하거나 유효하지 않은 동작을 의미한다.자바스크립트에서는 구문오류(SyntaxError)외의 대부분의 오류를 예외(Runtime Exception)라고 분류합니다.  🧨 예외의 종류 1. 구문 오류(Syntax Error)프로그램 실행 전에 발생문법이 언어의 정의된 규칙을 따르지 않을 때 발생// 예: 괄호 닫기 생략// console.log('프로그램이 시작되었습니다.'위와 같이 정의된 규칙을 따르지 않으면 실행이 되지 않으며 개발도중 IDE가 감지해주는 경우가 대부분임 2. 런타임오류(Runtime Error) 프로그램 실행 중에 발생예측 가능한 비정상적인 조건이나 예외적인 사건코드 실행 도중 오류가 발생하면 실행이 중단됨 // console.rog('log를 rog로 잘못 입력하였습니..

DOM이란?DOM은 Document Object Model의 약자입니다. 웹 페이지의 HTML 문서를 객체(Object)처럼 다룰 수 있도록 해주는 프로그래밍 인터페이스입니다.HTML의 각 요소는 JavaScript에서 객체로 인식됩니다. 이 객체들을 활용해 요소를 선택하고, 수정하고, 삭제하거나, 새롭게 생성하는 등 다양한 조작이 가능합니다. 쉽게 말해, JavaScript에서 HTML 요소를 **문서 객체(document object)**로 다룬다고 보면 됩니다.DOM 사용 방법OM은 기본적으로 다음과 같은 CRUD 작업에 사용됩니다:Create: 새로운 요소 생성Read: 기존 요소 선택 및 읽기Update: 요소의 내용이나 속성 수정Delete: 요소 삭제이러한 작업은 DOM에서 제공하는 메서드와..

async&awaitasync : 비동기 함수를 정의할 때 사용하는 키워드로 항상 Promise 객체를 반환함async function example() { return 'Hello'; // 자동으로 Promise.resolve('Hello')로 처리됨}await: Promise 가 처리될 때까지 기다림, async 함수 내부에서만 사용 가능async function getData() { let result = await fetch('https://api.example.com/data'); let json = await result.json(); console.log(json);}  async function fetchUserData() { let data = await fetch('https:..

Promise란?Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다.현재는 알 수 없지만, 미래에 결과가 생기는 **"약속된 값"**을 다루는 방식콜백 함수보다 가독성이 좋고 에러 처리도 쉬움Promise의 세 가지 상태대기(pending) : 비동기 작업이 아직 끝나지 않은 상태이행(fulfilled) : 비동기 작업이 성공적으로 완료되어 결과값을 반환한 상태거부(rejected) : 비동기 작업이 실패하여 에러를 반환한 상태 Promise 생성하기promise는 newPromise()생성자 함수를 통해 만들 수 있다.const myPromise = new Promise((resolve, reject) => { const condition = true; if (condition) {..

콜백함수란?콜백함수란 말 그대로 "다른 함수에 인자로 전달되어, 특정 시점에 호출되는 함수입니다.function greet(name) { console.log(`Hello, ${name}`);}function getUserInput(callback) { // 실제로는 prompt 등을 통해 사용자 입력을 받을 수 있음 // let name = prompt('이름을 입력해주세요.'); // callback(name);}getUserInput(greet);getUserInput() 함수는 callback이라는 파라미터를 받습니다.여기서 greet 함수가 콜백 함수로 전달되어, 내부 로직이 끝난 후 호출됩니다. 콜백을 이용한 비동기 요청 시뮬레이션function fetchUserDate(userId, ..

비동기란 무엇일까?비동기(asynchronous): 동시에 같은 시간에 실행되지 않는 것좀 더 쉽게 말하면, 특정 코드의 실행을 기다리지 않고 다음 코드를 바로 실행하는 방식이에요.❓왜 비동기 프로그래밍을 사용할까?시간 소요가 큰 작업 때문에 전체 프로그램이 멈추는 것을 막기 위해주로 네트워크 요청, 파일 입출력 등 오래 걸리는 작업에서 사용동기 프로그래밍의 예시console.log('== 동기 구현 ==');function work() { const start = Date.now(); // 시간이 오래 걸리는 작업이라고 가정 // for (let i = 0; i work() 함수가 끝날 때까지 다음 줄의 코드가 실행되지 않음작업이 끝나야 '동기 작업 완료 후 실행될 코드 블럭' 이 출력됨비동기 프..

모듈이란?JavaScript에서 모듈은 재사용 가능한 코드 조각을 의미합니다.(함수, 변수, 클래스, 전체파일 등) 하나의 기능이나 논리 단위를 별도의 파일로 분리하여 관리하고, 다른 파일에서 불러와 사용할 수 있게 해주는 방식이에요. 모듈화를 통해 코드의 가독성, 유지보수성, 재사용성이 높아집니다. 모듈의 특징 독립성각각의 모듈은 자체적인 스코프(scope)를 가지며 독립적으로 동작합니다.재사용성한 번 정의한 모듈은 여러 파일에서 import 하여 사용할 수 있어요.네임스페이스 관리모듈은 별도의 이름 공간을 가지므로, 변수나 함수 이름이 충돌하지 않습니다.스코프 격리모듈 내에서 선언된 변수나 함수는 기본적으로 외부에서 접근할 수 없습니다. 필요 시 export 키워드로 외부에 공개합니다.ES6 모듈 시..