Java Script
1.비동기 처리
1)동기 와 비동기
동기
순차적으로 하나씩 처리
하나의 작업이 완료되어야만 다음 작업을 처리할수 있는 방식
비동기
작업을 수행하다가 쉬는 시간이 생기거나 일정한 시간 이상 작업을 하거나 프로세서를 사용하지 않는 작업(입출력 작업- 디스크나 네트워크에서 데이터를 받아오거나 전송하는 작업) 을 수행하는 경우 다른작업을 수행할 수 있도록 하는 방식
오랜시간이 걸리는 작업은 비동기로 처리하는것이 일반적
비동기 작업이 완료 되었거나 중간에 에러가 발생한경우 처리
=>콜백 - 연속된 경우 콜백 안에 콜백을 계속 삽입하는 구조
=>Promise:연속된 콜백을 사용하는 경우의 가독성 문제와 콜백 메서드 안에서의 예외 처리 부분을 해결하기 위해 등장
then 과 catch를 연속해서 작성하는 구조
.then()
.then()
.then()
.catach()
=>async/await:Promise를 조금 더 간결하게 작성하기 위해서 등장
async 함수(){
변수 = await(비동기 처리)
}
콜백보다는 promise를 조금더 많이사용
오버헤드
JavaScript 에서의 Communication(통신)
=>SOP(Simple Origin Policy) 와 CORS
SOP(동일 출처 정책):동일한 도메인(등록된 도메인이 같아야 하는데 포트번호까지를 확인) 의 데이터만 가져와서 사용할 수 있도록 한 브라우저의 보안 정책
브라우저에서 다른 도메인의 데이터를 사용하고자 하는 경우에는 서버에서 CORS 설정을 해주거나 클라이언트에서 Proxy를 이용해서 데이터를 가져오도록 작성
CORS(Cross Origin Resource Sharing - 교차 출처 자원 공유): 다른 도메인에서 자원을 사용 할수 있도록 해주는 것
Proxy:내부에 데이터를 요청하는 형태로 작성을 하지만 Application Server에서 외부로 나가서 데이터를 가져와서 전달해주는 방식
cors는 서버에서 proxy 클라이언트에서
리액트 는 노드를 먼저 다운로드
Ajax
비동기 적으로 서버의 데이터를 받아오는 자바스크립트 기술
Fetch API
AJax의 단점을 보완하기 위해서 등장한 비동기 자바스크립트 기술
=>promise 나 async/await 를 적용해서 Fetch API를 사용하기 쉽도록 해주는 자바스크립트 라이브러리 중에 axios 가 있는데 이 라이브러리를 사용하기도 함
Web Push
클라이언트의 요청이 없어도 서버에서 클라이언트로 데이터를 전송하는 기술
Web Socket
연결형 서비스
3.데이터 표현 방법
서로 다른 방식의 컴퓨터에서 데이터를 주고 받으려면 표준적인 포맷이 있어야 합니다.
Parsing: 가져온 데이터를 해석하는 과정
=> 서버 입장에서는 이 데이터 표현방식을 데이터를 만들어서 제공하는 것이 중요하고 클라이언트 입장에서는 이 데이터를 파싱해서 출력하는 것이 중요합니다.
DTD:
HTML 이나 XML은 브라우저가 해석하기도 하고 설정에 이용하는 경우에는 설정을 만든 곳에서 해석을 해야 하는데 이 해석하는 위치를 DTD라고 합니다.
1) 텍스트
일반 문자열
구분 기호를 가지고 구분할수 있도록 만든 포맷을 CSV라고 합니다.
변하지 않는 데이터를 제공하고자 할때 주로 이용
용량이 작기 때문
2) XML
태그 형식으로 데이터를 표현
해석을 개발자가 한다는 것이 HTML과 다른점입니다.
설정이나 데이터 전송에 이용을 합니다.
다른 방식보다 용량이 크기때문에 최근에는 사용 빈도수가 낮아지고 있다.
3) JSON
자바스크립트의 데이터 표현법을 이용하는 방식
XML보다 용량이 작기 때문에 데이터 전송에 많이 이용합니다.
4) YML(야믈)
=>이메일 데이터 표현 방식으로 가독성이 좋고 용량이 작기 때문에 최근에 설정에 많이 이용됩니다.
구글에서 만든 제품에서 Spring 에서는 YML을 설정에 이용하고 있습니다.
아직 데이터 전송에는 사용 빈도 수가 낮습니다.
5) HTML
HTML은 데이터를 표현하는것이 아니고 화면을 만드는 것입니다.
화면에 보여지기는 하지만 Open API를 제공하지 않는 경우에 HTML을 가져와서 (Scraping)임의로 해석해서 데이터처럼 사용하는 경우가 있습니다.
HTML로 제공하는 경우는 Open API로 제공하는 것이 아니기때문에 저작권을 반드시 확인하고 사용해야 합니다.
4.프로젝트에서 모듈화
1)src
컴파일 되어야 하는 소스 파일
2)resources
5.AJax 실습
1)json 파싱
resources 디렉토리에 데이터로 사용할 json 파일을 생성-서버를 공부하면 직접 만들지 않습니다.
{
"count":2,
"documents":[
{"name":"park", "age":23, "birthday":"09-13"},
{"name":"kim", "age":32, "birthday":"08-18"}
]
}2)XML 파싱
집에서 해보기
6.웹 클라이언트에서 웹 서버에게 데이터를 전송하는방법
1)URL에 포함시키는 방법 -가장 최근에 등장한 방식으로 데이터가 1개일 때 주로 이용
=>Bloter.net 이나 Tistory의 상세 보기가 대표적
GET방식
2)요청 방식에 따른 데이터 전달
=>GET방식: 데이터를 요청할 때 사용하는 방식으로 URL 뒤에 ?를 추가하고 이름= 값 의 형태로 데이터를 전송
이 데이터 부분을 parameter라고 하기도 하고 query string 이라고 하기도 합니다.
history에 남기 때문에 보안성이 떨어집니다.
데이터의 길이에 제한이 있습니다.
캐싱이 가능해서 재전송이 가능합니다.
조회는 GET을 사용하고 삭제에는 DELETE를 사용합니다.
get 방식은 자동으로 재전송
=>POST방식: 삽입,갱신을 할 때 사용하는 방식으로 HTTP Body에 데이터를 넣어서 전송하는 방식
데이터의 길이에 제한도 없음
캐싱이 안되기 때문에 자동 재전송 기능이 없습니다.
최근에는 데이터를 삽입할때만 사용하고 수정을 할때는 PUT,PATCH 같은 방식을 이용하는 것을 권장합니다.
3) 헤더 설정을 이용해서 데이터를 전달하기도 합니다.
주로 인증 정보를 전송할 때 많이 사용합니다
7.다른 방식을 이용한 ajax
1) Promise를 이용하는 방식
=>콜백을 이용하는 방법보다 가독성이 좋습니다.
일반적으로 콜백 안에서 콜백을 호출하는 경우에는 promise를 사용하는 것이 좋습니다.
=>promiseajax.html파일을 생성
2) Fetch API
=>서버의 데이터를 가져오는 로직을 단순화 한 ajaax보다 새로운 API
기본적으로 Promise를 리턴하기 때문에 별도의 콜백을 만들지 않아도 됩니다.
=>단순한 GET 요청
=>요청과 응답 등의 요소를 javascript 에서 접근하고 조작할수 있는 인터페이스를 제공하는 API
fetch() 라는 전역 함수를 이용해서 네트워크의 리소스를 비동기적 으로 가져올수 있음
XMLHttpRequest 대신 사용
fetch(요청 URL, 옵션)의 형태로 작성하는데 결과는 Promise 객체로 리턴되기 때문에 then 과 catch를 이용해서 처리
옵션:https://developer.mozilla.org/en-US/docs/Web/API/fetch
요청에 성공했을 때 전달되는 객체는 Response
Response 속성 - status(상태코드 값을 담은 정수), statusText(상태코드 메시지), ok(성공여부 판단)
Response 메서드
arrayBuffer(): 바이트 배열 - blob와 유사
bolb(): 파일의 내용
form Data(): 폼의 데이터 -FORM 의 형태로 응답하는 경우(가장사용을안함)
json(): JSON 파싱한 결과 - JSON으로 응답하는경우
text(): 결과 데이터 문자열- 문자열로 응답하는경우
=>일반적인 처리 방식
fetch(url, {옵션이름:옵션값....})
.then((response) => response.메서드)
.then((data) => {파싱한 결과를 가지고 수행할 내용})
.catch((error) => {에러가 발생했을 때 수행할 내용})리다이렉트 Ex)회원가입후 새로고침하면
상태코드 (외워야함)
100 번대는 요청 중
200 번대는 요청 처리 성공하고 응답을 전송받음
300 번대는 요청을 처리하고 리다이렉트 중
400 번대는 클라이언트 오류(401- 권한없음, 404- 요청 URL이 잘못됨)
500 번대는 서버 오류
8.오늘 수업에서 해볼만한 복습 과제
https://jsonplaceholder.typicode.com/posts에서 데이터를 읽어와서 userld와 title만 출력해보기
HTML5
1.HTML5
=>XHTML4에서 진화한 마크업 언어
=디자인 과 내용의 분리 - 특별한 경우가 아니면 디자인은 CSS를 이용
=>자바 Applet, Active X, 플래시 와 같은 외부 플러그 인을 최소화 - 자바의 플렉스 나 .NET 의 실버라이트 배제
=>문서 구조의 의미나 문서 안에 삽입된 데이터의 의미 등을 명확하기 위한 사양이 추가 - Semantic
=>마크 업 언어에 웹 애플리케이션을 만들 수 있는 API(JavaScript를 이용해서 제작)를 포함
2.태그 의 변화
1)추가 된 태그
section, article, aside, header, hgroup,footer,nav: 문서 구조와 관련된 태그
figure, audio, video, canvasm source: 외부 콘텐츠 사용
keygen, output, progress, meter: 폼 관련 태그
mark, ruby, time, command, details, datalist; 텍스트 관련 태그
2) 변경된 태그
hr, menu, small, strong
3)태그에 추가된 속성
input: 모바일을 위한 속성 과 유효성 검사 관련 속성이 추가
4)없어진 요소
bgsound, applet 등
3.API 변화
1) 로컬 저장소 - 이전에는 Cookie만 사용
Web Storage
Web SQL
Indexed DB
2)Drag AND DROP API
3)GeoLocation:위치 정보
4)Canvas; 그리기 API
=>그래프 나 이미지 출력을 외부 라이브러리 도움 없이 구현 가능
5)Web Worker: Thread
6)Math ML:수식을 표현, FireFox에서만 적용 가능
7)Communication API
=>ajax level 2
=>Server Sent Events(WEb Push)
=>Web Socket API
4.권장 사항
=>Cookie 보다는 Local Storage 를 이용하는 것을 권장
Cookie는 서버에게 요청할 때 마다 전송되고 문자열만 저장 가능
Local Storage 는 자바스크립트 객체를 저장할 수 있고 필요할때 서버에게 전송 가능
=>Cache 보다는 로컬 데이터베이스를 사용하는 것을 권장
=>자바스크립트 애니메이션 대신 CSS의 전환 효과를 이용
=>부담을 많이 주는 작업은 웹 워커 사용을 권장 -자바스크립트를 이용해서플러그인 이나 PC에서 직접 동작하는 애플리케이션 개발
5.기본적인 문서 구조
1)DOCTYPE -DTD
2)인코딩 설정
<meta chasrset ="인코딩 방식">
3) 문서 검증
=>http://html5.validator.nu
6.HTML5를 지원하지 않는 브라우저를 위한 코딩 - 지금은 거의 의미가 없음
Mark up
1)추가된 섹션 요소
=>header, section, article, aside, nav, footer 등
=>div 와 동일한 역할을 수행
명확한 의미 전달을 위해서 추가
브라우저의 내용을 인간이 아닌 robot이 읽었을 때 명확하게 의미를 전달하기 위해서
2)figure, figcaption
=>이미지 나 그래프 또는 예제 코드 등을 작성할 때 문서 안에 삽입해서 의미를 전달하기 위해서 사용
<figure>
<img src = "이미지 파일의 경로"/>
<figcaption>그림에 대한 설명</figcaption>
</figure>
이미지 아래에 그림에 대한 설명이 추가됩니다.
=>음성 브라우저에서는 그림에 대한 설명을 읽어줍니다.
3)ruby
=글자 위에 조그만한 글자를 표시하는 기능
한자 사용할 때 위에 독음을 표시하는 용도 많이 사용
멀티미디어
1) video
=>비디오 재생을 위한 태그
=>자바스크립트 객체로 추가됨
<video id = "video"></video>
document.getElementByld("video")
=>외부 플러그 인 없이 동영상을 제어할 수 있음
=>브라우저 별로 코덱이 다르기 때문에 모든 동영상 파일이 전부 재생되는 것은 아님
=>동일한 동영상을 여러 포맷으로 만들어 제공하는 것이 좋습니다.
<video src = "동영상 URL"><video>
<video>
<source src = "동영상 URL"/>
<source src = "동영상 URL"/>
...
</video> 2)audio
=>video 태그 와 사용법이 같음
3)canvas
=>그래픽을 자유롭게 출력할수 있는 html5에서 추가된 API
=>2D 그래픽을 지원
=>3D 그래픽은 Web GL을 이용해서 구현
그래픽 가속 기술 : Open Gl (windows 는 Direct X)
Open GL 이 어려워서 이를 쉽게 사용할 수 있도록 만든 그래픽 엔진: Unity 3D, Unreal
스마트 폰은 Open GL ES 인데 애프은 자체 API를 제공
웹 그래픽 가속: Web GL
오디오 가속 : Open AL
그래픽 편집 : Open CV
=>태그로는 아무일도 하지 못함
태그로 만들기만 하고 모든 작업은 자바스크립트를 이용해서 수행합니다.
=>사용법
<canvas id = "아이디" width = "너비" height"높이"></canvas>
let 캔버스 변수 = document.getElementByid("아이디");
let contxt 변수 = 캔버스변수.getContext("2d");
context 변수를 이용해서 그리기 작업
context변수.save():컨텍스트 정보 저장
contex 변수,restore();컨텍스트 정보 복원
=Context: 어떤 작업을 하기 위해 필요한 부가 정보
그림을 그리기 위해서 선 색상, 면 색상,선 두께 등의 정보가 필요한데 이 정보를 일일이 설정하게 되면 그림을 하나 그리는데 설정을 너무 많이 해야 합니다.
설정에 대한 부분을 Context 에 저장해두고 필요한 부분만 수정해주면서 사용을 합니다.
=>imageSprite:여러 개의 이미지를 하나의 파일로 만들고 이미지를 적절한 크기로 잘라서 사용
컴퓨터에서 가장 많이 걸리는 시간을 소모하는 작업 중의 하나가 보조 기억 장치에 있는 파일을 읽어오는 부분이기 때문에 이미지를 각각의 파일로 저장해서 읽어오는 것보다는 여러개의 이미지를 하나의 파일로 만든 후 이를 불러들인 후 나누어서 출력하는 것이 효율적인 경우가 많습니다.
=>각 픽셀의 값을 제어하는 것이 가능
원형 UI클릭을 만들고자 하는 경우 배경이 투명인 상태로 원을 그리고 마우스로 클릭했을 때 그 영역의 색상 값을 추출해서 알파 값이 0이면 동작을 하지않고 알파값이 0이 아니면 동작하도록 만들면 원형 UI를 만들 수 있습니다.
4)SVG(Scalable Vector Graphics)
XML을 이용해서 벡터 그래픽을 표시하는 API - 웹 표준
canvas는 Pixel 단위로 그림을 그리지만 SVG 벡터 이미지
5)canvas 와 SVG 의 비교
FORM
1)기능 변화
여러가지 타입 추가
유효성 검사 기능이 추가
진행 상황을 표시해주는 PROGRESS 와 meter가 추가
2)input 의 type 추가: 모바일을 위한 속성
기존 input type : text, password, checkbox, radio, file, button, image, submit, reset, hidden
추가된 type: search, tel,url.email,number,range, color, date,month, week,time,datetime-local
네트워크 맞추었을 때 스마트 폰에서 접속하는 방법
jquery를 왜 사용했는지
HTML5는 브라우저 별로 지원 범위가 다름
HTML5 에서 추가된 기능을 사용하게 되면 브라우저 별로 다르게 설정을 해야 동일한 컨텐츠를 사용할 수 있씁니다.
JQuery는 이 부분(cross browsing)을 쉽게 해주는 자바스크립트 라이브러리 입니다.
국내에서는 IE 비중이 많이 낮아졌고 IE대신에 나온 Edge 는 HTML5를 지원하기 때문에 최근에는 JQuery 사용을 잘 하지 않는 추세입니다.
jQuery 의 단점 중의 하나가 랜더링 속도가 느리다는 것 입니다.
3)progress 와 meter
진행율을 보여주고자 할때 사용하는 요소
자바스크립트를 이용해서 제어
기본적으로 max value는 100으로 설정되어 있고 value 속성을 이용해서 진행율을 표시합니다.
최대값이나 최소값을 변경하고자 하는 경우는 min과 max 속성의 값을 변경하면 됩니다.
Memory Leak
용도가 끝났는데도 작업을 계속 수행하고 있어서 메모리 낭비가 발생하는것
입출력 작업을 수행하거나 타이머 같은 자원을 사용할 때 주로 발생
타이머는 사용이 끝나면 해제해주어야 하고 입출력 작업은 스트림을 닫아야 합니다.
4) 추가된 속성
file: multiple 속성이 추가되서 속성을 설정하면 여러개의 파일을 선택할 수 있음
autocomplete 속성:자동 완성 기능 사용 여부로 on과 off로 설정
list속성 과 datalist속성을 이용하면 입력 값을 선택할수 있도록 할수 있습니다.
<input type = "tel" list = "telephonelist">
<datalist id = "telephonelist">
<option value = "010-3790-1997" />
<option value = "010-3139-1997" />
</datalist>placeholder 속성을 이용해서 입력할 때 설명을 위한 텍스트 설정
autofocus 속성을 이용해서 첫번째 포커스 설정
5)유효성 검사(Validation Check)
required : 필수 입력
maxlength :최대 글자 수
min, max :최소 최대 값 - 숫자 나 날짜에 사용
pattern: 정규 표현식 설정 가능
WebClient(브라우저 또는 애플리케이션) <-> Web Server <-> Application Server(Controller-Service-Repository) <->
Data Server(Database Server, File Server)
Web Server 부터 Data Server 까지는 애플리케이션 과 다른 곳에 워치- Web Client 와 Server 간에 통신을 하게되면 Traffic이 발생하게 되고 비용이 발생
Web Client 에서 Web Server로 전송하기 전에 유효성 검사를 해야 하고 Application Server 가 Web Client 로 부터 Data를 전송받으면 유효성 검사를 해야 합니다.
Web Client 에서 유효성 검사를 수행해서 조건에 맞지 않는 경우 전송을 하지않으면 Traffic을 아낄수 있기 때문에 수행해야 하고 Application Server에서 다시하는 이유는 데이터 전송중에 변형이 이루어졌을지 모르기 때문입니다.
