node.js) 시작 - 서버 실행, get()
서버를 동작하기 위해서는
서버 프로그램에 사용할 폴더 내에서 터미널로 npm을 실행시켜 express 패키지를 받아야한다
터미널, cmd, powershell 등 에서
npm init 입력 후 묻는 사항에 대해 skip하기 위해 쭉 엔터를 눌렀다
npm install express 로 express 패키지 다운
완료 되면 express 버전과 함께 완료되었다는 메시지가 뜬다
요런 json파일이 생기면서 package.json 안에 express가 존재하면 잘 설치된 것
get과 post만으로도 서버를 만들 수 있다..?
get()의 인자로 url, callback 함수를 받는다
callback 함수의 인자로 요청, 응답을 받는다
callback 함수의 1번째 인자인 요청에는 사용자의 url 요청을 받아오는 객체가 생성되어있어
정보를 받아오고, 받아온 객체 내의 정보를 탐색하여 사용 가능
callback 함수의 2번째 인자인 응답에는 우리가 응답해야할 정보를 받는 객체가 생성되어 있고
객체 내의 메소드를 사용하여 응답할 내용을 전달할 수 있다
const express = require('express');
const app = express(); // express 객체를 app 변수에 저장
app.get('/', (요청, 응답)=>{ // 기본 url(도메인)의 마지막엔 '/'가 들어가 있지만 생략해도 된다
console.log(요청.query.name) // get()의 첫 번째 인자에 '/'를 사용하면 기본 url과 같은 뜻
console.log(요청.query.id)
console.log(요청.query.pw)
응답.render('index.html',{title:'server'});
})
app.listen(3000,()=>{ // listen 함수로 server 실행 명령
// 인자로 1. port번호, 2. 콜백 함수를 받는다
console.log(`server start port : 3000`);
})http://127.0.0.1:3000/?name=asdf&id=web77&pw=1234
url내의 도메인 뒤 /? 이후 name=asdf&id=web77&pw=1234 라는 값은
queryString이라고 부르며, url에 요청할 정보를 담는 변수
요청.query
요청이라는 객체(Object) 내에 query라는 객체를 생성하여 queryString이 키:값 형태로 들어감
구분자는 '&'를 사용하고 형식은 a = 'b';
요청의 query 객체는 사용자가 url의 도메인 뒤, /? 이후에 적은 queryString 정보를 키:값 형태로 저장하는 것
html에서 {{ }}를 사용하면 node.js get()에서 변수로 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world! {{ title }}
{{ name }}
{{ id }}
{{ pw }}
</body>
</html>
app.get('/', (요청, 응답)=>{
응답.render('index.html',{
title:'server',
name:요청.query.name,
id:요청.query.id,
pw:요청.query.pw
});
})
html 의 form 태그를 사용하면 get()의 요청을 연결하여 사용할 수 있다
form 내의 input 내용을 action으로 링크 이동을 하는 형태로 작동함
html의 구조를 node에서 그대로 사용하기 위해 nunjucks 패키지가 필요하다
npm install nunjucks 로 설치
<body>
hello world! {{ title }} <br />
{{ name }} <br /> <!-- get에서 받은 queryString의 name 값을 사용 -->
{{ id }} <br />
{{ pw }} <br />
<!-- form의 method 속성으로 get()과 연결 -->
<form method="get" action="/"> <!-- action의 url로 정보가 전달됨, 전달된 정보가 포함된 url로 링크 이동 -->
이름 : <input type="text" name="name"> <br /> <-- name 속성을 사용, get()내의 name과 연결됨 -->
id : <input type="text" name="id"> <br /> <-- get()내의 id와 연결됨 -->
pw : <input type="text" name="pw"> <br /> <-- get()내의 pw와 연결됨 -->
<input type="submit" value="button"> <!-- submit 버튼은 input에서 받은 정보를 get으로 전달 -->
</form>
</body>const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views',{
express:app,
autoescape:true, // 보안 문제로 무적권 true
});
app.set('view engine', 'html');
app.get('/', (요청, 응답)=>{
응답.render('index.html',{ // 응답을 렌더링 한다 (html 문서를서를화면
title:'server',
name:요청.query.name,
id:요청.query.id,
pw:요청.query.pw
});
})
app.listen(3000,()=>{
console.log(`server start port : 3000`);
})