본문 바로가기

반응형

Front-End/JavaScript

(18)
JavaScript #18 (스프레드 연산자, 구조 분해) 스프레드 연산자 : '...OOO ' 으로 표현 - 배열 타입const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5]; // arr1을 펼쳐서 넣음console.log(arr2); // [1, 2, 3, 4, 5] - 객체 타입※ 기존 객체에 새로운 속성을 추가하거나 덮어쓸 때 자주 씀const user = { name: "Jin", age: 20 };const newUser = { ...user, job: "developer" };console.log(newUser);// { name: "Jin", age: 20, job: "developer" } 구조 분해 할당 - 배열 타입const numbers = [10, 20, 30];const [a, b] = nu..
JavaScript #17 (fetch, 비동기 처리) 기존 promise 방식fetch("/api") .then(res => res.json()) .then(data => console.log(data)); resolve: 성공했을 때 호출 / reject: 실패했을 때 호출let promise = new Promise(function(resolve, reject) { if (/* 성공 조건 */) { resolve("성공했어요!"); // 성공 시 } else { reject("실패했어요!"); // 실패 시 }}); 실습function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("✅ 데이터 도착");..
JavaScript #16 (ES6, ESNext 문법) ※ 2016년 이후 버전의 ES인 ES6, ESNext에서 추가된 약간의 문법을 다룸. Set : 파이썬의 Set (집합)과 같음const set = new Set([1, 2, 2, 3]); // 중복 제거됨set.add(4); // 4 추가const set = new Set([1, 2, 2, 2, 3, 4]);// {1, 2, 3, 4}set.add(5);// {1, 2, 3, 4, 5} // 5 추가set.add(5);// {1, 2, 3, 4, 5}, // 그대로. 중복은 허가하지 않으므로 추가되지 않음.set.delete(2);// 2 삭제console.log(set); Map : 배열의 각 요소에 주어진 콜백 함수를 적용해 새로운 배열을 반환하는 함수- 쉽게 말해, map.메서드(-..
JavaScript #15 (BOM) BOM (Browser Object Model)- 브라우저 자체를 객체처럼 다루는 기능- 브라우저의 기능을 자바스크립트로 제어하는 구조 window (창)navigator (사용자 환경)location (주소)screen (화면)history (방문 기록)참조 자료https://enjoydev.life/blog/frontend/1-dom window 객체- 브라우저 창 전체, 최상위 객체 예문 - 알림 창 띄우기window.alert("안녕하세요!"); 실습 - 팝업 띄우기function openPopup() { window.open("popup.html", "popup", "width=300,height=300");} 실습 - 3초 후 알림setTimeout(() => { alert("3초가 지났..
JavaScript #14 (form) 폼 유형과 접근 방식 document.getElementById("inputId").value;inputID는 html에서 작성된 inputID를 사용. 예문 - input 칸에 입력한 값 가져오기 (각각 변수에 저장)let gender = document.querySelector("input[name=gender]:checked").value;let job = document.getElementById("job").value; 실습 - 배송 정보 복사 주문인과 수령인이 같을 때 체크해서 수령인 칸에 clone 연습문제 - 폼 제출 전 미리보기 버튼 구현 See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.">See the Pen Unt..
JavaScript #13 (DOM 이벤트) DOM(Document Object Model) : HTML 문서를 트리 구조로 표현한 객체 모델- 웹 페이지의 요소를 실시간으로 제어할 수 있음. DOM은 HTML 문서를 노드(Node) 트리로 표현한 구조각 요소는 객체처럼 접근 가능자바스크립트로 DOM을 조작하면 실시간으로 웹 화면이 변경됨 예문 - querySelector를 이용하여 img 태그의 src 추가let img = document.querySelector("img");img.src = "new-image.jpg"; 속성 조작.innerText, .innerHTML로 텍스트/HTML 변경.src, .href, .value 등 속성에 접근.setAttribute(), .getAttribute(), .removeAttribute()예문 ..
JavaScript #12 (배열) Array (배열) : 여러 값을 하나의 변수로 묶어서 다루는 자료 구조. ([ ] 로 묶인 값들의 모음, 순서 존재)let fruits = ["사과", "바나나", "딸기"];console.log(fruits[0]); // "사과" 배열의 길이 : .lengthconsole.log(fruits.length); // 3 실습 - 여행 준비물 점검기let items = ["여권", "칫솔", "수건"];items.push("충전기");items.splice(1, 1, "세면도구");alert("여행 준비물 목록: " + items.join(", "));// 요소 꺼내기 (실행하면 본래의 배열에선 삭제)console.log(items.pop()); console.log(items); 배열..
JavaScript #11 (날짜/시간 객체 관련) getOOOO : 현재 OOOO 정보 가져오기setOOOO : OOOO 정보로 설정 (get으로 가져와서 연산했을 때 나오는 결과를 자동으로 맞춰 줌. ex. 6월 32일 → 7월 2일) const d = new Date();d.setDate(d.getDate() + 7);d.setMonth(d.getMonth() + 1);d.setHours(d.getHours());d.setMinutes(d.getMinutes()); 날짜 포맷팅const d = new Date()const formatted = `${d.getFullYear()} - ${String(d.getMonth() + 1).padStart(2, "0")} - ${String(d.getDate()).padStart(2, "0")}`;consol..

반응형