반응형 javascript29 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 53 (고유 식별자(ID), 타임아웃, 인터벌, 비동기 자바스크립트 - AJAX, JSON) 목차고유 식별자(ID)타임아웃(Timeout)인터벌(Interval)비동기 자바스크립트 - AJAX비동기 자바스크립트 - JSON오늘 하루를 돌아보며 고유 식별자(ID)고유 문자열은 숫자와 문자가 포함된 문자 값을 말한다. 포함된 문자열 길이가 길어서 두 번 생성하는 것이 거의 불가능한 고유한 값이다.const uniqueId1 = '577ac755d7fef11100753579'const uniqueId2 = '5b4ef18839cd6500114e04d2' 고유 식별자를 생성하려면 다음과 같은 코드를 사용할 수 있다. 전달된 length 인수 값에 따라 문자 개수를 설정하고, 고유한 문자값을 반환한다.function generateUniqueString(length) { return Math.rando.. 2025. 7. 14. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 2 3 4 5 6 다음 반응형
