📌 body-parser
데이터를 쉽게 처리할 수 있도록 도와주는 미들웨어
- parsing : 데이터를 가공하고 정제하는 것을 의미
- 즉, 요청(request)의 body를 해석해서 req.body 객체를 통해 client의 요청을 받아올 수 있음
- express 4.x 부터 내장되어 설치가 필요 없음 (현재 express 모듈로 웹 서버를 배우고 있다!)
// req.body 객체 해석을 위한 body-parser 미들웨어 등록
app.use(express.urlencoded({ extended: true }));
app.use(express.json());📌 form
form은 html 영역이므로 간단히 넘어갑니다!
클라이언트에서 입력된 데이터를 한 번에 서버로 정보를 전달할 때 사용
📣 form 속성
많이 쓰이는 개념이므로 잘 알아두기 (이후 과정에서 필수로 사용됨)
- action / name / method
<form action="/폼을_전송할_서버_주소", name="폼이름", method="폼_전송방식(http메소드)" />
...
</form>// JS에서 아래와 같이 사용됨
document.forms['form태그_name속성값'];📣 form method
🟠 GET
- 정보를 가져오거나 검색할 때 쓰임
- Get 요청 시, backend로 보내야하는 데이터가 있다면, URL 쿼리 문자열에 데이터를 실어서 전송
- ex) http://example.com?name=apple&msg=hi
- URL에 입력한 내용이 그대로 노출되기 때문에 보안상의 문제가 민감한 경우에는 사용 X
- 정해진 길이의 데이터만 전송 가능
- 서버(backend)의 값이나 상태를 변경하지 않을 때
🟠 POST
- 무언가를 생성하거나 어떤 정보를 보낼 때 쓰임
- 보내야하는 데이터는 요청(request)의 본문(body)에 실어서 전송
- 길이가 제한된 URL보다 많은 데이터를 body에 실어서 전송 가능
📌 form에 입력한 정보 받기
📣 Step 1. form 정보 받기
라우팅 설정
- app.js
app.get('/getForm', function (req, res) {
console.log(req.query);
res.send('get 요청 성공!');
});
app.post('/postForm', function (req, res) {
console.log(req.body);
res.send('post 요청 성공!');
});📣 Step 2. 결과 페이지에 데이터 추가
- app.js
app.get('/getForm', function (req, res) {
console.log(req.query);
// res.render(ejs_경로, 데이터)
// ejs_경로: views/ 폴더 내부 ejs 파일의 주소
// 데이터: 뷰에 넣어줄 정보
res.render('result', {
title: 'GET 요청 폼 결과 확인',
userInfo: req.query,
// get 방식은 클라이언트에서 보낸 데이터가 req.query에 저장
});
});
app.post('/postForm', function (req, res) {
console.log(req.body);
res.render('result', {
title: 'POST 요청 폼 결과 확인',
userInfo: req.body,
// post 방식은 클라이언트에서 보낸 데이터가 req.body에 저장
});
});- views/result.ejs
<body>
<h1><%= title %></h1>
<div><span><%= userInfo.id %></span>님 환영합니다!</div>
<div>비밀번호는 <span><%= userInfo.pw %></span>이군요!!</div>
</body>폼 요소 입력없이 버튼을 누르면?
→ 유효성 검사 없이는 빈 문자열이 들어감!
📌 form validation 유효성 검사
form 요소들에 정보가 올바르게 입력되었는지 검사하는 것
- ex) 비밀번호 8자리 이상, 특수문자 및 대문자 1개 이상 포함
📣 input 태그에 지정 가능한 유효성 검사 기능
- required : 필수 값
- minlength / maxlength : 최소 / 최대 문자수
- min / max : 최소 / 최대 값
- type : 입력받는 정보 타입
- pattern : 정규식으로 검사
- regex: 정규 표현식
→ 회원가입, 로그인 등에서 거의 필수적으로 사용됨!
- regex: 정규 표현식
📌 nodemon
📣 nodemon 패키지
파일들을 모니터링 하다가 소스코드 변경 시 자동으로 node 재실행하는 패키지
- 서버 측 코드(app.js 등)가 변경될 때마다 ctrl+c 단축키로 node 명령어를 종료하고 node app.js 명령을 다시 입력하기 번거로움
npm install -g nodemon # 전역 설치
nodemon -v # 설치 확인(버전 확인)
nodemon app.js # 진입점 파일 실행지역 설치 VS 전역 설치
- 지역 설치: 해당 프로젝트의 node_modules/폴더 안에 패키지 설치
- 해당 프로젝트 내에서만 사용 가능
- 전역 설치: -g 옵션(global)으로 전역 node_modules/폴더 안에 패키지 설치
- 모든 프로젝트가 공통으로 사용 가능
npm install [패키지명] # 지역 설치 npm install -g [패키지명] # 전역 설치
📌 동적 폼 전송
📣 form 전송
<input type="submit"> 혹은 <button type="submit">을 이용해 전송
- 전송 시 페이지 이동이 일어남
위와 같이 빨간 글씨로 하나의 페이지 내에서 변화된 값을 보이고 싶다면 비동기 HTTP 통신을 해야 함
📣 비동기 HTTP 통신
🟠 동기 방식
- 한 번에 하나만 처리 → 페이지를 아예 이동(페이지를 전체 갱신)하여 서버가 데이터 처리
- 장점
- 비동기 방식보다 코드의 작성과 이해가 쉬움
- 요청, 응답이 순차적으로 이뤄짐 → 코드의 간결성, 직관성 유지 가능 및 요청, 응답의 순서를 보장받을 수 있음
- 요청, 응답이 연결 → 에러 처리가 비교적 쉬움!
- 단점
- 전체 페이지를 다시 로딩 → 서버와의 통신량 多 → 웹페이지의 속도, 성능 가능성 有
- 요청, 응답이 동시에 일어나야 함 → 요청을 보낸 후 다른 작업 불가능
🟠 비동기 방식
- 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능함
- dynamic : 웹 문서가 정적이 아닌, 일부 내용이 실시간으로 변경되는 것
- 비동기 HTTP 통신 : 폼의 데이터를 서버와 dynamic하게 송수신 하는 것
- 방법 : Ajax, Axios, Fetch
- 비동기 HTTP 통신 : 폼의 데이터를 서버와 dynamic하게 송수신 하는 것
- 장점
- 필요한 부분만 업데이트 → 서버와의 통신량 少 → 웹페이지의 속도, 성능 향상
- 요청, 응답이 동시에 일어나지 않아됨 → 요청을 보낸 후 다른 작업 가능
- 단점
- 코드의 작성과 이해가 비교적 어려움 → 코드 복잡도 증가
- 요청을 보낸 후 응답을 기다리지 않고 다음 작업 수행 → 요청 처리 속도로 인해 요청, 응답 순서 보장 X
- 요청, 응답이 분리 → 에러 처리가 비교적 어려움
📌 Ajax
Asynchronous JavaSCript And XML
JavaScript를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신
XML 란?
eXtensible Markup Language
- HTML과 유사한 문자 기반의 마크업 언어
- HTML : 데이터를 보여줄 목적
- XML : 데이터를 전달, 저장할 목적
- XML 태그는 사용자가 정의해서 사용 가능 (HTML은 태그가 미리 정해짐)
📣 장점
- JQuery를 통해 쉽게 구현 가능
- Error, Success, Complete의 상태를 통해 실행 흐름 조절
📣 단점
- JQuery를 사용해야만 간편하고 호환성이 보장됨 (XML 사용은 복잡)
- Promise 기반이 아님 → then, catch 사용 불가
JQuery 란?
HTML의 클라리언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우조 호환성이 있는 JavaScript 라이브러리
라이브러리와 프레임워크의 차이가 궁금하다면
📣 GET & POST
🟠 GET 요청
$.ajax({
type: "get", // 요청의 종류 (= form의 method 속성)
url: "/ajax", // 요청의 경로 (= form의 action 속성)
data: data, // 요청에 실어보낼 데이터 (서버가 받게될 데이터)
success: function (data) {
// 요청이 성공적으로 수행되었을 때 실행할 함수
console.log(data);
resultBox.textContent = `GET /ajax 요청 완료! ${data.name}님은 ${data.gender}이시죠?`
},
});🟠 POST 요청
$.ajax({
type: "post",
url: "/ajax",
data: data,
success: function (data) {
console.log(data);
resultBox.textContent = `POST /ajax 요청 완료! ${data.name}님은 ${data.gender}이시죠?`;
},
});📌 Axios
Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
비동기 HTTP 통신 가능, return이 Promise 객체로 옴
📣 장점
- Promise 기반으로 만들어짐
- 브라우저 호환성이 뛰어남
📣 단점
- 모듈 설치 or 호출을 해줘야 사용 가능
<!-- 서버 (npm) -->
npm install axios
<!-- 클라이언트 (cdn) -->
<script src="cdn 주소"></script>📣 GET & POST
🟠 GET 요청
axios({
method: "get", // 요청 방식 (= form method 속성), default는 get
url: "/axios", // 요청 경로 (= form action 속성)
params: data, // GET 요청 => params에!
// 서버로 보낼 데이터 (query string)
// params를 사용하지 않고 query string을 직접 정의하여 요청을 보낼 수 있음
url: `/axios?name=${form.name.value}&gender=${form.gender.value}`
})
.then(function (res) {
console.log(res);
console.log(res.data);
resultBox.textContent = `GET /axios 요청 완료! ${data.name}님은 ${data.gender}이시죠?`;
})
.catch(function (error){
console.log("Error!",error);
});🟠 POST 요청
axios({
method: "POST",
url: "/axios",
data: data, // POST 요청 => data에!
})
.then((res)=>{
console.log(res);
console.log(res.data);
resultBox.textContent = `POST /axios 요청 완료! ${data.name}님은 ${data.gender}이시죠?`
})
.catch(function (error){
console.log("Error!",error);
});🟠 백에서의 응답
- res.send(데이터)
- 데이터와 함께 응답을 보냄
- 데이터는 문자열일 수도, HTML일 수도, 객체나 배열일 수도 있음
- res.json(JSON)
- JSON 형식의 응답을 보냄
- Response 객체의 send() or json() 메서드를 이용하면 데이터를 클라이언트로 다시 보낼 수 있음
📌 Fetch
ES6부터 들어온 Promise 기반 JavaScript 내장 라이브러리
📣 장점
- JavaScript 내장 라이브러리 → 별도의 import 필요 X
- Promise 기반
📣 단점
- 최신 문법
- 상대적으로 Axios에 비해 기능 부족
📣 GET & POST
🟠 GET 요청
fetch(`/fetch?name=${form.name.value}&gender=${form.gender.value}`{
method: "GET", // fetch는 default로 get 방식으로 작동 (생략 가능)
})
.then(function (res) {
return res.json(); // JSON 응답을 네이티브 JavaSCript 객체로 파싱
})
.then(function (data) { // data 변수 => 직전 then 메서드의 리턴 값: res.json()
console.log(data);
resultBox.textContent = `GET /fetch 요청 완료! ${data.name}님은 ${data.gender}이시죠?`;
})🟠 POST 요청
fetch("/fetch", {
method: "POST",
headers: { // JSON 포맷 사용 선언
"Content-Type": "application/json",
},
body: JSON.stringify(data), // 서버로 보낼 데이터 (JSON으로 변경)
})
.then((res) => {
console.log(res);
return res.json();
})
.then((res) => {
console.log(data);
resultBox.textContent = `POST /fetch 요청 완료! ${data.name}님은 ${data.gender}이시죠?`
})🟠 response
response에는 Promise를 기반으로 하는 다양한 메서드(함수) 존재 → 메서드를 사용하여 다양한 형태의 응답 처리 가능
res.text(); // 응답을 읽고 텍스트를 반환
res.json(); // 응답을 JSON 형식으로 파싱 (실제로 확인 시, javascript 객체 형태로 반환)Ajax vs. Axios vs. Fetch
- React-Native와 같이 업데이트가 잦은 경우에는 내장 라이브러리인 Fetch가 유리!
- 웹 프론트 프레임 워크를 다룰 때에는 Axios가 유리!
📌 JSON
JavaScript Object Notation의 약자
-
데이터를 문자열의 형태로 나타내기 위해서 사용 → 데이터를 표시하는 방법 중 하나
-
네트워크를 통해 다른 시스템들이 소통할 때 사용하는 경량의 Data 교환 형식
-
JavaScript에서 파생되었으나, 다른 프로그래밍 언어에서도 지원하는 데이터 포맷
-
데이터를 구조적으로 표현할 수 있어 가독성이 뛰어남 → 컴퓨터, 사람 모두 해석하기 편함
-
JavaScript의 Object를 기반으로 하는 텍스트 형식 → JavaScript 객체와 유사
- key 이름을 큰 따옴표("key-name")로 감싸는 차이점이 있음
-
문자열, 숫자(정수, 실수), boolean, 중첩된 객체와 배열 저장 가능
요약: Client와 Server가 JSON이라는 특별한 형식의 데이터로 정보를 주고받는다!
📣 JSON 내장 객체
- JavaScript에서는 JSON 데이터를 간편하게 다룰 수 있는 JSON 내장 객체 존재
- JavaScript Object와 JSON 문자열을 서로 변환할 수 있도록 메서드 제공
- JSON.parse() : JSON 문자열 → JavaScript 객체
- JSON.stringify() : JavaScript 객체 → JSON 문자열
📣 직렬화(serialize) & 역직렬화(deserialize)
- 직렬화(serialize): 통신하기 쉬운 포맷으로 변환하는 과정
- 통신 포맷 예시 : CSV, JSON, XML 등
- 구조적인 데이터 사용 시, 과거 XML을 주로 사용했으나 최근에는 JSON 주로 사용
- JSON.stringify() : JavaScript 객체 → JSON 문자열
- 역직렬화(deserialize) : 통신하여 받은 데이터를 객체로 변환하는 과정
- JSON.parse() : JSON 문자열 → JavaScript 객체
자아를 찾아 떠나는 중,,,