문서 객체 모델(DOM) 문서 객체 모델(Document Object Model, DOM)은 자바스크립트 Node 객체들의 계층화된 트리입니다. HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 객체들의 트리 구조로 변환된다는 것입니다. 이 객체는 수정 가능합니다. document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다. DOM의 목적은 자바스크립트를 사용해서 페이지 내 모든 요소들을 쉽게 조작(삭제, 추가, 바꾸기, 이벤트 처리, 수정)할 수 있도록 프로그래밍 인터페이스를 제공하는 것입니다. CSS 객체 모델(CSSOM) CSS 객체 모델(CSS Object Model, C..

이벤트 핸들러 함수에서 어떠한 DOM 요소의 자식 요소들에 접근하기 위해서 .children 을 사용합니다. const parentElement = document.querySelector('.parent'); console.log(parentElement.children) parentElement.children.forEach(function (entry) { console.log(entry); }); 위에서 작성한 코드에서 parentElement.children 은 자식 DOM 요소들이 담긴 리스트를 반환하기 때문에, 당연히 배열의 forEach 메소드를 사용하여 각각의 요소에 접근하여 어떤 동작을 수행할 수 있을 것이라고 생각하였습니다. 하지만 다음과 같은 에러 메세지를 콘솔 창에 빨간 글씨로 출..

아래와 같이 코드를 작성하면 모듈을 html 파일에 적용할 수 있습니다. 테스트 여기서 주의할 점은 반드시 script 태그에 type 속성값을 module로 설정해주어야 한다는 것입니다. 만약에 type 속성을 명시하지 않는다면 Uncaught SyntaxError: Cannot use import statement outside a module 이런 내용이 담긴 에러 메세지가 발생합니다. 또한, 만약에 위와 같은 코드가 담긴 파일을 로컬에서 직접 실행해보면 다음과 같은 에러 메세지가 발생합니다. 이를 해결하기 위해서는 먼저 터미널을 연다. http-server가 없다면 npm install http-server -g 위 키워드로 http-server를 전역으로 설치해 준 다음 npx http-serv..

모듈(Module) 이란? 자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지면서 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민하였습니다. 그 결과 도입된 것이 바로 모듈 시스템(Module System)입니다. 이 때 사용되는 코드 뭉치 각각을 모듈(Module)이라고 합니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다. 모듈 활용법 모듈에 특수한 지시자 export와 import를 적용하면 ..

서버 사이드 렌더링(SSR) SSR : Server Side Rendering 전통적인 웹 어플리케이션은 서버 사이드 렌더링 방식을 사용한다. 서버 사이드 렌더링의 동작 방식 요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. 서버 측에서 HTML & View를 생성하여 응답한다. 서버 사이드 렌더링의 장점과 단점 1. 장점 1-1. 검색엔진최적화(SEO)가 가능하다. 1-2. 성능 개선(첫 로딩이 매우 짧다.) 첫 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기로딩속도를 많이 줄여줄 수 있다. 사용자가 처음부터 사이트의 정적인 컨텐츠를 이용할 수 있다. (단, 사용자 인터랙션 부분은 제외) 동적인 부분은 자바스크립트 파일을 불러오고 렌더링 작업이 완료되면 이용할..

문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. cloth..