jQuery 는 웹 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. 설명웹 페이지의 동적인 기능을 쉽게 구현하고, 코드 작성을 간소화하여 개발자들에게 많은 이점을 제공합니다. jQuery 는 강력한 선택자를 제공하여 웹 페이지의 특정 요소를 선택할 수 있습니다.예를 들어, 특정 클래스를 가진 모든 요소를 선택하거나, 특정 ID 를 가진 요소를 조작하는 등의 작업을 수행합니다. jQuery 는 다양한 효과와 애니메이션을 적용할 수 있는 기능을 제공하며, ALAX 와 서버 통신을 용이하게 처리할 수 있는 기능, 폼 조작을 쉽게 처리할 수 있는 기능, 이벤트 처리를 쉽게 구현할 수 있는 기능 등 개발 생산성을 높일 수 있습니다. 장점과 특징간결하고 직관적인 문법보통 Javascript ..
파일 여부나 추가 필드 여부 등과 상관없이 통용되는HTML 폼 전송 방법설명FormData 는 폼을 쉽게 보내도록 도와주는 객체입니다.이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다. 생성자는 다음과 같습니다.let formData = new FormData([form]); HTML 에 form 요소가 있는 경우, 위와 같은 코드를 작성하면 해당 폼 요소의 필드 전체가 자동 반영됩니다.fetch 등의 네트워크 메서드가 FormData 객체를 바디로 받는다는 건 FormData 의 특징입니다. 이때 브라우저가 보내는 HTTP 메시지는 인코딩되고 Content-Type 속성은 multipart/form-data 로 지정된 후 전송됩니다.서버 관점에서는 FormData 를 사용..
스크립트 내 에러를 검출해 제거하는 일련의 과정을 디버깅모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓습니다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다. 프론트에서도 디버깅이 중요하며, 이 글에서는 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다.기능이 다양하고, Chrome 에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴을 쉽게 익힐 수 있기 때문입니다. 사용 방법F12 또는 Cmd + Opt + I 를 눌러 개발자 도구를 엽니다.Sources 탭을 클릭해 Sources 패널을 엽니다. 해당 open sources 버튼을 누르면 navigator 가 열리면서 현..
ES6 ~ ES13 version 정리 입니다. 자바스크립트의 혁명이라 할 수 있는 ES6 이후 추가된 자바스크립트 최신 문법 중 자주 이용할 기능들을 정리하였습니다. Numeric Separators 10000000000 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바 ( _ ) 로 단위를 구분할 수 있는 표현입니다.구분자는 임의의 위치에 마음대로 추가가 가능합니다. console.log(1_000_000_000 + 10_000) // 1000010000 Shorthand Property names 프로퍼티 이름과 value 값의 변수이름과 동일할 때에는 하나로 생략이 가능합니다. const ellie1 = { name: 'Ellie', age: '18',};const name = 'Ell..