목차
월요일 복습
- 백엔드 ; 서버에서 돌아가는 부분
- 프론트엔드 : 로컬에서 돌아가는 부분
- 브라우저에서만 돌아가던 자바스크립트를 로컬에 따로 설치한 것이 nodeJS
- 파이썬 웹 프레임워크 - danjo , flask ...
- nodeJS 기반으로 발전한 웹 프레임워크 : express
- java 웹 프레임워크 : Spring
- SpringBoot? 스프링(Spring)을 더 쉽게 이용하기 위한 도구 ( 다른 프레임워크들 사용법이 쉬워지자 그들 사이에서 경쟁력을 얻기 위해 쉽게 만들었다고 하셨음)
- express, flask, springBoot 셋 모두 매우 비슷함
자바스크립트
- 정적 html 콘텐츠에서 동적으로 변경하는 부분을 담당 & 사용자와 상호작용 가능 (이벤트 처리통해 가능함)
- html의 내용과 속성 스타일등을 변경 가능하다
- 다른 컨텐츠에 영향을 주지 않으면서 내용이 변동되는부분 (i.e. 클릭하면 나오는 숨겨진 메뉴구성, 날씨, 검색자동완성, 홈쇼핑 실시간 상담 ,, 등)
- 객체 지향 프로그래밍과 함수형 프로그래밍 모두 표현 가능
- 프론트엔드 프레임워크(Vue, Angular, React,,)에서 부터 nodeJS를 기반으로 하는 서버 프로그래밍영역까지 다양하게 사용됨
자바스크립트 구성요소
- 기본적 기능( 변수, 함수, 객체, 클래스, 조건문, 반복문, 자료구조 )
- 비동기 처리 지원
- http 응답처리, DOM , 객체 정의하는 json 구문
문법적 특징
- 변수 타입 지정하지 않고 var, let, const 사용
- 이미만들어진 변수 이름으로...
- var(함수범위): 재선언 가능
- let(블록범위변수): 재선언 불가능, 재할당 가능
- const(블록범위변수): 재선언 & 재할당 불가능
- 이미만들어진 변수 이름으로...
- 함수형 언어를 지원하고 함수는 변수, 함수인자, 객체멤버등에 사용될 수 있음
- <script>태그는 html의와의 영역 모두에서 사용가능함
이벤트처리
- 이벤트 발생?
- html 문서에서 발생하는 상황으로, 보통 자바스크립트 코드와 연계됨
- ex. 버튼 누르기
- 처리 방법
- html태그에 이벤트 처리 속성을 이용
- 문서 객체 모델 DOM 요소에 속성을 추가
- DOM 요소에 addEventListener() 로 콜백함수를 등록
- 자바스크립트 속성중에 'on~'으로 시작하는것들이 이벤트 핸들러이다.
DOM? (Docunment Ojbect Model )
- 웹 페이지에 대한 인터페이스
- 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공
- DOM은 유효한 HTML 문서의 인터페이스.
- DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정합니다
- 이 DOM이 없다면 html은 그냥 텍스트일 뿐임. 이게 있어야 html을 제어할 수있음
DOM 체계
- 태그 : element node로 정의
- 태그의 속성 :attribute node로 정의
- 태그 보디의 텍스트는 다시 텍스트 노드가 될수 있다
- 경우에 따라서는 innerHTML속성으로 표현하는것도 가능함
- DOM 체계에서 모든 HTML은 브라우저에 의해 로딩될 떄 각각의 요소가 하나하나 부모-자식 관계를 가지며 트리 구조로 재구성됨.
DOM에 접근하기
- querySelector() : 선택자와 일치하는 첫번째 노드만 가지고 옴
- querySelectorAll() : 선택자와 일치하는모든 노드를 가지고 옴
- 스타일 속성 변경 ( 특정 태그 요소의 스타일 속성을 직접 변경)
- 스타일 객체 변경 ( 위의 방식과 동일하지만 구현에서의 차이가 있음. 태그의 속성을 문자열로 저장하는것이 아닌 객체 참조방식으로 스타일 속성을 지정)
- 클래스 변경 (태그 노드의 속성이 아니라 클래스 변경을 통해 디자인 변경)
'내가 보려고 정리하는 > ETC' 카테고리의 다른 글
마크다운 사용법 (0) | 2022.11.05 |
---|---|
highlight.js를 이용한 코드블럭 테마 변경 (0) | 2022.11.04 |