bergerac 님의 블로그

JavaScript WebStorage(Client-Side Storage)

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

JavaScript 예외처리

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

JavaScript - DOM(Document Object Model)

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() 함수가 끝날 때까지 다음 줄의 코드가 실행되지 않음작업이 끝나야 '동기 작업 완료 후 실행될 코드 블럭' 이 출력됨비동기 프..

https://bergerac.tistory.com/35 SQLD 3일 도전기이전에 접수해 놓았던... sqld 접수 관련 문자메시지가 왔다. 접수만 해놓고 정말정말정말 까맣게 잊고 있다가 4일전에 문자메시지가 와서 깨닫게 된 접수사실..! 어제 문자가 왔는데 어제는 몸bergerac.tistory.com 여기서 SQLD 3일 도전을 했고!!! 결과가 나왔다.결과는 합격! 3일동안 저녁 10시까지 남아서 3일만에 해당 책을 2회독 했다!! 책이 14일 분량이었는데 하루 day 5 까지 하니까 할만했다! 결과는 완전 턱걸이 합격! 사실 시험보면서 62점은 무조건 맞는 문제여서 합격은 확신했고 찍은거 중에 그래도 몇개는 맞았겠지.. 했는데 찍은거 19문제 중에서 한문제 맞았다니... 난 찍신이 강림하지는 않..

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

객체의 속성 존재 여부 확인하기조건문+ undefinedlet obj = { name: 'bergerac' };if (obj.name !== undefined) { console.log(obj.name);} else { console.log('name 속성 X');}논리연산자 활용obj.name || console.log('name 없음'); // 출력 Xobj.hobby || console.log('hobby 없음'); // hobby 없음obj.name && console.log('이름 있음'); // 이름 있음삼항 연산자로 기본값 설정obj.nickname = obj.nickname ? obj.nickname : '임시 닉네임';console.log(obj.nickname); // "임시..