반응형 부트캠프65 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 52 (switch 문, 폼(Form) 핸들링, JavaScript로 폼 필드 선택, 폼 필드 이벤트, XSS 공격 & Sanitize) 목차switch 문폼(Form) 핸들링JavaScript로 폼 필드 선택폼 필드 이벤트XSS 공격 & 살균(Sanitize)오늘 하루를 돌아보며 switch 문switch 문은 여러 if 구문을 합친 것과 같다. switch 문은 일반적으로 조건이 특정 값인지 확인할 때 사용한다. 일반적으로 if 문을 자주 사용하지만, 조건이 여럿일 경우 switch 문을 사용하는 것이 효과적이다.// 조건값에 따라 분기 실행switch (조건) { // 조건과 일치하는 값에 해당하는 코드 실행 case '값': // ... // break로 각 case 종료 break // 어떤 case와도 일치하지 않을 때 실행되는 블록 // 선택 사항(없어도 문법 오류 없음) default: // ... 2025. 7. 10. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 51 (텍스트 & 콘텐츠 조작 - Text 및 HTML 변경, DOM에서 요소(들) 추가 및 제거) 목차Text 및 HTML 변경DOM에 요소 추가DOM에 여러 요소 추가DOM에서 요소 제거오늘 하루를 돌아보며 Text 및 HTML 변경JavaScript를 사용해 텍스트나 콘텐츠를 변경해야 할 때가 있다. 선택된 DOM 요소의 텍스트 콘텐츠나 HTML을 변경할 때 다음 두 가지 방법을 사용한다..textContent 속성: DOM 요소의 텍스트 콘텐츠 변경. HTML 태그는 무시하고 텍스트만 변경하기 때문에 사용자 메시지나 안내문 등을 수정할 때 주로 사용한다..innerHTML 속성: DOM 요소 내부의 HTML 변경. HTML 태그를 해석하여 HTML 구조를 포함한 콘텐츠를 변경하기 때문에 버튼, 리스트, 카드 등을 수정할 때 주로 사용한다.// .textContent로 DOM 요소 텍스트 콘텐츠 .. 2025. 7. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 50 (자바스크립트 모범 사례 - 목적에 맞는 함수 설계, 범위(Scope) 관리, 상태 변경 줄이기, 변수 재할당 피하기) 목차목적에 맞는 함수 설계범위(Scope) 관리상태 변경 줄이기변수 재할당 피하기오늘 하루를 돌아보며 목적에 맞는 함수 설계명확한 목적에 맞는 함수를 설계하기 위해 필요한 것은 다음과 같다. 1. 하나의 목적함수를 작성할 때 하나의 기능을 구현하는 목적만 가져야 한다. 하나의 목적만 가지면 무슨 일을 하는지 알기 쉽고, 작성하기도 수월하다. 2. 적절한 함수 이름함수 이름은 동사(Verb)로 시작해야 한다. 동사는 행위 단어(Action Words)다. 함수 이름이 동사로 시작하면 기능을 알기 쉽다. 3. 이해를 돕는 주석함수를 작성할 때 주석(Commands)을 작성하면 기능을 이해하고 사용하기 쉽다. 함수에 주석을 추가할 때는 JSDoc 방식을 사용한다. JSDoc은 JavaScript 소스 코드.. 2025. 7. 8. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 49 (유용한 배열 메서드, 배열 리듀싱, 객체 속성 순환, 암묵적 객체 반환, 명령형 vs. 선언적 코드) 목차유용한 배열 메서드배열 리듀싱객체 속성 순환암묵적 객체 반환명령형 vs. 선언적 코드오늘 하루를 돌아보며 유용한 배열 메서드JavaScript의 유용한 기능 중 하나로 배열을 조작하는 데 도움이 되는 메서드들이 있다..findIndex(): 배열 객체에서 참(truthy)으로 평가되는 첫 번째 항목(item)의 인덱스(index)를 반환한다. 참으로 평가되는 항목이 없으면 -1을 반환한다..find(): 배열 객체에서 참으로 평가되는 첫 번째 항목(item)을 반환하고, 없으면 undefined를 반환한다..filter(): 배열 객체의 항목 중 참으로 평가되는 모든 항목을 걸러내어(filtering, 필터링) 새로운 배열을 반환한다. 없으면 빈 배열([])을 반환한다..map(): 배열의 각 항목을.. 2025. 7. 7. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 48 (구조 분해 할당, 기본 매개변수, 향상된 객체 리터럴, 나머지 매개변수와 전개 구문) 목차구조 분해 할당기본 매개변수향상된 객체 리터럴나머지 매개변수와 전개 구문오늘 하루를 돌아보며 구조 분해 할당구조 분해 할당은 객체나 배열의 구조를 분해해서 변수에 할당하는 구문이다. 객체 구조 분해 할당객체에서 값을 가져오려면 변수를 선언하고 해당 변수에 값을 할당해야 한다. 객체를 구조 분해 할당하려면 중괄호({})를 사용한다. 이 구문을 사용하면 한 줄에 여러 변수를 선언하고 할당할 수 있다. 이때 변수 이름은 키 이름과 동일해야 한다.const jeemin = { name: '박지민', age: 27,}// const name = jeemin.name// const age = jeemin.ageconst { name, age } = jeeminconsole.log(name) // '박지민'.. 2025. 7. 3. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 반응형
