npm
- Node Package Manager
- 노드 패키지를 관리해주는 툴
npm 사용하기
npm init- 프로젝트를 시작할 때 사용하는 명령어
- package.json에 기록될 내용을 문답식으로 입력한다
npm init -yes- package.json이 생성될 때 기본값으로 생성된다
npm install 패키지이름- 프로젝트에 사용할 패키지 설치 명령어
- 설치된 패키지 이름과 정보는 package.json의 dependecies에 입력된다
package.json
- 패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해 필요한 것
- 프로젝트에 대한 정보와 사용중인 패키지 이름 및 버전 정보가 담겨있는 파일
Express
- 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크
- 웹 어플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장
- http 모듈 이용시 코드 가독성과 확장성이 떨어져서 이를 해결하기 위해 express 프레임워크가 등장
Express 사용
- express() : Express 모듈이 export하는 최상위 함수로 express application을 만듦
- app 객체 : express()함수를 호출함으로써 만들어진 express application
- app 객체의 method : http 요청을 각 요청에 맞는 경로로 전송하는 메소드(라우팅)
const app = express();
app.METHOD(PATH, callback [,callback…]);미들웨어
- 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
- 서버와 클라이언트를 이어주는 중간 작업
- use()를 이용해 등록할 수 있다.
미들웨어 - static
- 이미지, css파일 및 js파일과 같은 정적 파일 제공
- express에 있는 static 메소드를 이용해 미들웨어로 로드
<!--index.html-->
<h1 style="color:tomato">안녕하세요</h1>
<img src="/public/images/동글이.jpg" alt="동글이">//index.js
const express = require("express");
const app = express(); //객체생성, 필요한 메소드가 app객체에 있다. 기본코드
const port = 8080; //1023위의 숫자로, 보통 8080 8000 3000 많이함
// static 메소드 : 안의 문자열은 실제 존재하는 폴더명
//첫번째거(/public)은 가상경로
app.use("/public", express.static("static"));
//static이라는 실제 존재하는 폴더를 public이라는 경로로 접근할 수 있도록 함
app.get('/', (req,res) =>{
res.send('Hello Express!');
})
app.get('/test', (req,res)=>{
res.sendFile(__dirname + "/views/index.html"); //절대경로만 입력하기
})
app.listen(port, ()=>{
console.log("Server Open : ", port);
})템플릿 엔진
- 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈
- ejs : Embedded Javascript의 약자로 자바스크립트가 내장되어있는 html파일, 확장자는 .ejs
ejs 템플릿
- ejs는 <%로 열면 무조건 %>로 닫기
<% for(let i = 0; i<5; i++) { %>
<div>안녕</div>
<% } %>- <%%>사이에 있는 코드 div가 5번 반복된다는 의미
<% if(true) {%>
<% } else if(){%>
<% } else{%>
<%} %> - if문 쓸때 중괄호 위치 주의
<div style="color:red;"><%="<span style='color:blue'>안녕</span>"%> 하세요</div>
<div style="color:red;"><%-"<span style='color:blue'>안녕</span>"%> 하세요</div>
-
=: 변수의 값을 출력할 때 사용 -
-: 태그로 인식할 수 있다
-
다른 ejs파일 불러오기
<%-include("test.ejs")%>
-
ejs파일에 데이터 넘기고 받기
<title><%=title%></title> <% for(let i = 0; i<data.length; i++){ %> <div><%=data[i]%></div> <%}%> -
2번째 줄의 data는 이미 <%%>안이라 바로 data.length할 수 있고, 3번째줄은 없어서 <%%>다시 열어줌
body-parser
- 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
- Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와줌
- express 4.x부터 body-parser가 내장되어 있어 설치필요없음
form
- 입력된 데이터를 한 번에 서버로 전송하기 위해 사용
- 즉 클라이언트가 서버에게 정보전달
- 속성 : action, name, target, method
- 폼 요소 : input, select, textarea, button 등등
form 속성
-
action : 폼을 전송할 서버 주소 지정
-
name : 폼을 식별하기 위한 이름
-
method : 폼을 서버에 전송할 http 메소드 지정
-
targer : action 속성값에 지정한 스크립트 파일을 현재창이 아닌 다른위치에서 열 수 있게(_blank와 _self가 있다)
input
- 사용자가 다양하게 폼 태그를 입력할 수 있게 하는 것
- 입력창
- 가장 기본적인 form요소
input 속성
- type : 인풋 타입
- name : 이름지정, 백엔드에서 name으로 key가 설정된다
- readonly : 읽기전용
- autofocus : 자동 focus
- placeholder : 짧은 도움말
post 요청과 get요청 차이
-
post요청하면 req.body에
-
get 요청하면 req.query에
-
url을 치는 것은 무조건 get요청이기 때문에 get요청 성공페이지는 url로 쳐서 나오지만 post는 불가능하다
select
- 선택창
- 서버가 지정한 특정 값만을 선택할 수 있는 요소
- input이 주관식이라면 select는 객관신
label
- 폼 양식에 이름을 붙일 수 있디
- for속성 : for속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 만들 수 있다
fieldset / legend
- fieldset : 폼 태그 안에 있는 요소를 그룹화 할 때 사용
- legend : fieldset안에 들어가는 태그로 목적에 맞게 이름 지정 가능
form validation(유효성 검사)
- form요소들에 정보가 올바르게 입력되었는지 검사하는 것
- ex ) 비밀번호 : 8자리 이상, 특수문자 및 대문자 1개 이상포함, 이메일 : @기호 반드시 포함 등
pattern 속성에서 정규식 사용
-
소문자, 숫자 포함 4자리 이상 : pattern="^([a-z0-9]){4,}$"
-
대문자 필수 : (?=.*[A-Z])
-
한글 제외 : ([^가-힣])
-
javascript를 응용해 유효성 검사를 할 수도 있다
const text = "안녕하세요 https://tistory.com//"
console.log(text.match(/https?:\/\/[\w\-\.]+/g));
/http : http로 시작
s? : s가 있을 수도 없을 수도
: :그 다음 ":"가 오고
\/\/ : //가 오고
[\w\-\.]+ => \w(영문자, 언더스코어), 하이픈, 쩜 으 로 이루어진 문자열이 한개 이상(+) 있다.
/g : 해당하는 모든걸 찾는다nodemon
-
서버 측 코드가 변경될 때마다 ctrl+c로 node명령어 종료하고 다시 입력하기가 귀찮다
-
따라서 서버 측 소스코드 변경시 자동으로 node재실행 하는 패키지
-
참고로 노드몬 실행할 땐 powershell말고 다른 터미널로 하기
비동기 http 통신
- 동기방식 : 한 번에 하나만 처리 => 페이지를 아예 이동해 서버가 데이터 처리
- 비동기 방식 : 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능
dynamic
- 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시가으로 변경되는 것
- 비동기 http 통신 : 폼의 데이터를 서버와 dynamic하게 송수신하는 것
방법
- ajax
- axios
- fetch
1. Ajax
- 자바스크크립트를 이용해 클라이언트와 서버간에 데이터를 주고받는 비동기 http 통신
- 장점 : jquery를 통해 쉽게 구현 가능
- 단점 : jquery 사용해야만 간편, promise기반이 아니라 다른것과 호환이 어렵다
2. Axios
- node.js와 브라우저를 위한 promise api를 활용
- 비동기 http 통신이 가능, return이 promise객체로 온다
- 장점 : 브라우저 호환성이 뛰어남, timeout기능 존재, 프로미스 기반
- 단점 : 모듈설치 or 호출을 해줘야함
3. fetch
- es6부터 들어온 자바스크립트 내장 라이브러리
- 프로미스 기반
- 설치필요 x
- 장점 : 별도의 import 필요 x, 프로미스 기반
- 단점 : 최신문법, 타임아웃기능 x, 상대적으로 axios에 비해 기능 부족
- json으로 리턴하지 않아서 따로 변환 필요
json
-
데이터 포맷
-
서버와 클라이언트간의 교류에서 일반적으로 많이 사용된다
-
자바스크립트 객체 표기법과 유사
-
텍스트형식일 뿐이다
Axios요청, 응답
function sendGet() {
let form = document.getElementById("form_info");
//form.name.value로 가져올 수 있다
//axios get을 이용한 통신
axios({
method: "get",
url : "/form",
params : {
name : form.name.value,
age : form.age.value,
},
}).then((res)=>{
console.log(res.data.msg);
});
}app.get('/form', (req,res)=>{
console.log(req.query);
res.send({msg: `이름은 ${req.query.name}, 나이는 ${req.query.age}`,});
})multer
- 파일 업로드를 위해 사용되는 미들웨어
- express로 서버 구축 시 가장 많이 사용되는 미들웨어
enctype="multipart/form-data" : 파일이 인코딩되면 깨질수 있어서 쓰는 타입
1. 파일 한 개 업로드
- single : 매개변수(input name)파일을 dest로 지정한 곳으로 알아서 업로드
//index.js
const upload = multer({
dest: "uploads/", //목적지 설정, 여기에 올리겠다
});
app.post('/upload', upload.single("userfile"), (req,res)=>{
console.log(req.file);
console.log(req.body);
res.send("Upload Complete");
})
//file.ejs
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="userfile" >
<button>업로드</button>
</form>2. 파일 여러개 한 번에 업로드
- array : 매개변수로 똑같이 input의 name을 입력
//index.js
app.post('/upload-array', upload.array("userfile2"), (req,res)=>{
console.log(req.files);
console.log(req.body);
res.send("Upload Complete");
})
//file.ejs
<form action="/upload-array" method="post" enctype="multipart/form-data">
<label for="userfile2">파일여러개</label>
<input type="file" name="userfile2" multiple> //여러개
<button>업로드2</button>
</form>3. 파일 여러개 따로따로 업로드
- fields : 매개변수로 배열에 객체 형태로 값을 담는다
//index.js
//Before
const upload = multer({
dest: "uploads/", //목적지 설정, 여기에 올리겠다
});
//After
const upload = multer({
storage: multer.diskStorage({
destination(req, file,done){ //목적지 설정 함수
done(null, 'uploads/'); // 파라미터 : 에러가있을 때 받는것, 경로
},
filename(req,file,done){ //파일 이름 지정 함수
console.log(req.body); // 해당 input file전까지의 body만 받아서 name2는 안나옴!
const ext = path.extname(file.originalname); //확장자 지정
//const filename = Date.now() + ext;
const filename = req.body.name + ext;
done(null, filename);
}
})
})
app.post('/upload-fields', upload.fields([{name:'name'}, {name:'userfile'}, {name:'name2'}]), (req,res)=>{
console.log(req.files);
console.log(req.body);
res.send("Upload Complete");
})
//file.js
<h3>파일 하나</h3>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="text" name="name" id="">
<input type="file" name="userfile" >
<input type="text" name="name2" id="">
<button>업로드</button>
</form>