11/14 수업 정리

목차

월요일 복습

• 백엔드 ; 서버에서 돌아가는 부분
• 프론트엔드 : 로컬에서 돌아가는 부분
• 브라우저에서만 돌아가던 자바스크립트를 로컬에 따로 설치한 것이 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. 버튼 누르기
• 처리 방법

1. html태그에 이벤트 처리 속성을 이용
2. 문서 객체 모델 DOM 요소에 속성을 추가
3. 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() : 선택자와 일치하는모든 노드를 가지고 옴
  
• 스타일 속성 변경 ( 특정 태그 요소의 스타일 속성을 직접 변경)
  
• 스타일 객체 변경 ( 위의 방식과 동일하지만 구현에서의 차이가 있음. 태그의 속성을 문자열로 저장하는것이 아닌 객체 참조방식으로 스타일 속성을 지정)
  
• 클래스 변경 (태그 노드의 속성이 아니라 클래스 변경을 통해 디자인 변경)