기록하기

javascript 에서 DOM 을 조작하는 방법에 대해 알아보려고 한다. DOM 먼저, DOM 이란? 문서 객체 모델(The Document Object Model) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM 은 nodes 와 objects 로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 자바스크립트에서는 HTML 에서의 값을 가져오거나 수정하는 방법으로 접근을 할 수 있다. 아래에서는 자바스크립트에서 DOM 요소에 접근하는 방법을 설명하려고 한다. id 속성을 이용해서 DOM 요소 찾기 HTML 에서 id 는 유일한 값 이다. 따라서 이 id 로 찾게 되면 값 하나만 리턴하게 된다. document..

Promise 는 "비동기 통신을 하는데 서버로 응답이 왔을 때 그걸 호출한 함수에서 알 수 있도록 약속할게" 라는 의미를 가지고 있다. 즉, 비동기 통신을 하게 될 경우 특정 코드 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것을 의미하는데 이 특성 때문에 처리 결과를 받아와야 하는 경우 데이터를 받아오지 못하는 문제가 발생하게 된다. 이를 위해 나온 개념이 Promise 이다. 기존 XMLHttpRequest 객체를 사용하여 통신을 하는 코드를 살펴보도록 하겠다. function getData() { const xhr = new XMLHttpRequest(); xhr.open("GET", "http://localhost:3000/posts"); xhr.setRequestHeader("co..

String.prototype 에는 padStart(), padEnd() 함수가 있다. 이 두 함수의 특징은 전달 받은 길이만큼 원하는 문자를 채우는 함수인데, 자바스크립트의 String 오브젝트를 배우면서 가장 기억에 남는 함수라서 먼저 정리를 해보려고 한다. padStart() 첫 번째 파라미터 길이 두 번째 파라미터 채울 문자 첫 번째 파라미터로 전달 받은 길이 만큼 문자열의 앞에 두 번째 파라미터로 채우는 함수이다. let num = "7"; console.log(num.padStart(4, "0")); //0007 이 함수의 경우, 4월을 04월로 표시를 해야하는 경우에도 사용할 수 있다. 예를 들어, 다음과 같이 작성할 수 있는 코드를 padStart() 함수를 사용하면 좀 더 편리하게 원하는..