2021-12-07 수업내용

(1) 서버 렌더링과 클라이언트 렌더링

• 서버 렌더링 : 서버에서 html을 만들어 웹브라우저에게 보내주는 방식이다.

• 보통 이 방식을 쓴다.

• 클라이언트 렌더링 : 서버에서 결과값만 보내주는방식이다.

• 개발자도구에선 html이 보이지만, 사실 웹브라우저가 알아서 최소 세팅을 해주는 것이고 실제로는 결과값만 간다.

(2) 메서드의 URL 표기법

(3) 태그 용어

(4) input 태그와 입력값

(5) URL 인코딩과 파라미터 값

• encodeURIComponent(문자열): 사용하면 한글 뿐만 아니라 URL에서 특별한 의미로 사용되는 문자(?,+,# 등)도 URL 인코딩한다.

(6) Frontend 핵심 API

1) DOM API (Document Object Model)

• 태그를 찾고, 태그의 속성과 값(내용)을 변경하고, 태그 제거 등의 가능을 한다.

• 태그찾기
  document.getElementById(태그아이디) -> 태그 객체 1개
  document.getElementByTagName(태그명) -> 여러개의 태그
  document.getElementByClassName(클래스명) -> 여러개의 태그
  document.querySelector(CSS 셀렉터) -> 한 개의 태그 객체
  document.querySelectorAll(CSS 셀렉터) -> 여러 개의 태그 객체

• 태그생성
  document.createElement(태그명) -> 태그 객체 1개
  document.createTextNode(내용) -> 콘텐트 객체 1개

• 자식태그 추가/삭제
  Node.appendChind(태그객체) -> 다른 태그 아래에 자식 태그 추가
  Node.removeChind(태그객체) -> 자식 태그 제거

• 태그의 콘텐트 설정
  Node.textContent = 내용 -> 태그의 콘텐트 설정. 내용 안에 태그가 있다면 무시한다.
  Element.innerHTML = 내용 -> 태그의 콘텐트 설정. 내용 안에 태그가 있다면 자식 태그로 추가한다.
  ※ <태그> 콘텐트 </태그>

• 폼 입력 태그의 값 설정
  HTMLInputElement.value = 입력값
  HTMLSelectElement.value = 선택한 옵션 값

2) 태그의 이벤트 처리

• 태그에 대해 특정 이벤트가 발생했을때 호출될 함수를 등록하는것을 말한다.

• 이때, 함수 호출을 개발자가 아니라 웹브라우저가 하는 함수를 콜백함수라 한다.

• 콜백함수는 event listener, event handler와 같은 의미다.

※ 동기, 비동기

• 동기는 각각의 작업이 순서대로 이어지는 형태이고, 비동기는 작업이 동시에 개별로 진행되는 형태로 생각하면 된다.
  ex)
  동기 : 과장이 대리한테 일 던지고, 놀고있다가 대리가 일 끝나면 이어서 자기 작업 하는 형태.

  비동기 : 과장이 대리한테 일 던지고, 계속 자기 작업 하는 형태.

3) AJAX ( Asynchronous Javascript And XML ) API

• 에이젝스 혹은 에이작스로 읽는다.

• 비동기 방식이다.

• 별도의 서버요청 작업을 수행할 때 사용한다.

  ※ XML(eXtensible Markup Language) : W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어.

(1) var xhr = new XMLHttpRequest();

(2)
xhr.addEventListener('load', function() { ... } ); -> 요새 브라우저서 조금씩 사용하는 방식이다.

• 'load' : 서버에서 응답이 오면 발생하는 이벤트
• function() : 응답이 왔을 떄 호출될 함수 => 서버가 보낸 실행결과를 처리

xhr.onreadystatechange = function() { ... } -> 예전 프로젝트서 보통 사용되나 가장 많이 사용되는 방식이다.

(3) xhr.open("GET", URL, 비동기여부); -> 서버에 연결한다.

(4) xhr.send(쿼리스트링 아니면 null); -> 서버에 요청한다.

(7) CSS 셀렉터

• 셀렉터란, 태그를 가리키는 명령으로 파일 경로와 유사하다.

<h1 id='x-title' class = 't1 t2'> </h1>
<h1 id='x-name' class = 't1 t3'> </h1>
<h1 id='x-tel' class = 't2'> </h1>

-- 태그명을 가리킬땐 h1 , 이런식으로 그대로 쓴다.
-- 태그아이디를 가리킬땐 #x-title, 이런식으로 앞에 #을 붙힌다.
-- 태그클래스명을 가리킬땐 .t2, 이런식으로 앞에 .을 붙힌다.

(8) 스프링부트에서 결과 리턴

(1) 요청하면 스프링 부트가 받아서

(2) Exam4의 test3()을 호출한다. - 이 메서드를 request handler(요청이 들어왔을때 호출되는 메서드)라 한다.

(3) Exam4 내부에서 실행되고, 이때 Exam4를 페이지 컨트롤러라 한다.(request handler를 갖고있는 클래스 - 요청을 처리하는 역할을 수행)

(4) Spring boot로 리턴한다.

(5) 리턴값을 메시지 컨버터로 보낸다.

(6) 메시지 컨버터 내에서 리턴 값을 가공한다. 응답할 데이터와 요청으로 받은 데이터 둘 다 가공한다.
이는 (1), (2) 사이에도 일어난다.

• 문자열, 자바 원시 타입 데이터는 문자열로 가공하고, 배열이나 객체는 JSON 형식의 문자열로 가공한다.
• 메시지 컨버터는 보통 잭슨, 제이슨 컨버터를 사용한다.

(7) 가공한 값을 리턴한다.

(8) 스프링 부트에서 응답이 일어난다.

※ 참고할 예제 파일
JAVA 파일 : https://github.com/eomcs/eomcs-java/blob/main/eomcs-java-lang-boot/app/src/main/java/com/eomcs/study/lang/variable/Exam4.java
HTML 파일 : https://github.com/eomcs/eomcs-java/tree/main/eomcs-java-lang-boot/app/src/main/resources/static/lang/variable/exam4
여기서 test3_1.html ~ test3_10.html

(9) JSON 형식의 문자열

• JavaScript Object Notation으로, 자바스크립트의 객체 단독 표기법이다.

• App간의 데이터를 주고 받을때 사용하는 데이터 형식이다.

• 자바스크립트의 객체 초기화 문법(object initializer)을 모방해서 만든 데이터 형식이다( json.org 사이트에 명시됨).

• 차이점
  

※ JS에서 배열은 [값, 값, 값, ...]의 형태이고, JS에서 객체는 {프로퍼티 명 : 값, 프로퍼티 명 : 값, 프로퍼티 명 : 값}의 형태이다.

(10) 객체와 메서드

• 객체, object : 데이터 덩어리

• 메서드 : 객체를 다루는 함수

(11) 클래스와 객체 :

• 클래스 : 객체를 만드는 설계도