반응형 부트캠프47 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 54 (비동기 자바스크립트 - Fetch API, Promise, Request/Response) 목차Fetch APIPromiseRequest/Response오늘 하루를 돌아보며 Fetch APIFetch API는 AJAX 요청을 위한 현대적인 방법이다. 기존 XMLHttpRequest(XHR)보다 더 간결하고 강력한 인터페이스를 제공한다. 요청을 보낼 때는 fetch() 함수를 사용하고, 호출하는 즉시 요청한다.fetch(url, options)url: 요청할 서버 URL 주소options: 요청 방식, 헤더, 본문 등을 포함하는 객체(옵션) Fetch API는 Promise를 반환하고 응답은 Response 객체로 제공한다. 이 응답(response) 객체는 다양한 메서드를 통해 데이터를 추출할 수 있다. fetch() 함수의 응답 결과를 확인하려면 .then() 메서드를 사용한다.fetch('.. 2025. 7. 14. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 2 3 4 ··· 10 다음 반응형
