스터디/KAKAOCLOUDSCHOOL
[JavaScript] 개발자 지망생 스터디 - 9일차
shineIT
2022. 11. 14. 17:50
■ 비동기 처리
- 동기 와 비동기
- 동기
- 순차적으로 하나씩 처리
- 하나의 작업이 완료되어야만 다음작업을 처리할수 있는 방식
- 비동기
- 작업을 수행하다가 쉬는 시간이 생기거나 일정한 시간 이상 작업을 하거나 프로세서를 사용하지 않는 작업(입출력 작업 - 디스크나 네트워크에서 데이터를 받아오거나 전송하는 작업)을 수행하는 경우 다른 작업을 수행할 수 있도록 하는 방식
- 오랜 시간이 걸리는 작업은 비동기로 처리하는 것이 일반적
- 동기
- 비동기 작업이 완료되었거나 중간에 에러가 발생한 경우 처리
- 콜백
- 연속된 경우 콜백안에 콜백을 계속 삽입하는 구조
- Promise
- 연속된 콜백을 사용하는 경우의 가독성 문제
- 콜백 메서드 안에서의 예외 처리 부분을 해결하기 위해 등장
- then과 catch를 연속해서 작성하는 구조
- .then()
- .then()
- .then()
- .catch() - 예외 처리
- async/await
- Promise를 조금 더 간결하게 작성하기 위해서 등장
- 콜백
async 함수(){
변수 = await(비동기 처리)
}■ Javascript 에서의 Communication(통신)
>> SOP(Simple Origin Policy) 와 CORS
- SOP (동일 출처 정책) : 동일한 도메인(등록된 도메인이 같아야 하는데 포트번호까지 확인)의 데이터만 가져와서 사용할 수 있도록 한 브라우저의 보안 정책
브라우저에서 다른 도메인의 데이터를 사용하고자 하는 경우에는 서버에서 CORS 설정을 해주거나 클라이언트에서 Proxy를 이용해서 데이터를 가져오도록 작성
- CORS(Cross Origin Resource Sharing - 교차 출처 자원 공유) : 다른 도메인에서 자원을 사용할 수 있도록 해주는 것
- Proxy : 내부에 데이터를 요청하는 형태로 작성을 하지만 Application Server에서 외부로 나가서 데이터를 가져와서 전달해주는 방식
- ajax : 비동기적으로 서버의 데이터를 받아오는 자바스크립트 기술
- Fetch API : ajax의 단점을 보완하기 위해서 등장한 비동기 자바스크립트 기술
- Promise 나 async/await를 적용해서 Fetch API를 사용하기 쉽도록 해주는 자바스크립트 라이브러리 중에 axios 가 있는데 이 라이브러리를 사용하기도 함
- Web Push : 클라이언트의 요청이 없어도 서버에서 클라이언트로 데이터를 전송하는 기술
- Web Socket : 연결형 서비스 (ex, 채팅 서비스)
■ 데이터 표현 방식
>> 서로 다른 방식의 컴퓨터에서 데이터를 주고 받으려면 표준적인 포맷이 있어야 함
>> Parsing : 가져온 데이터를 해석하는 과정
>> 서버 입장에서는 이 데이터 표현 방식을 데이터를 만들어서 제공하는 것이 중요하고 클라이언트 입장에서는 이 데이터를 파싱하여 출력하는 것이 중요함.
>> DTD : HTML이나 XML은 브라우저가 해석하기도 하고 설정에 이용하는 경우에는 설정을 만든 곳에서 해석을 해야하는데 해석하는 위치를 DTD라고 함
- 텍스트
- 일반 문자열
- 구호 기호를 가지고 구분할 수 있도록 만든 포맷을 csv라고 함
- 변하지 않는 데이터를 제공하고자 할 때 주로 이용
- 용량이 작기 때문임.
- XML
- 태그 형식으로 데이터를 표현
- 해석을 개발자가 한다는 것이 HTML과 다른 점
- 설정이나 데이터 전송에 이용을 함.
- 최근에는 사용 빈도 수가 낮아지는 추세임 - 용량이 크기 때문
- JSON
- JavaScript의 데이터 표현법을 이용하는 방식
- XML보다 용량이 작기 때문에 데이터 전송에 많이 이용
- YML(YAML - 야믈)
- 이메일 데이터 표현 방식으로 가독성이 좋고 용량이 작기 때문에 최근에 설정에 많이 이용됨
- 구글에서 만든 제품이나 Spring 에서는 YML을 설정에 이용하고 있음.
- 아직 데이터 전송에는 사용 빈도 수가 낮은 편임
- HTML
- HTML은 데이터를 표현하는 것이 아닌 화면을 만드는 것임
- 화면에 보여지기는 하지만 Open API를 제공하지 않는 경우에 HTML을 가져와서 (Scraping) 임의로 해석해서 데이터처럼 사용하는 경우가 있음.
- HTML로 제공하는 경우는 Open API를 제공하는 것이 아니기 때문에 저작권을 반드시 확인하고 사용해야 함.
■ 프로젝트에서 모듈화
- src : 컴파일 되어야 하는 소스파일
- resources : 컴파일 할 필요가 없는 파일
■ ajax 실습
- json 파싱
- resources 디렉토리에 데이터로 사용할 json 파일을 생성 - 서버를 공부하면 직접 생성 X
<data.json> FILE
{
"count" : 2,
"documents" : [
{"name" : "NAVER", "year" : 2020, "start" : "07-01"},
{"name" : "KAKAO", "year" : 2022, "start" : "04-04"}
]
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax - json parsing</title>
<script>
window.addEventListener("load", (e) => {
// DOM 객체 찾아오기
let btn = document.getElementById("btn");
let display = document.getElementById("display");
btn.addEventListener("click", (e) => {
// ajax 요청 객체 생성
let request = new XMLHttpRequest();
// 요청 준비
request.open('GET', "./resources/data.json");
// 요청 전송
request.send('');
// 응답 받기
// 정상적인 응답
request.addEventListener("load", () => {
// XML 이외의 데이터 읽기
// display.innerHTML = request.responseText; // 파싱X : 데이터를 그대로 읽음
// 받아온 문자열 파싱
let result = JSON.parse(request.responseText);
display.innerHTML = "<p>데이터 개수 : " + result.count + "</p>";
let ar = result.documents;
// 배열을 순회하면서 { }안에 내용을 수행
ar.forEach((doc) => {
display.innerHTML += "<h3>이름 : " + doc.name + "</h3>";
});
});
// 요청에 문제 발생
request.addEventListener("error", () => {
display.innerHTML = e.message;
});
})
});
</script>
</head>
<body>
<button id="btn">JSON 데이터 가져오기</button>
<div id="display"></div>
</body>
</html>- XML 파싱
- ddddd
<data.xml> FILE
<?xml version="1.0" encoding="utf-8"?>
<Root>
<Item>
<company>삼성전자</company>
<price>62400</price>
</Item>
<Item>
<company>카카오</company>
<price>58800</price>
</Item>
</Root><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax - xml</title>
<script>
window.addEventListener("load", (e) => {
let btn = document.getElementById("btn");
let display = document.getElementById("display");
btn.addEventListener("click", (e) => {
let request = new XMLHttpRequest();
request.open('GET', './resources/data.xml');
request.send('');
request.addEventListener("load", () => {
// 읽어온 데이터 중 price 태그 내용만 추출
let xmldata = request.responseXML;
// 태그의 배열
let prices = xmldata.getElementsByTagName("price");
// 순회하면서 태그 안의 내용을 추출
for (let i=0; i<prices.length; i++){
let price = prices[i].childNodes[0].nodeValue;
display.innerHTML += "<p>가격 : " + price + "</p>";
}
})
});
})
</script>
</head>
<body>
<button id="btn">XML 데이터 가져오기</button>
<div id="display"></div>
</body>
</html>■ 웹 클라이언트에서 웹 서버에게 데이터를 전송하는 방법
- URL에 포함시키는 방법 - 가장 최근에 등장한 방식으로 데이터가 1개일 때 주로 이용
- Bloter.net 이나 Tistory의 상세보기가 대표적
- https://www.bloter.net/newsView/blt202211140002
- https://www.bloter.net/newsView/blt202211140003
- GET 방식으로 query string을 전송할 때는 반드시 인코딩을 해야함
- Bloter.net 이나 Tistory의 상세보기가 대표적
- 요청 방식에 따른 데이터 전달
- GET : 데이터를 요청할 때 사용하는 방식으로 URL 뒤에 ?를 추가하고 이름=값 의 형태로 데이터를 전송
- 이 데이터 부분을 parameter라고 하기도 하고 query string 이라고 하기도 함
- 단점
- history에 남기 때문에 보안성이 떨어짐
- 데이터의 길이에 제한이 있음
- 장점
- 캐싱이 가능해서 재전송이 가능함.
- 조회에는 GET을 사용하고, 삭제에는 DELETE를 사용함
- POST : 삽입, 갱신을 할 때 사용하는 방식으로 HTTP Body에 데이터를 넣어서 전송하는 방식
- 장점
- 데이터가 Body에 포함되어 있기 때문에 보안성이 우수함
- 데이터의 길이에 제한도 없음
- 단점
- 캐싱이 되지않아 자동 재전송 기능이 없음
- 최근에는 데이터를 삽입할 때만 사용하고 갱신할 때는 PUT, PATCH 같은 방식을 이용하는 것을 권장함
- 장점
- 헤더 설정을 이용해서 데이터를 전달하기도 함.
- ex) 인증 설정
- GET : 데이터를 요청할 때 사용하는 방식으로 URL 뒤에 ?를 추가하고 이름=값 의 형태로 데이터를 전송
■ 다른 방식을 이용한 ajax
- Promise 를 이용하는 방식
- 콜백을 이용하는 방법보다 가독성이 좋음.
- 일반적으로 콜백 안에서 콜백을 호출하는 경우에는 Promise를 사용하는 것이 좋음.
- Fetch API
- 서버의 데이터를 가져오는 로직을 단순화 한 ajax 보다 새로운 API
- 기본적으로 Promise를 리턴하기 때문에 별도의 콜백을 만들지 않아도 됨
- 요청과 응답 등의 요소를 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와 유사함
- blob() : 파일의 내용
- File을 줄때 주로 blob() 와 arrayBuffer()을 사용
- formData() : FORM의 데이터
- FORM 의 형태로 응답하는 경우 (잘 사용하지 않음)
- json() : JSON 파싱한 결과
- JSON으로 응답하는 경우
- text() : 결과 데이터 문자열
- 문자열로 응답하는 경우
- arrayBuffer() : 바이트 배열
- Response 속성
- 일반적인 처리 방식
- fetch(url, {옵션 이름 : 옵션 값...})
- .then((response) => response.메서드)
- .then((data) => {파싱한 결과를 가지고 수행할 내용})
- .catch((error) => {에러가 발생했을 때 수행할 내용})
- fetch(url, {옵션 이름 : 옵션 값...})
- 상태 코드
- 100 번대 : 요청 중
- 200 번대 : 요청 처리 성공하고 응답을 전송 받음
- 300 번대 : 요청을 처리하고 리다이렉트 중
- 400 번대 : 클라이언트 오류
- 401 : 권한 없음
- 404 : 요청 URL이 잘못됨
- 500 번대 : 서버 오류
- 단순한 GET 요청
- 서버의 데이터를 가져오는 로직을 단순화 한 ajax 보다 새로운 API
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단순한 Fetch</title>
<script>
fetch('./resources/data.json')
.then((response) => response.json())
.then((data) => alert(data.count))
.catch((e) => alert(e.message));
</script>
</head>
<body>
</body>
</html>>> fetch의 경우, XML은 파싱할 수 없다는 단점이 있음.
■ 과제 복습
- https://jsonplaceholder.typicode.com/posts 에서 데이터를 읽어와서 userId 와 title만 출력해보기
■ HTML5
- HTML5
- XHTML4에서 진화한 마그업 언어
- 디자인과 내용의 분리 - 특별한 경우가 아니면 디자인은 CSS를 이용
- 자바 Applet, Active X, Flash 와 같은 외부 플러그 인을 최소화 - 자바의 플렉스나 .Net의 실버라이트 배제
- 문서 구조의 의미나 문서 안에 삽입된 데이터의 의미 등을 명확하기 위한 사양이 추가 - Semantic
- 마크 업 언어에 웹 애플리케이션을 만들 수 있는 API(Javascript를 이용해서 제작)를 포함
- 태그의 변화
- 추가된 태그
- section, article, aside, header, hgroup, footer, nav : 문서 구조와 관련된 태그
- figure, audio, video, canvas, source : 외부 콘텐츠 사용
- keygen, output, progress, meter : 폼 관련 태그
- mark, ruby, time, command, details, datalist : 텍스트 관련 태그
- 변경된 태그
- hr, menum small, strong
- 태그에 추가된 속성
- input : 모바일을 윈한 속성과 유효성 검사 관련 속성이 추가
- 없어진 요소
- bgsound, applet 등
- 추가된 태그
- API 변화
- 로컬 저장소 -이전에는 Cookie 만 사용
- Web Storage
- Web SQL
- Indexed DB
- Drag and Drop API
- GeoLocation : 위치 정보
- Canvas : 그리기 API
- 그래프 나 이미지 출력을 외부 라이브러리 도움 없이 구현 가능
- Web Worker : Thread
- Math ML : 수식을 표현, FireFox에서만 적용가능
- Communication API
- ajax level2
- Server Sent Event(Web Push)
- Web Socket API
- 로컬 저장소 -이전에는 Cookie 만 사용
- 권장 사항
- Cookie 보다는 Local Storage 를 이용하는 것을 권장
- Cookie는 서버에게 요청할 때 마다 전송되고 문자열만 저장 가능
- Local Storage는 자바스크립트 객체를 저정할 수 있고 필요할 때 서버에게 전송 가능
- Cache 보다는 로컬 데이터베이스를 사용하는 것을 권장
- 자바스크립트 애니메이션 대신 CSS 의 전환 효과를 이용
- 부담을 많이 주는 작업는 웹 워커 사용 권장 - 자바스크립트를 이용해 플러그인 이나 PC에서 직접 동작하는 애플리케이션 개발
- Cookie 보다는 Local Storage 를 이용하는 것을 권장
- 기본적인 문서 구조
- DOCTYPE - DTD
- <!DOCTYPE html>
- 인코딩 설정
- <meta charset = "인코딩 방식">
- 문서 검증
- http://html5.validator.nu
- DOCTYPE - DTD
- HTML5를 지원하지 않는 브라우저를 위한 코딩 - 현재는 거의 의미 없음
- 적용 범위 확인 PAGE : https://caniuse.com/#index
- Mark up
- 추가된 섹션 요소
- header, section, article, aside, nav, footer 등
- div 와 동일한 역할을 수행
- 명확한 의미 전달을 위해 추가
- 브라우저의 내용일 인간이 아닌 robot이 읽었을 때 명확하게 의미를 전달하기 위해서
- figure, figcaption
- 이미지나 그래프 또는 예제 코드 등을 작성할 때 문서 안에 삽입해서 의미를 전달하기 위해서 사용
- <figur>
- <img src = "이미지 파일의 경로"/>
- <figcaption> 그림에 대한 설명</figcaption>
- </figur>
- 이미지 아래에 그림에 대한 설명이 추가됨
- 음성 브라우저에서는 그림에 대한 설명을 읽어줌
- 이미지 아래에 그림에 대한 설명이 추가됨
- 이미지나 그래프 또는 예제 코드 등을 작성할 때 문서 안에 삽입해서 의미를 전달하기 위해서 사용
- ruby
- 글자 위에 조그마한 글자를 표시하는 기능
- 한자 사용할 때 위에 독음을 표시하는 용도로 많이 사용
- 글자 위에 조그마한 글자를 표시하는 기능
- 추가된 섹션 요소
- 멀티미디어
- video
- 비디오 재생을 위한 태그
- 자바스크립트 객체로 추가됨
- <video id = "video"></video>
- document.getElementById("video")
- 외부 플러그 인 없이 동영상을 제어할 수 있음
- 브라우저 별로 코덱이 다르기 때문에 모든 동영상 파일이 전부 재생되는 것은 아님
- 동일한 동영상을 여러 포맷으로 만들어 제공하는 것이 좋음
- <video src="동영상 URL"></video>
- <video>
- <source src = "동영상 URL"/>
- <source src = "동영상 URL"/>
- </video>
- 재생할 수 있는 source를 재생
- audio
- video 태그와 사용 방법이 같음
- canvas
- 그래픽을 자유롭게 출력할 수 있는 HTML5에서 추가된 API
- 2D 그래픽을 지원함
- 3D 그래픽은 Web GL을 이용해서 구현
- API : https://www.khronos.org/webgl/
- Sample : https://webglsamples.org
- 그래픽 가속 기술 : 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 context변수 = 캔버스변수.getContext("2d");
- context변수를 이용해서 그리기 작업
- context변수.save() : 컨텍스트 정보 저장
- context변수.restore() : 컨텍스트 정보 복원
- Context : 어떤 작업을 하기 위해 필요한 부가 정보
- 그림을 그리기 위해서 선 색상, 면 색상, 선 두께 등의 정보가 필요한데 이 정보를 일일이 설정하게 되면 그림을 하나 그리는데 설정을 너무 많이 해야함.
- 설정에 대한 부분을 Context에 저장해두고 필요한 부분만 수정하면서 사용을 함
- 그림을 그리기 위해서 선 색상, 면 색상, 선 두께 등의 정보가 필요한데 이 정보를 일일이 설정하게 되면 그림을 하나 그리는데 설정을 너무 많이 해야함.
- ImageSprite : 여러 개의 이미지를 하나의 파일로 만들고 이미지를 적절한 크기로 잘라서 사용
- 컴퓨터에서 가장 많이 걸리는 시간을 소모하는 작업 중 하나가 보조기억장치에 있는 파일을 읽어오는 부분임
- 때문에 이미지를 각각의 파일로 저장해서 읽어오는 것 보다는 여러 개의 이미지를 하나의 파일로 만들고나서 이를 불러들인 후, 나누어서 출력하는 것이 효율적인 경우가 많음
- 각 픽셀의 값을 제어하는 것이 가능
- 원형 UI 클릭을 만들고자 하는 경우 배경이 투명인 상태로 원을 그리고 마우스로 클릭을 햇을 때 그 영역의 색상 값을 추출해서 알파 값이 0이면 동작을 하지 않고 알파 값이 0이 아니면 동작하도록 만들면 원형 UI를 만들 수 있음
- SVG(Scalable Vector Graphics)
- XML을 이용해서 벡터 그래픽을 표시하는 API - 웹 표준
- Canvas는 Pixel 단위로 그림을 그리지만 SVG 벡터 이미지
- canvas 와 SVG의 비교
- 실제 그래프에 사용하는 경우는 직접 작성하는 것도 가능하지만 d3js나 jqplot 같은 자바스크립트 라이브러리를 사용하는 경우가 많음
- jqplot.com
- d3js.org
- 실제 그래프에 사용하는 경우는 직접 작성하는 것도 가능하지만 d3js나 jqplot 같은 자바스크립트 라이브러리를 사용하는 경우가 많음
- video
| canvas | SVG | |
| 이미지 처리 방식 | Bitmap(pixel 단위) | 벡터 그래픽(선이나 도형 단위) |
| DOM | 존재(Javascript 사용 가능) | 존재하지 않음 |
| 성능 | 높은 해상도 이미지를 사용시 성능 저하 | 이미지가 복잡해지면 Mark Up이 복잡해짐 |
| 애니메이션 | 애니메이션 없음 | 애니메이션 가능 |
| 외부 이미지로 저장 | 저장 가능 | 저장 불가능 |
| 적합한 서비스 | 게임 | 세밀한 해상도를 지원하는 UI (Graph) |
9. FORM
- 기능 변화
- 여러가지 타입 추가
- 유효성 검사 기능이 추가
- 진행 상황을 표시해주는 progress 와 meter가 추가
- input의 type 추가 : 모바일을 위한 속성
- 기존 input type : text, password, checkbox, radio, file, button, image, submit, reset, hidden
- 추가된 input type : search, tel, url, email, number, range, color, date, month, week, time, datetime-local
- 네트워크 맞추었을 때 스마트 폰에서 접속하는 방법
- http://127.0.0.1:5500/html5.html
- http://192.168.0.91/html5.html
- ip 주소 명령어
- window : ipconfig
- mac : ifconfig or wifi 환경설정
- jquery를 왜 사용했는지
- HTML5는 브라우저 별로 지원 범위가 다름
- HTML5에서 추가된 기능을사용하게 되면 브라우저 별로 다르게 설정을 해야 동일한 컨텐츠를 사용할 수 있음.
- jQuery는 이 부분(cross browsing)을 쉽게 해주는 자바스크립트 라이브러리임
- 국내에서는 IE 비중이 많이 낮아졌고 IE 대신 나온 Edge는 HTML5를 지원하기 때문에 최근에는 jQuery 사용을 잘 하지 않는 추세임
- jQurey의 단점 중 하나가 랜더링 속도가 느리다는 것임
- progress 와 meter
- 진행율을 보여주고자 할 때 사용하는 요소
- 자바스크립트를 이용해서 제어
- 기본적으로 max value는 100으로 설정되어 있고 value 속성을 이용해서 진행율을 표시함
- 최대값을 변경하고자 하면 min과 max속성의 값을 변경하면 됨.
- Memory leak : 용도가 끝났는데도 작업을 계속 수행하여 메모리 낭비가 발생하는 것
- 입출력 작업을 수행하거나 타이머 같은 자원을 사용할 때 주로 발생
- 타이머는 사용이 끝나면 해제해주어야 하고 입출력 작업은 스트림을 닫아야 함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>progress</title>
</head>
<body>
<progress id = "progress" value ="0" max="100"></progress>
<input type="button" id="btn" value="start"/>
<script>
let progress = document.getElementById("progress");
let btn = document.getElementById("btn");
// 버튼을 누르면 progress 의 value를 1초마다 10씩 증가
btn.addEventListener("click", (e) => {
// 1s 마다 작업하기
let timer = setInterval(() => {
progress.value += 10;
console.log("작업중");
if(progress.value === 100){
clearInterval(timer);
}
},1000);
})
</script>
</body>
</html>- 추가된 속성
- file : multiple 속성이 추가되어 속성을 설정하면 한 번에 여러 개의 파일을 선택할 수 있음.
- autocomplete 속성 : 자동 완성 기능 사용 여부로 on 과 off 로 설정
- list 속성과 datalist 속성을 이용하면 입력 값을 선택할 수 있도록 할 수 있음.
- <input type="tel" list="telephonelist">
- <datalist id = "telephonelist">
- <option value="010-1234-1234"/>
- <option value="010-4321-1234"/>
- </datalist>
- placeholder 속성을 이용해서 입력할 때 설명을 위한 텍스트 설정
- autofocus 속성을 이용해서 첫번째 포커스 설정
- 유효성 검사 (Validation Check)
- required : 필수 입력
- maxlength : 최대 글자 수
- min, max : 최소 최대값
- pattern : 정규 표현식 설정 가능
- WebClint(브라우저 또는 애플리케이션) <-> Web Server <-> Apllication 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에서 다시 하는 이유는 데이터 전송 중에 변형이 이루어졌을지 모르기 때문임
- Web Server 부터 Data Server 까지는 애플리케이션과 다른 곳에 위치 - Web Client와 Server 간에 통신을 하게되면 Traffic이 발생하고 비용이 발생