프론트엔드/javascript26 History API History APIHistory API는 JavaScript에서 브라우저의 세션 기록을 조작하거나 탐색할 수 있는 기능을 제공합니다. 이 API는 브라우저의 주소(URL)와 기록을 변경하거나 관리하는 데 사용되며, 웹 애플리케이션의 페이지 전환을 더 부드럽고 자연스럽게 만들어 줍니다. 이를 통해 새로고침 없이 URL을 업데이트하거나 브라우저의 뒤로 가기/앞으로 가기 버튼을 제어할 수 있습니다.History API 주요 메서드와 속성history.pushState(state, title, url)새 기록 항목을 추가합니다.브라우저 주소(URL)를 변경하지만 페이지를 다시 로드하지 않습니다.예:history.pushState({ id: 1 }, 'Title', '/new-page');history.repl.. 2025. 1. 4. Fetch API Fetch APIFetch API는 JavaScript에서 네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 표준화된 인터페이스입니다. 주로 HTTP 요청을 보내 서버와 통신하거나 데이터를 가져오는 작업에 사용됩니다. 이전에 사용되던 XMLHttpRequest에 비해 더 직관적이고 간결한 문법을 제공합니다.특징Promise 기반:fetch는 Promise를 반환하므로, 비동기 작업을 간편하게 처리할 수 있습니다.async/await 문법과 함께 사용하기에 적합합니다.모듈화된 설계:요청과 응답을 Request와 Response 객체로 캡슐화하여 작업을 명확히 분리합니다.확장 가능성:다양한 옵션을 통해 HTTP 메서드, 헤더, 본문 등을 설정할 수 있습니다.기본 JSON 처리:응답 데이터를 JSON으로.. 2025. 1. 4. require requirerequire는 JavaScript에서 모듈을 가져오는 데 사용되는 함수로, 주로 Node.js 환경에서 사용됩니다. 이를 통해 다른 파일에서 정의된 코드나 외부 라이브러리를 현재 파일에 가져와 사용할 수 있습니다.기본 사용법const 모듈이름 = require('모듈경로');// 모듈이름 : 불러온 모듈을 저장할 변수// 모듈경로 : 불러오고자 하는 모듈의 경로. 내장 모듈, 로컬 파일, 또는 npm 패키지를 지정할 수 있음모듈의 종류내장 모듈 : Node.js에 기본적으로 포함된 모듈, fs http, path 등로컬 모듈 : 프로젝트 내에서 작성한 JavaScript 파일로, 상대 경로를 사용하여 불러옴npm 패키지 : npm을 통해 설치한 외부 라이브러리로, 패키지 이름만으로 불러올 .. 2025. 1. 3. PerformanceAPI PerformanceAPI Performance API는 웹 브라우저에서 애플리케이션의 성능을 측정하고 분석할 수 있도록 도와주는 API입니다. 이 API를 사용하면 페이지 로드 시간, 자원 로딩 시간, 사용자 인터랙션 지연 시간 등을 측정하여 성능 병목 현상을 파악할 수 있습니다.주요 구성 요소와 사용법Performance 인터페이스performance 객체를 통해 접근할 수 있습니다.performance.now(): 고해상도 타이머로 현재 시간을 밀리초 단위로 반환합니다.예: const start = performance.now();performance.timeOrigin: 페이지 로드가 시작된 기준 시간(Unix epoch)을 반환합니다.타이밍 데이터Navigation Timing:페이지 로드 성능.. 2024. 12. 31. Querystring QueryString QueryString(쿼리 문자열) 개념**QueryString(쿼리 문자열)**은 URL에서 데이터를 전달하기 위해 사용되는 문자열입니다. 이는 일반적으로 URL의 끝에 붙으며, ?로 시작하고, 여러 개의 키-값 쌍이 &로 연결되어 있습니다. 웹 애플리케이션은 QueryString을 사용하여 서버와 클라이언트 간 데이터를 주고받거나 특정 페이지를 동적으로 구성합니다.QueryString의 구조URL에서 QueryString은 다음과 같은 구조를 가집니다:https://example.com/page?key1=value1&key2=value2?: QueryString의 시작을 나타냄.key1=value1: 첫 번째 키-값 쌍.&: 여러 키-값 쌍을 구분.key2=value2: 두 번째.. 2024. 12. 29. jquery 확장 메서드 jquery 확장 메서드 [셀렉터를 이용한 확장 메소드] 문법 : $.fn.메소드명 사용방법 : $(selector).메소드명()$.fn.HTMLTagRestore = function(){ var value = this.val(); if(this.is("input") || this.is("textarea")){ this.val(value.replaceAll('a', 'A').replaceAll('b', 'B')); } return this; // 함수 체인 }; $("input").on('input',function(){ $(this).HTMLTagRestore(); }); $("input").HT.. 2024. 7. 6. 이전 1 2 3 4 5 다음
