01 Study

Today I Learned 01

shinhye 2023. 4. 23. 16:39
이 TIL은 2023년 1월 4일에 작성되었습니다.



Hack Coding GIF By Matthew Butler via GIPHY



DOM - 14 methods

 

Direct Object Model(DOM)이란?

DOM은 HTML 또는 XML 문서의 구조화된 표현을 제공한다.
DOM을 통해 문서의 다양한 요소들에 접근하여 각종 프로퍼티를 변경할 수 있다.

DOM을 공부한 이유

위코드 부트캠프를 본격적으로 시작하기에 앞서 사전스터디를 진행하게 된다.
공부하다가 접하게 된 개념을 정리해 보았다.

자주 사용되는 12가지 DOM 메서드

Javascript에서 자주 사용되는 12가지 DOM 메서드는 다음과 같다.

  • getElementById() 고유 ID 속성으로 요소를 반환한다
  • getElementsByClassName() 특정 클래스 이름으로 요소의 컬렉션을 반환한다
  • getElementsByTagName() 특정 태그 이름으로 요소의 컬렉션을 반환한다
  • querySelector() 특정 CSS 선택지와 일치하는 첫 번째 요소를 반환한다
  • querySelectorAll() 특정 CSS 선택자와 일치하는 모든 요소의 NodeList 객체를 반환한다
  • createElement() 새 HTML 요소를 생성한다
  • appendChild() 노드를 부모 노드의 마지막 자식으로서 추가한다
  • removeChild() 부모 노드에서 자식 노드를 제거한다
  • setAttribute() 요소의 속성에 값을 설정한다
  • getAttribute() 요소의 특정 속성 값을 가져온다
  • addEventListener() 특정 요소에 이벤트 핸들러를 추가한다
  • innerHTML 요소 내 HTML 내용을 불러오거나 설장한다


CSS - flex box

 

CSS란?

CSS(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 디자인과 레이아웃을 설명하기 위한 스타일 시트 언어다. 여기서 스타일 시트란 특정 문서가 표준화된 방식으로 구현될 수 있도록 폰트와 레이아웃 세팅으로 구성된 템플릿 파일을 의미한다. 즉, 웹페이지의 요소들이 표시되는 방법, 레이아웃, 색상, 글꼴 등을 쉽게 정의할 수 있다.

CSS는 웹페이지의 시각적인 측면을 세밀하게 디자인을 구현하는 데 사용되기 때문에 프론트엔드 개발에 사용된다.

Flex box란?

플렉스 박스란 컨테이너 내에서 요소들을 효율적으로 배치하기 위해 설계된 CSS 레이아웃 모델이다. 각 요소의 크기와 상관 없이 정렬, 순서, 크기 등을 손쉽게 제어할 수 있다. 여기서 플렉스 컨테이너는 부모 요소이고 플렉스 아이템은 자식 요소로, 플렉스 박스의 주요 구성을 이루고 있다.

API

API란?

애플리케이션 프로그래밍 인터페이스(application programming interface)의 약자로 클라이언트와 데이터베이스 사이를 연결해 주는 응용 프로그램이다. (응용프로그램에서 사용할 수 있도록, 운영체제 혹은 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스)

Node.js

Node.js란?

Node.js는 서버측에서 JavaScript 코드를 실행할 수 있는 런타임 환경이다. 구글에서 개발한 V8 JavaScript 엔진을 통해 가능하다. Node.js의 기본 내장 모듈, http 모듈로 서버를 구축할 수 있다.

기본 내장 모듈 예시

  • 파일 시스템(File System): 파일 읽기 및 쓰기, 디렉터리 생성 및 삭제, 권한 수정 등 파일 시스템 동작을 가능하게 한다.
  • HTTP: http 요청 및 응답을 처리할 수 있게 해준다.
  • Path: 파일경로 및 디렉터리를 접근 및 사용할 수 있는 도구를 제공한다