본문 바로가기

분류 전체보기72

문서 객체 모델 ① 문서 객체 조작 HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML에서는 요소, JavaScript에서는 문서 객체라고 부른다.즉 문서 객체를 조작한다는 것은 h1, div, span과 같은 HTML 요소를 조작한다는 의미로, 문서 객체를 조합하여 만든 전체적인 형태를 문서 객체 모델이라고 한다.* * 문서 객체 모델의 넓은 의미는 웹 브라우저가 HTML 문서를 인식하는 방식, 문서 객체 모델의 좁은 의미는 문서 객체의 집합으로, 간단히 이해하면 HTML 문서가 곧 문서 객체 모델인 것 같다. DOMContentLoaded 이벤트 DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽어들인 뒤 발생하는 이벤트로,문서 객체를 조작할 때는 DOMCo.. 2024. 10. 2.
웹 사이트의 에셋을 여러 도메인으로 서빙했을 때의 장점은 무엇인가요? 웹 사이트의 에셋을 여러 도메인으로 서빙하는 것을 도메인 샤딩이라고 한다. 도메인 샤딩브라우저가 웹 사이트의 에셋을 다운받을 때 해당 웹 사이트의 도메인으로부터 모든 에셋을 다운받지 않고 여러 개의 서브 도메인으로 에셋을 나눠 다운받는 방법 shard는 조각, 파편이라는 뜻으로 도메인 샤딩이라는 것은 곧 하나의 도메인을 여러 개의 도메인으로 조각낸다는 의미이다. 이때 굳이 하나의 도메인을 여러 개의 도메인으로 조각내는 이유는 하나의 도메인으로부터 모든 에셋을 다운받지 않고 여러 개의 서브 도메인으로 에셋을 나누어 다운받음으로써 동시에 더 많은 에셋을 병렬로 다운받을 수 있게끔 하고 결과적으로 페이지 로딩 속도와 시간을 향상시키기 위함이다. 이때 에셋이란 CSS, JavaScript, 폰트, 이미지 등의 .. 2024. 9. 30.
객체 ③ 객체와 배열 고급 이번 글에서는 앞서 배운 객체 개념을 바탕으로 보다 심화된 내용을 알아보자. 속성 존재 여부 확인하기객체.키로 객체 내 특정 속성 값에 접근할 수 있는데,이때 해당 속성 자체가 존재하지 않으면 undefined를 반환한다. 이를 이용해 객체 내 특정 속성의 존재 여부를 확인할 수 있다.const book = {  name: '혼자 공부하는 자바스크립트',  author: '윤인성',  publisher: '한빛미디어'}if (book.name !== undefined) {  console.log('name 속성이 있습니다.')} else {  console.log('name 속성이 없습니다.')}if (book.price !== undefined) {  console.log('price 속성이 있습니다... 2024. 9. 30.
백준 1330번 백준 1330번을 풀고 다른 풀이를 찾아보니 입력 관점, 출력 관점에서 좀 더 간단하게 할 수 있는 방법이 있어 정리해보았다.let input = require('fs').readFileSync('/dev/stdin').toString().split(' ')const a = Number(input[0])const b = Number(input[1])let outputif (a > b) { output = '>'} else if (a  입력 관점let input = require('fs').readFileSync('/dev/stdin').toString().split(' ')const [a, b] = inputlet outputif (a > b) { output = '>'} else if (a .. 2024. 9. 28.
객체 ② 기본 자료형과 객체 자료형 기본 자료형과 객체 자료형 앞서 자료와 변수 ① 기본 자료형에서는 기본 자료형에 대해, 객체 ① 객체 기본에서는 객체 자료형에 대해 알아보았다. JavaScript에서의 자료는 기본 자료형과 객체 자료형으로 구분할 수 있는데 기본 자료형으로는 숫자, 문자열, 불이 있고 이 셋을 제외한 나머지는 전부 객체 자료형에 해당된다. 이때 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 특히 함수 자료형을 가지는 속성은 메소드라고 부른다. 앞서 배운 배열, 함수 또한 객체 자료형으로, 속성과 메소드를 가질 수 있다.> const a = []undefined> a.sample = 1010> a.sample10> typeof(a)"object"> function b () {}undefined> b.sample =.. 2024. 9. 27.
객체 ① 객체 기본 앞서 반복문 ① 배열에서 배열이란 여러 변수를 한꺼번에 모아 사용하는 자료형이라고 했다. 이때 typeof 연산자를 이용해 배열의 자료형을 확인해보면 object, 즉 객체 자료형이 나온다. 즉 배열은 객체의 한 종류라는 것인데, 과연 객체란 무엇일까? 객체 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 중괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다. 이때 이 내부의 값을 속성이라 하고, 하나의 객체는 다양한 자료형의 속성을 가질 수 있다. 다음은 객체의 예시이다.const book = { name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'} 속성 속성은 객체 내부의 값으로, 키와 값으로 구성된다. 속성 값에 접근하기 객체 내 속성 .. 2024. 9. 22.

티스토리툴바