FrontEnd/JavaScript

1.웹 어셈블리(WASM, WebAssembly)브라우저에서 실행되는 바이너리 코드 포맷으로, 웹 애플리케이션의 성능을 크게 향상시킬 수 있는 기술고수준 언어(예: C, C++, Rust 등)로 작성된 코드를 웹 브라우저에서 실행할 수 있는 효율적인 이진 형식으로 변환한다.자바스크립트에 비해 빠른 실행 속도를 가지기 떄문에 게임, 고성능 프로그램등을 웹에서 돌릴때 유용하다. https://developer.mozilla.org/ko/docs/WebAssembly/Concepts WebAssembly의 개념 - 웹어셈블리 | MDN이번 글에서는 WebAssembly의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 WebAssembly의 목표, WebAssembly가 해결할 수 있는 문제, 그리고 웹브라우저..

1.BOMHTML, XML 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 이 구조를 조작할 수 있도록 하는 인터페이스 1.BOM 객체window: 모든 BOM 객체의 최상위 객체 navigator: 브라우저 정보 제공  location: 현재 페이지 URL 정보 history: 브라우저의 방문 기록 관리 screen: 사용자의 화면 정보 제공 2.주요함수alert(message): 경고 메시지 창 표시 confirm(message): 확인 대화 상자 표시 prompt(message, default): 사용자 입력 받기 대화 상자 setTimeout(function, milliseconds): 일정 시간 후에 함수 실행 setInterval(function, milliseconds): 일정 간격으로 ..

1.Jquery를 AJAX사용한 GET요청Jquery를 통해 AJAX를 더 간단하게 작성할수있다.$.ajax({ url: '서버의_URL', // 요청할 URL type: 'GET', // 요청 방식 dataType: 'json', // 예상되는 응답 데이터 형식 success: function(response) { // 요청 성공 시 실행되는 콜백 함수 console.log(response); }, error: function(xhr, status, error) { // 요청 실패 시 실행되는 콜백 함수 console.error(error); }}); 만약 사용안했을경우 다음과같은 코드로 작성해야한다.var xhr ..

1. 헤더 설정XMLHttpRequest 객체를 사용하여 요청 헤더를 설정하려면 setRequestHeader 메서드를 사용하면 된다.XMLHttpRequest인스턴스.setRequestHeader(헤더이름, 헤더값);    2.요청(Request) 헤더예시다음 2개의 RequstHeader을 추가하고 개발자 도구 네트워크에서 확인하였다.function loadData2() { // XMLHttpRequest 인스턴스 생성 var xhr = new XMLHttpRequest(); // GET 요청을 JSONPlaceholder로 보냄 xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true); // 요청 헤더 설정 (여러 개 설정..

0.XMLHttpRequestAJAX 통신의 핵심 객체로, 브라우저와 서버 간에 데이터를 주고받을 수 있도록 해주는 JavaScript 객체이 객체를 사용하여 웹 페이지를 새로 고침하지 않고도 서버에 데이터를 요청하고, 서버로부터 받은 데이터를 처리할 수 있습니다.    1.XMLHttpRequest 사용1-1.XMLHttpRequest 객체 생성var 변수이름 = new XMLHttpRequest(); 형식으로 XMLHttpRequest객체를 생성합니다.var xhr = new XMLHttpRequest();  1-2.서버로 보낼 요청 설정 open()open() 메서드를 사용해 요청을 설정합니다. 이때 요청 메서드(GET, POST)와 서버의 URL, 비동기 여부를 지정할 수 있습니다.xhr.open..

1.AJAX(Asynchronous JavaScript and XML)웹 페이지를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 교환할 수 있게 해주는 기술이를 통해 사용자는 페이지를 보다 매끄럽고 빠르게 탐색할 수 있습니다.   2.AJAX 특징2-1.비동기적 데이터 요청AJAX를 사용하면 페이지의 일부만 업데이트할 수 있어 전체 페이지를 다시 로드할 필요가 없습니다. 사용자가 버튼을 클릭하거나 폼을 제출할 때, AJAX는 서버에 요청을 보내고 응답을 받습니다.   2-2.JavaScript와 XMLHttpRequestAJAX는 JavaScript를 사용하여 XMLHttpRequest 객체를 생성하고, 이를 통해 서버와 데이터를 주고받습니다.   2-3.데이터 형식초기에는 XML 형식의 데이터를 주..

1.SymbolSymbol은 ECMAScript 2015 (ES6)에서 도입된 새로운 원시 데이터 타입 중 하나입니다.Symbol은 주로 객체 속성의 고유한 식별자를 만들기 위해 사용됩니다. Symbol은 다른 데이터 타입과 달리 고유하고 변경 불가능한 값이며, 동일한 설명(문자열)을 사용해 생성된 Symbol이라도 서로 다른 고유 값을 가집니다.const mySymbol = Symbol();   2.Symbol 특징2-1.고유성Symbol은 항상 고유한 값을 가지므로, 같은 설명을 사용하여 생성된 Symbol도 서로 다릅니다.const sym1 = Symbol('description');const sym2 = Symbol('description');console.log(sym1 === sym2); //..

1.모듈JavaScript 모듈은 코드의 특정 기능을 독립된 단위로 캡슐화한 파일 또는 파일의 일부를 의미합니다. 모듈은 다른 코드와 독립적으로 작성되고 테스트되며, 필요에 따라 가져와서 사용할 수 있습니다. 이를 통해 코드의 재사용성과 유지 보수성을 높이고, 코드의 구조를 체계적으로 관리할 수 있습니다.   2. 사용이유2-1.독립성모듈은 독립된 파일로 존재하며, 각 모듈은 자체적인 스코프를 가집니다. 따라서 변수 이름이나 함수 이름이 겹치더라도 충돌이 발생하지 않습니다.  2-2.재사용성한 번 작성한 모듈은 여러 프로젝트에서 재사용할 수 있습니다. 2-3.캡슐화모듈 내의 구현 세부 사항은 외부에 노출되지 않으며, 오직 필요한 인터페이스만 공개됩니다.  2-4.의존성 관리모듈은 다른 모듈을 가져와서 사..