분류 전체보기

TIL - 20220828

오늘은 모던 JavaScript 튜토리얼에서 스타일과 클래스에 대해 공부했다. 작성한 질문은 다음과 같다. 요소에 스타일을 적용하는 방법으론 두 가지 방법이 존재한다. CSS가 담긴 클래스를 만들고 처럼 클래스로 추가하기 처럼 프로퍼티를 style에 바로 써주기 보통 style보다 CSS가 담긴 클래스를 만들어 사용하는 것을 우선시 해야 한다. style은 클래스를 다룰 수 없을 때 사용해야 한다. 클래스를 관리할 수 있게 해주는 DOM 프로퍼티로는 다음이 있다. className: 클래스 전체를 문자열 형태로 반환해주는 프로퍼티 클래스로 클래스 전체를 관리할 때 유용하다. classList: 클래스 하나를 관리할 수 있게 도와주는 메서드이며 add/remove/toggle/contains가 구현된 객체..

TIL - 20220827

오늘은 모던 JavaScript 튜토리얼에서 문서 수정하기에 대해 공부했다. 작성한 질문은 다음과 같다. DOM 노드를 만들 때 사용하는 메서드로는 다음과 같다. document.createElement(tag): tag에는 div, span과 같은 HTML 태그를 넣어주며, 태그 이름을 사용해 새로운 요소를 만든다. document.createTextNode(text): 주어진 text를 바탕으로 새로운 텍스트 노드를 만든다. 자바스크립트에서 지원하는 노드 삽입 메서드로는 다음과 같다. node.append(노드 혹은 문자열): 노드나 문자열을 node 끝에 삽입한다. node.prepend(노드 혹은 문자열): 노드나 문자열을 node 맨 앞에 삽입한다. node.before(노드 혹은 문자열): 노..

TIL - 20220826

오늘은 모던 JavaScript 튜토리얼에서 속성과 프로퍼티에 대해 공부했다. 작성한 질문은 다음과 같다. 속성과 프로퍼티에 대해 간단히 설명하면 속성은 HTML에 쓰이는 것이고, 프로퍼티는 DOM 객체에 쓰이는 것이다. 표로 자세히 비교하면 다음과 같다. 프로퍼티 속성 타입 모든 타입 가능 문자열 이름 대, 소문자를 구분 O. 대, 소문자를 구분 X. 속성과 함께 쓰이는 메서드로 다음이 있다. hasAttribute(name) - 속성 존재 여부 확인. setAttribute(name, value) - 속성값을 설정한다. getAttribute(name) - 속성값을 가져온다. removeAttribute(name) - 속성값을 제거한다. attributes - 속성의 컬렉션을 반환한다.

TIL - 20220825

오늘은 모던 JavaScript 튜토리얼에서 주요 노드 프로퍼티에 대해 공부했다. 작성한 질문은 다음과 같다. EventTarget, Node, Element, HTMLElement 클래스들은 다음과 같은 특징을 지닌다. EventTarget: 루트에 있는 '추상' 클래스. 이 클래스에 대응하는 객체는 실제로 만들어지진 않는다. Node: EventTarget과 같은 '추상' 클래스로 DOM 노드의 베이스 역할을 한다. Element: DOM 요소를 위한 베이스 클래스 HTMLElement: HTML 요소 노드의 베이스 역할을 하는 클래스 tagName과 nodeName의 차이점은 다음과 같다. tagName 프로퍼티는 요소 노드에만 존재한다. nodeName은 모든 Node에 존재한다. innerHTM..

TIL - 20220824

오늘은 모던 JavaScript 튜토리얼에서 getElement*, querySelector*로 요소 검색하기에 대해 공부했다. 작성한 질문은 다음과 같다. document.getElementById는 접근하고 싶은 요소를 요소에 id가 존재한다면 위치에 상관없이 접근할 수 있는 메서드이다. querySelector는 주어진 CSS 선택자에 해당하는 요소 중 첫 번째 요소를 반환하며, querySelectorAll은 주어진 CSS 선택자에 해당하는 요소 전부를 배열로 반환한다. matches는 메서드로써 주어진 CSS 선택자와 일치하는지 여부를 판단해주는 역할을 한다. 조상 요소는 부모 요소, 부모 요소의 부모 요소같이 특정 요소 상위에 있는 요소들을 조상 요소라고 일컫는다.

TIL - 20220823

오늘은 모던 JavaScript 튜토리얼에서 DOM 탐색하기에 대해 공부했다. 작성한 질문은 다음과 같다. , , 태그는 document 프로퍼티 다음에 속한다. : document.documentElement : document.body : document.head 자식 노드: 어떤 요소 바로 아래의 자식 요소를 자식 노드라고 칭한다. 예를 들어, 와 는 요소의 자식 노드이다. 후손 노드: 자식 노드, 자식 노드의 모든 자식 노드들을 모두 후손 노드라고 칭한다. 형제 노드: 같은 부모를 가진 노드들을 형제 노드라고 칭한다. 첫 번째, 마지막 자식 노드에 빠르게 접근하는 방법은 firstChild, lastChild로 빠르게 접근할 수 있다.

TIL - 20220822

오늘은 모던 JavaScript 튜토리얼에서 DOM 트리에 대해 공부했다. 작성한 질문은 다음과 같다. DOM의 특징으로는 다음과 같이 있다. DOM에 따르면, 모든 HTML 태그는 객체다. 또한, 태그 내의 텍스트 역시 객체다. 이런 객체들은 JavaScript를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용하면 된다. 또한 태그를 요소 노드라고 부르며 트리 구조를 구성한다. 을 루트 노드라고 부르며 그 아래 있는 , 가 루트 노드의 자식 노드가 된다. 요소 내의 태그가 아닌 문자는 텍스트 노드가 된다. 태그가 없는 경우에는 자동으로 문서 최상위에 태그를 넣어주고, 닫는 태그가 없는 경우에도 자동으로 닫는 태그를 넣어주는 자동 교정이 진행된다. 주석도 노드가 된다. 정확하게 표현하면 HTM..

CRA없이 Webpack, React, TypeScript로 개발 환경 설정하기

토이 프로젝트를 만드는 과정에서 CRA에 TypeScript를 적용하는 것이 아닌, npm init을 통한 초기 설정부터 Webpack, Babel, React, TypeScript를 하나하나 적용하는 과정을 이번 글로 작성해보려 합니다. npm init 원하는 이름의 폴더를 생성한 후, npm init부터 시작해보도록 하겠습니다. mkdir ts-react-noncra cd ts-react-noncra npm init 여기서 npm init을 실행하면 package name, version, description 등 프로젝트에 대한 정보를 입력하는데, 따로 작성하고 싶은 정보가 있다면 작성해도 되지만, 작성하고 싶은 내용이 없는 경우, npm init -y로 스킵할 수 있습니다. 과정을 진행하면 pac..