hanker

웹 개발을 하면서 자주 사용하는 요소를 보이게 하거나 숨기게하는 방법에 대해서 알아보자. 1. style.display 속성// modBtn ID 값을 가진 요소 숨기기document.getElementById('modBtn').style.display = 'none';// modBtn ID 값을 가진 요소 보이기document.getElementById('modBtn').style.display = 'block';// modBtn ID 값을 가진 요소를 원래 display 값으로 복원document.getElementById('modBtn').style.display = '';장점간단하고 직관적완전히 레이아웃에서 제거됨단점원래 display 값을 기억해야 함갑작스러운 변화로 자연스럽지 않음 2. st..

JavaScript를 사용하면서 혼란스러운 개념인 ==과 ===의 차이를 한번 알아보자. ==, ===의 차이 == : 느슨한 비교타입 변환을 수행한 후 값을 비교서로 다른 타입이어도 변환 후 같은 값이면 true를 반환abstract equality 라고도 불린다.null과 undefined를 동시에 체크할 때 유용 === : 엄격한 비교타입과 값을 모두 비교타입이 다르면 무조건 false 반환타입 변환을 수행하지 않음성능이 ==보다 빠르지만(타입 변환 과정 생략) 미미 예시 // 같은 타입, 같은 값console.log(5 === 5); // trueconsole.log("hello" === "hello"); // true// 다른 타입, 같은 값console.log(5 == "5");..

Axios는 JavaScript에서 가장 많이 사용되는 HTTP 클라이언트 라이브러리 중 하나이다.Promise 기반으로 동작하며, 브라우저와 Node.js 환경 모두에서 사용할 수 있어 많은 개발자들이 선호하는 도구이다. 1. Axios Axios는 XMLHttpRequest와 Fetch API를 기반으로 한 Promise 기반 HTTP 클라이언트이다.RESTful API와의 통신을 위해 설계되었으며, 요청과 응답을 간편하게 처리할 수 있도록 도와준다. 자동 JSON 변환: 요청과 응답 데이터를 자동으로 JSON으로 변환해준다.요청 및 응답 인터셉터: 요청을 보내기 전이나 응답을 받은 후에 데이터를 가공할 수 있다.타임아웃 설정: 요청에 대한 타임아웃을 쉽게 설정할 수 있다.광범위한 브라우저 지원: ..

JavaScript의 Fetch API는 네트워크 요청을 위한 인터페이스이다.XMLHttpRequest를 대체하여 더 간단하고 유연한 방법으로 HTTP 통신을 할 수 있게 해준다. 1. fetch API 지원 브라우저 fetch API는 웹 브라우저에서 제공하는 네이티브 JavaScript API로, 서버와의 HTTP 통신을 Promise 기반으로 처리할 수 있게 해준다.IE를 제외한 모든 브라우저에서 지원 2. fetch API 사용 방법 2-1. GET 방식 구현// 기본 GET 요청 - Promise 체인 방식// jsonplaceholder는 샘플 데이터를 제공하는 무료 온라인 REST API fetch('https://jsonplaceholder.typicode.com/posts/1') ...

JavaScript에서 서버와 데이터를 주고받는 비동기 통신 방법들을 알아보자. 1. XMLHttpRequest XMLHttpRequest는 JavaScript에서 비동기 HTTP 요청을 보내는 가장 기본적인 방법이다.모든 브라우저에서 지원된다. 라이브러리 추가 필요: 없음const xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(da..

JavaScript에서 문자열 안에서 소괄호 (), 중괄호 {}, 대괄호 []로 감싸진 내용만 추출하는 기능 "Hello (world), welcome to {JavaScript} and [coding]!"위와 같은 문자열에서 괄호 안에 문자열들을 추출하고 싶을 때에 JavaScript에서 정규식을 이용하여 추출하면 쉽게 추출이 가능하다.1. 정규식 패턴 괄호종류정규식 패턴소괄호()/\((.*?)\)/g중괄호{}/\{(.*?)\}/g대괄호[]/\[(.*?)\]/g .*? 는 non-greedy(최소 일치) 패턴을 의미하고 가장 안쪽 괄호부터 잡아낸다.  2. JavaScript 함수 생성function extractByBrackets(text, type) { const regexMap = { ro..

JavaScript 및 jQuery에서 박스의 선택된 옵션을 초기화하거나 변경하는 방법에 대해서 알아보자. 1. JavaScript로 select 박스 선택값 초기화 및 변경 1-1. 선택값 초기화 (첫 번째 옵션 선택)document.getElementById("mySelect").selectedIndex = 0;- selectedIndex = 0 을 설정하면 첫 번째 옵션이 선택된다.  1-2. 선택값 변경 (특정 값 선택)document.getElementById("mySelect").value = "";- select.value = "값"을 설정하면 특정 값을 가진 옵션이 선택된다.  1-3. 모든 선택값 초기화 (기본 선택 없음)document.getElementById("mySelect")...

페이지에서 입력폼에 엔터 키를 눌러 저장, 검색 등 각종 이벤트 처리를 하는데, JavaScript에서 Enter Key 이벤트 처리방법에 대해서 알아보자. 1. keyup 이벤트 엔터키 감지 (전역) document.addEventListener("keyup", function(event) { if (event.key === "Enter") { console.log("Enter key released!"); }}); - 사용자가 Enter 키를 눌렀다가 뗄 때 (keyup) 이벤트가 실행- event.key === "Enter" 조건을 사용하여 엔터 키를 감지   2. 특정 입력 필드에서 엔터 키 감지 (input 또는 textarea) document.getElementById..

Single Thread 방식으로 실행되는 JavaScript에서 비동기 처리방법은 Promise와 async / await 가 있다. 이번 글에서는 매일 써도 어려운 비동기 프로그래밍에 대해서 알아보자. 1. 비동기 프로그래밍이란? JavaScript는 싱글 스레드 기반 언어이기 때문에 한 번에 하나의 작업만 실행이 가능하다.예외로 네트워크 요청, 파일 읽기, 타이머 같은 작업은 비동기 방식으로 실행된다.// 동기 코드 (순차 실행)console.log("Start");console.log("Processing...");console.log("End");// -- 출력 결과 --// Start// Processing...// End// 비동기 코드 (비순차 실행)console.log("Start");s..

이번 글에서는 JavaScript의 동작 원리를 깊이 이해하는 데 필수적인 개념인 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)에 대해 다뤄보자.이 개념을 이해하면 JavaScript의 호이스팅, 스코프, 클로저, 비동기 처리 등의 동작 방식을 보다 명확하게 파악할 수 있다. 1. 실행 컨텍스트란? 실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 의미한다.코드가 실행되는 동안 변수, 함수, this의 값 등을 추적하며, JavaScript 엔진이 코드를 실행하는 방식을 결정한다. * 실행 컨텍스트의 주요 역할 * - 코드 실행을 위한 환경 생성- 변수와 함수 선언 저장- 스코프와 this를 관리- 호이스팅 처리 2...