[ 상황 ] jsp + jquery 프로젝트 중 function() 으로 선언되어있는 함수와 화살표 함수가 섞여있다.체계적으로 의미를 가지고 분리해둔건가 아닌가 해서 개인적으로 정리해두려한다. [ 개념 ] fuction 함수 - 전통적인 함수 선언 방식- 호출 주체에 따라 this 가 바뀌고, 이벤트 처리에 적합 특징 - this 가 호출한 대상을 가리킴- 이벤트 핸들러에서 많이 사용- 선언 전에 호출 가능(호이스팅) 사용 예시 ) 버튼 클릭한 경우 function saveFunction(e) { // this === 클릭된 버튼} 화살표 함수 ( () => {} ) - 간결한 문법의 함수- 자기 자신의 this를 가지지 않음 특징- this가 상위 스코프 기준으로 고정- 콜백 함수에 적합- ..

# var / let / const 비교 varletconst재할당가능가능불가능재선언가능불가능불가능스코프함수 내 블록 내 블록 내호이스팅문제 있음안전함안전함 var 는 레거시라 쓰지않는 것이 좋다. ( 그냥 쓰지말기 ! ) 블록 무시 // var - 블록을 무시함if (true) { var password = '1234'}console.log(password); // '1234' 가 출력됨 !! -> 보안 문제 발생// 올바른 방법 // -> 블록 안에서만 유효하도록사용if (true) { let password = '1234'}console.log(password) // 에러가 나서 안전함 - if,for 블록 안에서 선언해도 밖에서 접근가능하기 때문에 의도치 않은 변수 오염이 발생- 디버깅 지..

해당 포스트는 AJAX 기술에 대해 학습하던 중에 아래 개념을 더 확실하게 하기 위해 작성했다 -> 동기/ 비동기에 대한 확실한 이해-> 비동기호출의 콜백 지옥 예시    2025.04.08 - [Frontend/JavaScript] - Fetch API 란 ? AJAX 기술 이해하기      # 동기와 비동기 개념  구분 개념동기(Synchronous)어떤 작업을 끝날 때까지 작업 안하고 기다림비동기(Asynchronous)어떤 작업이 끝날 때까지 기다리지 않고 바로 실행함    동기 호출  console.log('1');const res = $.ajax({ url: 'https://...', async: false});console.log('2'); // 요청 끝날 때까지 아예 안 찍힘   동기호..

나는 그동안 $.ajax() 만 사용해왔다.이번 정리를 통해 최신 API 기술( fetch(), axios)에 대해 확실하게 알고 넘어아가자! AJAX(Asynchronous JavaScript And XML) 란 ? 페이지 새로고침 없이 서버와 비동기적으로 데이터를 주고 받는 기술 방식웹페이지를 "부분적으로 업데이트" 할 수 있는 방법임 [ 구현 방식 ] 구현 방식 설명XMLHttpRequest (XHR)예전 방식. 콜백 기반. 복잡함.jQuery $.ajax()XHR을 jQuery로 감싼 것. 쓰기 쉬움.Fetch API최신 표준. Promise 기반. 깔끔하고 가독성 좋음.AxiosFetch를 더 편하게 만든 라이브러리. 자동 JSON 변환, 에러처리 등 좋음 Fetch API 란..

Attribute (attr) HTML 태그에서 속성(attribute)은 요소의 초기 상태를 정의HTML 마크업 안에 작성된 상태 그대로를 의미 checked>  // attribute: checked 된 상태자체  Property (prop) JavaScript 에서 속성(property)은 요소의 현재 상태를 나타냄DOM 요소의 속성(property)은 JavaScript 에서 제어할 수 있는 동적인 값 checked>  // property : 사용자가 변경할수있는 상태      예시  )  Check Status Toggle Check    '' 로 준 상태   Attribute 는 HTML 에 작성된 상태 그대로를 의미하기 때문에,  상태에서 값을 가져오려 한다면..