오늘 배운 것은 node.js 서버에 html 를 연결해서 html의 값을 서버로 다시 보내서 사용자에게 html page를 보내는 것
맞는지도 모르겠지만 일단 js, html쓰는거 다 외우고 분석해보자아~~~~~~~~~
1. views 폴더 에 index.html 파일 만들기
- sendfile 로 html을 보낼 수 있으나 단순히 html만 나옴 => 그래서 view engine 이라는 것을 사용해야함 = > 이것은 node.js 자체 내장이 아니어서 npm을 사용해 다운 받기.
*view engine : The view engine is what's responsible for rendering your view, and converting your code into glorious HTML. As such, they are directly responsible for HOW you need to write code in your views. There's basically two ones you need to care about: ASPX and Razor. from Google
Viewengine is the combination of HTML tags, Server Controls and a programming language and works inside the application for rendering view to the browser or to the user.
view engine - Js 는 다양한 모듈(사용자 정의 라이브러리)을 추가로 기능을 확장할 수 있다. 응답 웹페이지를 독립적으로 작성, 활용하도록 node.js에 view engine 이라는 시스템이 있다.
2. nunjucks and chokidar download (related to view engine)
-터미널에 npm install nunjucks chokidar 입력해서 다운 받자. nunjucks 와 view engine 은 상관관계 있음. 정확히는 아직 모르겠으나 view engine (html을 load하고 다시 보내고 (?) )을 하기 위해 nunjucks 가 필요하다.
## Installation
`npm install nunjucks`
To use the file watcher built-in to Nunjucks, Chokidar must be installed separately.
`npm install nunjucks chokidar`built-in to nunjucks 하려면 chokidar라는 것도 함께 각각 깔아줘야 한다고 한다.
chokidar => Minimal and efficient cross-platform file watching library (플랫폼을 넘나드는 파일을 보기위한 효율적인 라이브러리????)
* 무언가를 다운받으면 2가지 쳌
1. package.json가서 추가가 되었는지 꼭 확인 !
2. node_modules 파일에 해당 파일들이 들어갔는지 확인!
denpendencies 에 chokidar & nunjucks 가 추가되어짐 + 버젼 정보
3. JS (node.js) 작성
const express = require('express'); //require('라이브러리') 를 가져온다.
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views', { //configure 환경설정한다.
express:app, // express는 어떤걸 쓸꺼냐. ( ? ? )
autoescape:true, // 보안관련인데 무조건 true로 한다고
});
app.set('view engine', 'html'); // view engine 을 html으로
app.get('/',(요청,응답)=>{
응답.render('index.html', {title:'good'}); //응답을 render할거다.
});
app.listen(3000, ()=>{ // 3000 port 에 listen 하면 console.log~를 실행해라
console.log('server start port : 3000');
});
const app = express(); 가 무엇인가 찾아보니 express라는 것을 쓸 때 아래가 세트인가 보다. 정확한 의미는 아직도 몰겟
```js
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000)
```
Express.js or Express is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been caleed the de facto standard server framework for Node.js
framework란 소프트웨어 프레임워크는 복잡한 문제를 해결하거나 서술하는데 사용되는 기본 개념 구조
4. html 작성
아까 만들은 views 폴더에 index.html 에 아래와 같이 작성
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
hello {{title}}
</body>
</html>
5. 터미널에 node practice.js 입력 (서버 키기)
* 에러 처리
이미 3000 port를 사용 중이라고 나옴
에러 : events.js:292
Error: listen EADDRINUSE: address already in use :::3000
PS C:\Users\saeee_z18xmwt\OneDrive\문서\nodeJS> node practice.js
events.js:292
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use :::3000
at Server.setupListenHandle [as _listen2] (net.js:1318:16)
at listenInCluster (net.js:1366:12)
at Server.listen (net.js:1452:7)
at Function.listen (C:\Users\saeee_z18xmwt\OneDrive\문서\nodeJS\node_modules\express\lib\application.js:618:24)
at Object.<anonymous> (C:\Users\saeee_z18xmwt\OneDrive\문서\nodeJS\practice.js:16:5)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
js:72:12)
Emitted 'error' event on Server instance at:
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4091,
syscall: 'listen',
address: '::',
port: 3000
}
기존 쓰고 있는 걸 강제로 삭제하기 (같은 파일로 그대로 했는데 또 요 오류나옴)
netstat -ano | findstr 3000 network status(?) 에서 3000 port 찾아라 -> 3000으로 listening 되고 있는 게 나옴
taskkill /pid 7764 (netstat 에서 찾은 번호 입력) - > 실패 -> /f 옵션 사용해서 강제종료 해라
taskkill /f /pid 7764 강제 종료 성공
node practice.js 입력
html body에 적힌 hello {{title}} 이 브라우저에 떴다.
{{title}}은 js 와 연동되서 title:'good' 의 good을 가져왔나 봄
1. js가 요청받은 내용 , 응답.render 내용 정리해서 보내면
2. html 이 전달받고 html 정리해서 page 를 다시 js에게 보냄
3. js는 user에게 render
뭔가 이해는 될거같은데 머리에 안 입력된다. . . 여러번 하다보면 되겟지??
6. JS & html 수정
http://localhost:3000/?name=emily&id=gugugu&pw=1234 입력 위한 수정
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views', {
express:app,
autoescape:true,
});
app.set('view engine', 'html');
app.get('/',(요청,응답)=>{
console.log(요청); //-> 요 req 에 대한 console.log를 하면 터미널 콘솔에서
console.log(요청.query.name); // 아주 많은 걸 볼 수 있다 .
console.log(요청.query.id);
console.log(요청.query.pw);
응답.render('index.html', {title:'good'});
});
app.listen(3000, ()=>{
console.log('server start port : 3000');
});<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
hello {{title}} <br />
아이디 : {{user_id}}
패스워드 : {{user_pw}}
</body>
</html>일부러 id, pw != user_id, user_pw 다르게 함.
6-1. node practice.js 입력 - 서버 켜기
다시 node practice.js 터미널에 입력
브라우저에http://localhost:3000/?name=emily&id=gugugu&pw=1234 입력
입력해도 그대로 나옴
아이디, 패스워드가 콘솔 창에는 뜨는데 브라우저에 안나오는 이유 : 응답.render에 아직title 밖에 없음
7. JS만 재수정
js에 추가함
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views', {
express:app,
autoescape:true,
});
app.engine('html', nunjucks.render);
app.set('view engine', 'html');
app.get('/',(요청,응답)=>{
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
응답.render('index.html', {
title:요청.query.name,
user_id:요청.query.id,
user_pw:요청.query.pw
});
});
app.listen(3000, ()=>{
console.log('server start port : 3000');
});, 를 쓰는건 배열같은 느낌(?) 이라 그런 거 같ㄷㅏ
html은 그대로 둠
근데 왜 갑자기 app.engine('html', nunjucks.render); 가 튀어나왓을까 요 line 없이도 동작이 되던데...
7-1. node practice.js 터미널에 입력 -> 브라우저 확인
QuerySting
localhost:3000/?name=emily&id=gugugu&pw=1234 구조에 대해
url 에 내용을 담는 구조 -> QueryString 이라고 부름
사용자가 입력 데이터를 전달하는 방법 중 하나로 url주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말함.
url 뒤에 덧붙여 추가 정보를 서버 측에 전달하는 것 / client가 어떠한 특정 리소스에 접근하고 싶어하는지 정보를 담음.
* 시작을 알리는-> ? 물음표
정해진 엔드포인트 주소 이후 ? 을 입력하여 QueryString의 시작을 알림
* parameter = value 로 여러개의 파라미터 값 적는다.
* 이 때 & 으로 parameter = value & parameter2 = value2 로 이어 쓴다.
참고 : velog.io/@pear/Query-String-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81%EC%9D%B4%EB%9E%80
Query String 쿼리스트링이란?
사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.http://host:port/path?querystringquery parameters( 물음표 뒤에 = 로 연결된 key valu
velog.io
Express 는 똑똑해서 name=emily&id=gugugu&pw=1234 를 잘라서 Object 형태로 html에게 준다.
like
name:emily
id:gugugu
pw:1234
요청에서 query라는 곳에 내용을 담아준다.
query{
name:emily
id:gugugu
pw:1234
}
QueryString을 노가다 작업을html로 만들어 줄 수 있음 (무슨 노가다인지 궁금 -질문5 )
8. html 수정 (queryString 을 html로 만들기(?) )
html수정본
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
hello {{title}} <br />
아이디 : {{user_id}}
패스워드 : {{user_pw}} <br />
<form method="get" id ="" action ="http://localhost:3000">
이름:<input type="text" name="name"> <br />
아이디:<input type="text" name="user_id"><br />
패스워드:<input type="password" name="user_pw"><br />
<input type="submit" value="버튼">
</form>
</body>
</html>위 html 에서 submit을 누르면 reload (action)을 발생시킴 .
js는 index.html -> index 만 수정
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views', {
express:app,
autoescape:true,
});
app.engine('html', nunjucks.render);
app.set('view engine', 'html');
app.get('/',(요청,응답)=>{
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
응답.render('index', {
title:요청.query.name,
user_id:요청.query.id,
user_pw:요청.query.pw
});
});
app.listen(3000, ()=>{
console.log('server start port : 3000');
});
8-1. 터미널에 node practice.js 입력 ->
http://localhost:3000/?name=emily&id=gugugu&pw=1234 ->브라우저 재실행
Form 의 역할 - input 안의 내용을 action 쪽에 링크를 이동시킴. input 안 내용 이름, 아이디, 패스워드 까지 name 값을 담아서 보냄.
서버와 html의 상호 작용
url 을 치면 practice.js 파일이 제일 먼저 열림. -> html파일을 rendering 함 -> 서버가 실현됨 -> user에게 html page를 준다.
9. JS 수정 (or html)
응답.render('index', {
title:요청.query.name,
user_id:요청.query.user_id,
user_pw:요청.query.user_pw
});
});9-1. 터미널에 node practice.js 입력 ->
http://localhost:3000/?name=emily&id=gugugu&pw=1234 ->브라우저 재실행 - > 이름, 아이디, 비번 입력 후 '버튼' 클릭
어후 어려워
================================이상 GET 이었 다. .. ===========================
==================================Post 시작 ================================
POST
Post는 body 안의 내용을 담는 것
body : webpages 가 서로 주고 받을 때
crome 창 ---------요청(with url주소) --------- > server(made by Node.js)
cromeㅇㅣ 요청을 보내는 형식이 header & body 를 가지고 있어 html 이랑 비슷하다고 한다. (눈에는 안보임)
바로 요 body 안에 post 의 내용이 담겨져 있다.
1. html 에 form method ="post"로 변경 & js 에 app.post 추가
html에 get => post로 변경
<form method="get" id ="" action ="http://localhost:3000">
↓↓↓↓↓↓↓↓↓↓↓↓
<form method="post" id ="" action ="http://localhost:3000">
js app.post 추ㄱ ㅏ
app.post('/',(요청,응답)=>{
응답.send('post로 들어온고야?');
});
1-1. html, js 저장 -> 터미널 node practice.js 입력 (서버 연결 ) -> localhost:3000 들어가기 -> 이름, id, pw 적고 '버튼'클릭
서버가 같은url이라도 get으로 왔을 땐 app.get(~) in JS 로 처리하고 post로 왔을 땐 app.post() in JS 로 값을 받는다.
form method ="get" 처럼 아까의 내용이 안나오는 이유 :
post는 내장함수를 친절히 get처럼 담아 주지 않음. 우리가 직접 담아서 구현해야함.
html-post로 내용을 주면 우리한테 준 문서를 가지고 있는데 그것을 바로 가져다 쓸 수 있는 형태가 아님. 그래서 우리는 저 문서를 해독해서 원하는 부분을 뽑아서 쓸 수 있도록 코딩해야 한다.
이를 위해서는 body-parser라는 라이브러리를 설치해야 한다.
2. 터미널에 Ctrl+C로 서버를 끄자
3. 터미널에 npm install body-parser 입력 (설치 자동)
다운 했으니 1. package.json 파일 안, 2. node_modules 폴더 안을 쳌
4. js 에 body-parser 관련 추가
11111, 22222, 33333 3개 추가
const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser'); //111111111 body-parser가져오기
const app = express();
nunjucks.configure('views', {
express:app,
autoescape:true,
});
app.use(bodyParser.urlencoded({extended:false})); //2222222222 url 을 인코딩 하겠다.
app.engine('html', nunjucks.render);
app.set('view engine', 'html');
app.get('/',(요청,응답)=>{
//http://localhost:3000/?name=emily&id=gugugu&pw=1234 얘가 요청같음
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
응답.render('index', {
title:요청.query.name,
user_id:요청.query.user_id,
user_pw:요청.query.user_pw
});
});
app.post('/',(요청,응답)=>{
console.log(요청.body); //33333333333 body.parser 잘 되었는지 확인
응답.send('post로 들어온고야?');
});
app.listen(3000, ()=>{
console.log('server start port : 3000');
});
-> 저장 후, localhost:3000 브라우저 newwork (f12- f5) 로 들어가서 확인 (여기 뭘 확인하는건지 잘 모르겠음 post ? )
처음에 요청을 받는 것을get (무조건)
get.method로 들어옴 변수(?) 가 있던 없던
네트워크 가서 다시 localhost:3000 을 치면 맨 위General REquest Method:Get 이라고 나옴.
최초의 주문은 get이다.
(이유는 모르겠다. )
hs에 get 값이 없다면 화면 표출을 안해줌
localhost:3000 을 치면
Request Method : Get
안에 name, id, ps 를 입력하면
Request Method : Post 가 나옴
-------------이렇게 수업 끝 -----------------------------
근데 bodyParser를 다운 받은 이유가 body 내용을 골라 담아서 form으로 주려고 ?
localhost:3000 에서 입력 후 응답.send('post사용햇니?') 만 나오는게 맞는가 ??
-----------------느낀점 -----------------------------------
node.js 는 js 보다 더 어려운거 같다.
js는 한 페이지만 이해하면 되었는데 이번엔 두 개의 페이지를 왓다갓다하면서 이해하면서 코드를 치니 어려웟다ㅏㅏ
그래도 나중에 익숙해지겟지????? (제발)
* parsing
(언어학) 구문 분석의 의미
(컴퓨터 과학) 일련의 문자열을 의미있는 token(어휘 분석의 단위)으로 분해하고 그것들로 이루어진 parse tree를 만드는 과정
인터넷에 주어진 정보를 내가 원하는대로 가공하여 서버에서 원하는 때 불러올 수 있또록 하는 것
어떤 data를 원하는 form으로 만들어 내는 것
-> 분석하여 원하는 결과만 추출해서 form 만들기
* parser - parsing하는 것
* configure - (컴퓨터) 환경 설정 하다.
* parameter - 매개변수
* OAuth
OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.[1] 이 매커니즘은 여러 기업들에 의해 사용되는데, 이를테면 아마존,[2] 구글, 페이스북, 마이크로소프트, 트위터가 있으며 사용자들이 타사 애플리케이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용한다. 출처 : 위키백과
질문1 ok
js 에서 ; or , 가 쓰이는데 이유는..? 함수()=>{} 일때는 ; 를 쓰고 그냥 {} 안에는 , 를 씀 객체라? ㅇㅇ맞대
질문2 ok
powershell 이라고 적혀야 되는 것 같은데 왜 cmd 나 다른 것으로 계쏙 바뀌는지? 매번 변경 안하려면..?
터미널의 형태를 어떻게 할꺼냐 보일꺼냐의 입력방식
-> 터미널
고정하는 법
질문3 ok
기존 쓰고 있는 걸 강제로 삭제하기 (같은 파일로 그대로 했는데 또 요 오류나옴) 이미 3000 쓰고 있었는데 왜쥬?
-> 질문 2랑 관련있음 cmd 여러개 켜놓은 것과 비슷함.
질문4 ok
근데 왜 갑자기 app.engine('html', nunjucks.render); 가 튀어나왓을까 요 line 없이도 동작이 되던데...
-> 필요없는거래 까먹자
질문5 ok
QueryString을 노가다 작업을html로 만들어 줄 수 있음 (무슨 노가다인지 궁금 )
http://localhost:3000/?name=emily&id=gugugu&pw=1234
이런거 노가다.
질문6 ok
index & index.html 차이
engine 쪽에서 .html
둘다 같음
app.set('view engine', 'html'); //여기서의 html 은 view engine의 확장자를 정해줌. 되는ㄷ게 html 이랑 nunjucks의 확d장자 뭐가 잇대
여기서 html 의 확장자를 만들어 주기 때문에 그냥 파일명만 제대로 쓰면 된대
질문7 ok
근데 bodyParser를 다운 받은 이유가 body 내용을 골라 담아서 form으로 주려고 ?
localhost:3000 에서 입력 후 응답.send('post사용햇니?') 만 나오는게 맞는가 ??
질문 8 ok
get & post 차이
전송방식 이 두가지일 뿐..
1. get (데이터를 읽어올 때만 사용하는 편)
url을 직접적으로 보여줌.
아이디, 네임, 비번 쓰고 버튼 누르면 url주소가 그대로 노출
http://localhost:3000/?userid=d&userpw=d&username=d
ex) 네이버 검색 - 위에 get 방식으로 url 생성되어있음.
2. post (데이터를 서버에 보낼 때, 데이터를 가지고 입력, insert, 구분값을 줄 때 )
body내용에 담겨져 있다.
get은 안보여줌 근데 어차피 post도 newwork에서 보일 수 있어서 보안 취약 등등은 문제 없음.
http://localhost:3000/
ex) 회원가입 - 입력되는 것들.... 개인정보잇응께
질문9 ok
어제 분명히
const bodyParser= require('body-parser);
app.use(bodyParser.urlencoded({extended:false}));
이건 왜 없어져지?
이게 없어도 post 가 잘 받아져 옴
질문 10
/join = url 끝난거 기준으로 생성 (요걸 많이 씀)
./join = 현재 디랙토리에서 조인 붙이겠다.
join 도 가능하지만 꼬일 수 있음.
질문11
mysql에서
질문 Ctrl + C 누르면 안에 쓴 내용들 다 삭제됨? -> cmd 로 돌아감
맨 처음에 들어갈 때 (mySQL이 깔려있는 경로라 가능)
그냥 cmd에서는 안됨(경로가 달라서)
되게 하는 방법 - window 시스템 환경변수 설정 (검색 )
컴퓨터는 깔려있는데 실행이 안되는 이유 : 환경변수 가 안 변경되어서.
질문12
3000 은 왜 없엇는데..
const port = process.env.SERVER_PORT || 3000; //
질문 13
오늘 한거
b라는 애가 또 상호작용 index 페이지보고 submit -> post로 받음 query문 작성 -> db 연결 및 보내기 (by insert into..) -> db는 그 구문을 실행, 자신만의 data를 쌓아 return to server (결과치) 에러가 났는지 안났는지. 에러 없으니 server -> join.html 만들어서 b 에게 줌. -> 사용자가 a 버튼 누르면 -> 또 s에게 요청 -> s는 또 render sth to client
sth은 뭘까
1. 사용자가 아이디,비번,네임 쓰고 '회원가입' 누르면 -> url 변경이 됨. (index.html button -> action 부분)
2. js 에서 app.post 가 실행됨 (/join url로 변경되었기 때문)
3. 아래 url 가장 끝 사진 참고
[28일차]20210421 node.js mySQL dotenv 설치 연결 app.port app.get 등
1. Mariadb 설치 방법 offbyone.tistory.com/199 Windows 10에 MariaDB 설치하기 개발용으로 Windows 10 PC에 MariaDB 를 설치해 봅니다. 1. http://mariadb.org/ 에 접속하여 다운로드 페이지로 들어갑니다. 2...
blckchainetc.tistory.com
