form validation(유효성 검사)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
- form 요소들에 정보가 올바르게 입력되었는지 검사
- html5 이용
- required: 필수 값
- minlength, maxlength 최소, 최대 문자수
- min / max 최소, 최대값
- type 정보 타입
- pattern 정규식으로 검사
- javascript 응용한 유효성 검사
- 정규표현식.test(”검색할 문자열”)
nodemon package
: 파일들을 모니터링하다가 소스코드 변경시 자동으로 node 재실행하는 패키지
npm install -g nodemon nodemon -v
- 지역설치 vs 전역설치
nodmon은 전역으로 설치해줘야 한다.
form 전송
동기 http 통신 ⇒ 한번에 하나만 처리 → 서버가 페이지를 아예 이동해서 서버가 데이터 처리
비동기 HTTP 통신
: 서버에 데이터를 보내고 응답을 기다리는 동안
- dynamic: 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것
- 폼의 데이터를 서버와 dynamic하게 송수신 하는 것
- 비동기 http 통신 방법 → ajax, axios, fetch
- Ajax : asynchronous javascript and XML
- XML: extensible markup language. HTML과 비슷한 마크업 언어. html과 달리 정해져 있는 것이 아니라 사용자가 정의해 사용 가능하다.
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 http 통신
장점: jquery를 통해 쉽게 구현 가능. error, success, complete 상태를 통해 실행 흐름을 조절할 수 있다.
단점: jquery를 사용해야만 간편하고 호환성이 보장된다. promise 기반이 아니다.
- Axios
node.js와 브라우저를 위한 promise API를 활용.
비동기 HTTP 통신이 가능 ⇒ return이 promise 객체로 온다.
장점: Timout 기능이 존재한다. Promise 기반으로 만들어졌다. 브라우저 호환이 편리하다.
단점: 모듈 설치 or 호출을 해줘야 사용이 가능하다.npm install axios --- cdn 불러오기 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- Fetch
ES6부터 들어온 Javascript 내장 라이브러리 - 설치하지 않아도 사용 가능. Promise 기반
장점: javascript 내장 라이브러리이므로 별도의 import 필요 없음 .promise 기반
단점: 최신 문법, timeout 기능이 없다. 상대적으로 axios에 비해 기능 부족 - json으로 따로 변환해주는 과정이 필요함. ⇒ 브라우저 호환성 - internet explorer에서 돌아가지 않는다.
JSON이란?
: Javascript Object Notation.
- 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식. javascript에서 객체를 만들 때 사용하는 표현식. 데이터 포맷일 뿐
- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용
📝