JavaScript와 Iterator
2020. 11. 23. 15:17
프로그래밍 언어/JavaScript
ES2015에서 Iterable Protocol이 추가되었습니다. Iterable Protocol에는 2가지 형태가 존재하는데, iterable과 iterator가 있습니다. Iterable iterable은 객체의 멤버를 반복할 수 있는 객체입니다. iterable은 자바스크립트 객체의 요소들에 대해 반복되는 행동(예를 들어, for .. of 구문에서 어떤 값들이 루프를 돌고 있는가)을 정의할 수 있도록 해줍니다. JavaScript에서 객체가 iterable하기 위해서는, object에는 [@@iterator] 메서드가 구현되어 있어야 합니다. 따라서 임의로 우리가 객체를 만들고 iterable하게 만들고 싶다면, object 프로퍼티에 Symbol.iterator를 추가해야 합니다. 객체는 반드시..
Node와 Element
2020. 11. 22. 16:49
프로그래밍 언어/JavaScript
HTML / XML 문서는 브라우저 안에서 DOM 트리로 표현됩니다. 태그는 요소 노드가 되고 트리 구조를 형성합니다. 문자는 텍스트 노드가 됩니다. 이 외에 HTML 내의 모든 것은 DOM을 구성합니다. 심지어 주석까지도 말입니다. HTML 안의 모든 것들은 (심지어 그것은 주석이더라도) 노드이고, 이 노드들이 모이고 서로 연결되어 DOM을 구성하고 있습니다. 노드의 종류 노드 타입은 총 12가지인데, 실무에서 주로 다음 네 가지 노드를 다룹니다. DOM의 '진입점'이 되는 문서(document) 노드 HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록인 요소 노드(element node) 텍스트를 포함하는 텍스트 노드(text node) 화면에 보이지는 않지만, 정보를 기록하고 자바스크립트를 ..
DOM, CSSOM, BOM은 무엇일가?
2020. 11. 22. 16:33
프로그래밍 언어/JavaScript
문서 객체 모델(DOM) 문서 객체 모델(Document Object Model, DOM)은 자바스크립트 Node 객체들의 계층화된 트리입니다. HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 객체들의 트리 구조로 변환된다는 것입니다. 이 객체는 수정 가능합니다. document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다. DOM의 목적은 자바스크립트를 사용해서 페이지 내 모든 요소들을 쉽게 조작(삭제, 추가, 바꾸기, 이벤트 처리, 수정)할 수 있도록 프로그래밍 인터페이스를 제공하는 것입니다. CSS 객체 모델(CSSOM) CSS 객체 모델(CSS Object Model, C..
왜 forEach 메소드는 children 속성에 대해 동작하지 않을까?
2020. 11. 21. 23:45
시행착오
이벤트 핸들러 함수에서 어떠한 DOM 요소의 자식 요소들에 접근하기 위해서 .children 을 사용합니다. const parentElement = document.querySelector('.parent'); console.log(parentElement.children) parentElement.children.forEach(function (entry) { console.log(entry); }); 위에서 작성한 코드에서 parentElement.children 은 자식 DOM 요소들이 담긴 리스트를 반환하기 때문에, 당연히 배열의 forEach 메소드를 사용하여 각각의 요소에 접근하여 어떤 동작을 수행할 수 있을 것이라고 생각하였습니다. 하지만 다음과 같은 에러 메세지를 콘솔 창에 빨간 글씨로 출..
[JavaScript] 로컬에서 자바스크립트 모듈이 담긴 HTML 파일을 실행하면?
2020. 11. 21. 14:43
시행착오
아래와 같이 코드를 작성하면 모듈을 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)
2020. 11. 21. 14:38
프로그래밍 언어/JavaScript
모듈(Module) 이란? 자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지면서 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민하였습니다. 그 결과 도입된 것이 바로 모듈 시스템(Module System)입니다. 이 때 사용되는 코드 뭉치 각각을 모듈(Module)이라고 합니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다. 모듈 활용법 모듈에 특수한 지시자 export와 import를 적용하면 ..
서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)
2020. 11. 17. 12:08
라이브러리 & 프레임워크/React
서버 사이드 렌더링(SSR) SSR : Server Side Rendering 전통적인 웹 어플리케이션은 서버 사이드 렌더링 방식을 사용한다. 서버 사이드 렌더링의 동작 방식 요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. 서버 측에서 HTML & View를 생성하여 응답한다. 서버 사이드 렌더링의 장점과 단점 1. 장점 1-1. 검색엔진최적화(SEO)가 가능하다. 1-2. 성능 개선(첫 로딩이 매우 짧다.) 첫 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기로딩속도를 많이 줄여줄 수 있다. 사용자가 처음부터 사이트의 정적인 컨텐츠를 이용할 수 있다. (단, 사용자 인터랙션 부분은 제외) 동적인 부분은 자바스크립트 파일을 불러오고 렌더링 작업이 완료되면 이용할..
[JS] 프로그래머스 - 위장
2020. 11. 14. 15:06
알고리즘/프로그래머스
문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. cloth..