본문 바로가기

Basic Programming/javascript

 (17)
#03 구조분해 할당(Destructuring Assignment) 구조분해 할당(Destructuring Assignment)JavaScript에서 배열이나 객체의 값을 쉽게 꺼내서 변수에 할당할 수 있는 문법.복잡한 데이터 구조를 간단하게 분해해서 사용할 수 있게 해주는 도구! 배열의 구조 분해 할당let numList = [1, 2, 3];let [a, b, c] = numList;console.log(a, b, c);let [a2, b2] = numList;console.log(a2, b2); // 사용하고싶은거만 나열let [a3, b3, c3, d3] = numList;console.log(a3, b3, c3, d3); // 없는값을 undefinedlet [a4, b4, c4, d4 = 4] = numList;console.log(a4, b4, c4, d4)..
#02 단락 평가(short-circuit evaluation) 자바스크립트의 단락 평가(short-circuit evaluation)논리 연산자(||, &&)를 사용할 때 앞의 피연산자만으로 결과를 결정할 수 있으면 뒤는 평가하지 않는 것을 말한다.이는 성능 최적화뿐 아니라, 조건부 실행 로직으로도 자주 활용된다. and 는 하나라도 false면 false가되고or 는 하나라도 true면 true가 되는 특징을 이용해서 and 연산중 false가 나오면 바로 연산을 멈추고 완료시킨다.or 도 연산중 true가 나오면 바로 연산을 멈추고 완료시킨다. 예를 들면 let = a() && b() && c();function a() { console.log("a를 호출.."); return true;}function b() { console.log("b를 호출.."); re..
#01 Truthy와 Falsy Truthy와 Falsy자바스크립트에서 Truthy(트루시)와 Falsy(펄시)는 값이 불리언(Boolean)으로 변환될 때 참인지 거짓인지를 나타내는 개념이다.이건 문법이 아니라 자바스크립트의 동작 방식에 대한 이해라고 볼 수 있다. 조건문이나 논리 연산에서 자주 사용한다. 1. Falsy란?Boolean으로 변환했을 때 false가 되는 값 값이 비어있거나 의미가 없다고 간주되는 것들값설명false명시적인 거짓0숫자 0""빈 문자열null값이 없음undefined정의되지 않음NaN숫자가 아님(Not a Number) 예)let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n; 2. Trut..
#01 javascript 기본 문법 변수1. 변수 let money;money = 100; 2. 상수const money = "100";money = "200"; // 에러발생3. 변수 명명규칙(네이밍 규칙)1) $, _ 제외한 기호는 사용할 수 없다.2) 숫자로 시작할 수 없다3) 예약어를 사용할 수 없다.4) 변수 명명 가이드타입(Type)1. Number Type-- 정수let a = 10;-- 실수let b = 3.14;-- 음수let c = -10;-- 양의 무한대let inf = Infinity;-- 음의 무한대let mInf = -Infinity;-- 숫자가 아닌 값let nan = NaN;2. String Typelet name= "김준성";let age = 30;let print = `${ name }은 ${ age }살..
ajax(비동기 통신)를 사용하는 다양한 방법 ajax(비동기 통신)를 호출하는 다양한 방법. 1. 기존 javascript 방식 var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ console.log(ajax.responseText); } }; ajax.open("GET", "url", true); ajax.send(); 2. javascript fetch 이용 fetch('url') .then((response) => { if(!response.ok){ throw new Error('400 아니면 500 에러남'); } return response.json(); }) .then((결과)..
상단메뉴 픽시드 css 파일 .activeFixed{ background-color: aliceblue; position: fixed; } js 파일 document.addEventListener('scroll', function() { const header = document.querySelector('.header'); // 해더 객체 가져오기 const headerheight = header.clientHeight + 42; // 스크롤시마다 해더 높이 추가 const scrollposition = pageYOffset; if (headerheight
Json과 XML HTTP란?HTTP (Hypertext Transfer Protocol) 는클라이언트(브라우저 등)와 서버 간의 통신 방식을 정의한 표준 프로토콜이다. - Hypertext: 문서, 이미지, 오디오, 링크 등 다양한 리소스- 클라이언트가 서버에 요청(request) → 서버는 응답(response)- 대표적인 HTTP 메서드: GET, POST, PUT, DELETE AJAX란?AJAX (Asynchronous JavaScript And XML) 는웹 페이지가 전체를 새로고침하지 않고, 비동기적으로 서버와 통신하여 데이터 주고받는 기술이다.핵심 특징- 페이지 리로드 없이 데이터 요청 및 갱신 가능- UX 개선에 매우 유리- 백그라운드에서 통신 수행구성 요소- JavaScript- XMLHttpReque..
javascript walker Walker 패턴은 언제, 왜 사용하는가?웹 애플리케이션에서는 다음과 같은 상황이 자주 발생한다.여러 단계를 반드시 순서대로 실행해야 하는 경우각 단계가 비동기 처리(API 호출, 타이머, 검증 등) 를 포함하는 경우이전 단계가 완료되어야 다음 단계가 의미를 가지는 경우중복 실행이나 연속 클릭을 방지해야 하는 경우이때 가장 많이 발생하는 문제는 다음과 같다.콜백 중첩이 깊어짐실행 순서가 꼬임동일 로직이 여러 번 실행됨단계 상태 관리가 어려움Walker 패턴은 이러한 문제를 해결하기 위해 사용한다.여러 Step을 큐에 담고, 하나씩 순차 실행하도록 강제하는 구조이다. Walker 패턴이 필요한 대표적인 상황1. 주문 / 결제 프로세스주문 정보 검증재고 확인결제 승인 요청주문 완료 처리이 과정은 절대 병렬..

티스토리툴바