본문 바로가기

강의 실습159

DOM API-2 4) 요소 노드 생성 02.10.금요일 15:03 - createElement createElement 메서드를 통해 새로운 요소 노드를 생성할 수 있다. createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어준다. createElement로 요소 노드를 생성한 다음 classList를 사용해 season 이라는 class 이름을 설정해준다. // createElement const seasonElement = document.createElement("div"); seasonElement.classList.add("season"); 새로 생성한 요소에 안에 텍스트를 넣는 방법은 두 가지가 있다. textContent를 사용하는 것과 텍스트 노드를 생성하는 createTextNode라는.. 2023. 10. 30.
DOM API-1 1. DOM API 란? DOM API를 이용해 HTML 요소들에 접근하기 위해서는 DOM Tree를 참고해야 하는데 DOM Tree를 자세하게 살펴본다. DOM Tree는 크게 document 문서노드, 요소노드, 어트리뷰트 노드, 텍스트 노드로 나타낼 수 있다. DOM API를 이용해 요소에 접근하기 위해 해당 요소들을 찾을 때 문서, 요소, 어트리뷰트, 텍스트 순서로 각각의 노드에 접근해야하고, 이 문서 노드는 트리의 가장 위쪽에 위치하기 때문에 어떤 요소에 접근하든지 항상 이 문서 노드를 거쳐서 다른 요소들에 접근해야 한다. 자바스크립트가 이 DOM API를 사용해 웹 페이지를 조작하기 위해서는 먼저, 조작하고자하는 요소를 찾아 해당 요소를 선택한 다음, 선택된 요소를 조작해야 한다. 1) 요소 .. 2023. 10. 26.
웹페이지를 조작하는 DOM 1. 웹 이란? 웹 이란, 우리 모두가 알고있는 것처럼, 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부른다. 웹 사이트란, google.com 과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있다. 웹 사이트들은 보통 HTML, CSS, 자바스크립트로 이루어져 있다. 1) HTML과 CSS HTML은 Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 하고, CSS는 Cascading Style Sh.. 2023. 10. 25.
API 호출 1. API란? Application Programming Interface로, "컴퓨터나 컴퓨터 프로그램 사이의 연결" 이다. 1) 클라이언트와 서버의 통신 API에 대해 이해하려면, 먼저 클라이언트와 서버의 데이터 통신 즉, 우리가 웹이나 앱을 이용할 때 어떻게 원하는 데이터를 요청하고 받을 수 있는지를 먼저 이해해야 한다. - 커피숍과 클라이언트-서버 통신 이러한 과정은 커피숍에 가서 커피를 주문하고 마시는 과정을 떠올려보면 쉽게 이해할 수 있다. (1) 손님이 바리스타에게 원하는 커피를 주문. (2) 바리스타는 주문받은 커피를 만들기 위해 필요한 원두를 파악하고, 창고에서 원두를 선택. (3) 바리스타는 창고에서 선택한 원두를 가져온다. (4) 선택한 원두로 커피를 제작하고, 완성된 커피를 손님에.. 2023. 10. 24.
async와 await 1. async/await 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성한다. // 프로미스 객체 사용한 비동기 처리 함수 const delay = (ms) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); }); }; const start = () => { delay(2000).then(() => { console.log("대기"); }); }; start(); start 함수를 호출하면, 2초 후에 "대기" 라는 단어가 출력된다. 이와 같이 작성된 코드를 async/await 을 이용해 더 직관적인 코드로 바꿔 작성할 수 있다. async 와 await 문법은 프로미스 객체를 더욱 쉽게 작성할 수 있고, .. 2023. 10. 23.
Promise 객체 1. 비동기 처리 setTimeout 함수를 이용해 작업을 비동기적으로 처리할 수 있고, setTimeout함수는 콜백함수와 ms단위의 지연 시간을 매개변수로 입력받는 함수이다. 이전에 작성했던 비동기 함수 예제를 다시 작성하되, 함수 호출시 출력할 단어와 단어를 출력하는 함수를 인수로 넘겨준다. // 비동기 처리 const workA = (value, callback) => { setTimeout(() => { callback(value); }, 5000); }; const workB = (value, callback) => { setTimeout(() => { callback(value); }, 3000); }; const workC = (value, callback) => { setTimeout((.. 2023. 10. 18.
비동기 처리 1. 동기 동기란 하나의 작업이 실행되는 동안은 다른 작업을 동시에 수행하지 않는 방식. 즉, 하나의 작업이 종료될 때 까지 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 수 있는 순차적인 방식이다. // 동기 console.log("a"); console.log("b"); console.log("c"); 다음과 같이 작성된 코드는 작성된 순서대로 실행되기 때문에 실행결과 a, b, c가 출력되고, 순서대로 출력되는 이유가 바로 자바스크립트 코드가 동기적으로 처리 되었기 때문이다. // 예시 코드 const workA = () => { //5초 console.log("workA"); }; const workB = () => { //3초 console.log("workB"); }; co.. 2023. 9. 19.
spread와 rest 1. spread spread는 직역하면 확산, 퍼짐, 전파라는 뜻으로, 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 한다. // 객체에 spread 사용 전 const toy = { type: "bear", price: 15000 }; const blueToy = { type: "bear", price: 15000, color: "blue" }; const yellowToy = { type: "bear", price: 15000, color: "yellow" }; 작성한 객체들을 살펴보면, 새로 추가한 객체들과 toy 객체의 프로퍼티 중 type과 price값이 동일한 것을 볼 수 있다. 이렇게 비슷한 프로퍼티를 가진 객체를 생성하려면, 동일한 코드를 여러번 작성해야하는 번거로운 작.. 2023. 9. 18.
배열과 객체 구조분해할당 구조 분해 할당이란 배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식이다. 1. 배열의 구조 분해 할당 colors 배열에 green, blue, purple 이라는 요소들을 담아준 뒤, 각각 c1, c2, c3 변수에 순서대로 할당해준다음 해당 변수들을 출력 한다. // 기본 변수 할당 let colors = ["green", "blue", "purple"]; let c1 = colors[0]; // "green" let c2 = colors[1]; // "blue" let c3 = colors[2]; // "purple" console.log(c1); // "green" console.log(c2); // "blue" console.log(c3); .. 2023. 8. 28.

티스토리툴바