console 100% 활용하기!! 1. console.log 에 색상 입히기const err = "hihi";console.log(`%c error : ${err}`, "background: #ff0;color: red;font-weight: bold")const err = "hihi";console.log(`%c error : ${err}` + `%c error : ${err}`, "background: #ff0;color: red;font-weight: bold", "background: aqua;color: green;font-weight: bold")console.log(`%c error : ${err} %c error : ${err}`, "background: #ff0;color: red;fo..

Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다. 일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면... 1. form태그 안에 submit 버튼을 이용한 방식 2. 스크립트를 이용한 form.submit() 3. 비동기 통신을 이용한 submit 방식 그 외 등등 다양한 방식으로 form submit을 할 수 있다. 내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다. 1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만 비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다. 어떻게 데이터를 말아서 보내야할까? 그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다. Fo..

JQuery에서 attr() vs .prop() 차이점 ✅ attr() .attr()은 HTML 요소의 속성 값을 가져오거나 설정하는 데 사용 이미지의 src 속성값을 가져오거나 설정할 때 사용 ✅ prop() .prop()은 HTML 요소의 프로퍼티 값을 가져오거나 설정하는 데 사용 요소의 checked 프로퍼티 값을 가져오거나 설정할 때 사용 💡 대부분의 경우 두 메소드 중 어느 것을 사용해도 상관 없음, 그러나 .prop()을 사용하는 것이 더 안정적 속성값과 프로퍼티 값의 차이점 1. 속성값은 HTML 문서에서 태그에 지정된 속성 예를 들어, http://example.com"> 에서 href는 속성 -> 이 속성은 HTML 문서에 명시되어 있으며, HTML 요소가 DOM에 로드될 때 속성 값이 ..

JavaScript에서 전략 패턴(Strategy Pattern)은 알고리즘의 집합을 정의하는 인터페이스와 그 인터페이스를 구현하는 클래스로 구성됩니다. 클래스는 인터페이스를 상속받아 구현합니다. 이 알고리즘은 런타임에 쉽게 변경할 수 있습니다. 전략 패턴은 알고리즘을 구조적으로 분리하여 각각의 알고리즘을 독립적으로 변경할 수 있도록 하는 디자인 패턴입니다. 이 패턴을 사용하면 각각의 알고리즘을 쉽게 교체할 수 있어 개발 및 유지보수의 효율성이 높아집니다. 전략 패턴은 프로그램의 구조를 변경하지 않으면서 알고리즘을 변경할 수 있는 기능을 제공합니다. 이 패턴을 사용하면 높은 유연성을 가진 알고리즘을 쉽게 구현할 수 있습니다. - 알고리즘의 집합을 정의하는 인터페이스?? "알고리즘"이란, 특정 문제를 해결..

전체 선택 첫번째 항목 두번째 항목 세번째 항목 JavaScript 작성 // 전체 선택 체크박스의 이벤트 핸들러 document.getElementById("check-all").addEventListener("change", function() { // 전체 선택 체크박스가 선택되었을 때 if (this.checked) { // 모든 개별 체크박스를 선택 상태로 변경 Array.from(document.getElementsByClassName("check-item")).forEach(function(item) { item.checked = true; }); } // 전체 선택 체크박스가 선택 해제되었을 때 else { // 모든 개별 체크박스를 선택 해제 상태로 변경 Array.from(documen..

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML Element.insertAdjacentHTML() - Web API | MDN insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하 developer.mozilla.org foo beforebegin : Element 앞에 afterbegin : Element 안 첫번째 beforeend : Element 안 마지막 afterend : Element 뒤에

JS에서 '없음'을 나타내는 값이 2개가 있음nullundefined↳ 두개의 의미는 비슷할지라도, 사용되는 목적과 장소가 다름 JS에서 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환함let foo;console.log(foo); // undefinedconst obj = {};console.log(obj); // undefined null은 '객체가 없음'을 나타냄 typeof null // 'object'tpyeof undefined // 'undefined' '없음'을 나타내기 위해 어떤걸 사용해야할까?=> null을 사용하는 것이 좋음 undefined 사용 안하는 이유는? 그 의미가 불분명하기 때문에let foo;let bar = undefined;foo; // ..

Spread Operator반복 가능한(iterable) 객체에 적용할 수 있는 문법 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있음 1. Array에 붙이면 대괄호를 제거해줌var array = [1, 2, 3, 4];console.log(...array);2. 문자에 붙이면 대괄호를 제거해줌     - 문자는 유사배열이라고 생각하자 (대충 배열이라는 뜻)     - 문자 인덱싱      - 문자도 Array처럼 인덱싱이 가능함 (진짜 Array는 아님)var letter = 'hello';console.log(letter[1]);var letter = 'hello'console.log(...letter); Spread Operator를 어디에 쓰면 좋을까?1-1. Array ..