0603_ 서버 3

 

http 모듈로 웹서버 만들기

 

우리가 만드는건 이제 웹서버를 만든다.

우리의 피시가 서버 피시 된다.

 

쿠키 세션 라우팅 을 중점으로 본다.

 

---

 

서버는 클라이언트가 있기에 동자갛ㅂ니다.

 

클라는 서버로 요청을 보내고, 서버는 응답을 한다.

 

요청과 응답이 이벤트라고 생각하시면 된다.

 

http 내장 모듈을 사용한다.

 

https://nodejs.org/dist/latest-v14.x/docs/api/http.html

HTTP | Node.js v14.17.0 Documentation

 

API를 보면서 하는게 좋다.

요청이 들어올 때마다 매번 콜백함수가 실행된다.

따라서 이 콜백함수에 응답을 적어주면 된다.

 

보통 request를 req라고 표현, response를 줄여서 res 라고 한다.

 

요청이 req로 응답은 res 로

 

req 객체는 요청에 관한 정보들을

res 객체는 응답에 관한 정보들을 담고있다.

 

서버1.js 파일을 새로 만들어준다.

 

 

자바는 반환이 뒤로 붙는다.

 

이렇게 쓸수 있다.

 

즉 http.server 객체가 반환이 되는 것

 

포트는 서버 피시에서 접근 할 수있게 열어두는 통로라고 생각하면 된다.

 

크리에이트 서버 메서ㄷ드 뒤에 리슨메서드를 붙이고, 클라에 공개할 포트 번화오 실행될 콜백 함수를 넣어줍니다.

 

 

 

 

server.listen에서 포트에서 대기하고있다가.

입력이 들어오면, res. 의 기능이 작동한다.

<h1></h1> 은 HTML 태그이다. 궁금하면 

https://www.w3schools.com/html/html_scripts.asp

HTML JavaScript

 

const http = require('http');
const port = 3000;
const server = http.createServer((req,res)=>{
    res.write('<h1> Hello Node!</h1>');
    res.end('<p> Hello Node!</p>');
});

server.listen(3000, () =>{
    console.log(`${port}번 포트에서 서버 대기중입니다.`);
});

 

write 는 쓰는것

end는 끝내는 부분

 

----

 

실행하면 서버가 열린것

 

요청할라면 http://localhost:3000/

으로 접속하면 된다.

 

터미널에서 컨트롤 + c 누르면 서버가 닫힘

 

 

새로고침하면 서버가 안들어가짐

 

 

 

------

 

 

on 를 써서 사용할 수도 있다 .

 

res.write의 첫번째 인자는 클라이언트로 보낼 데이터입니다.

내가 만약 js 파일을 보내고싶으면 제이슨을 넣으면된다.

 

res.end는 응답을 종료하는 메서드이다. 만약 인자가 있다면 그 데이터도 클라로 보내고 응답 종료

만약 없다면 그냥 end만 찍어주면 된다.

 

유명한 포트 번호로는 21(FTP), 80(HTTP), 443(HTTPS), 3306(MySQL) 이 포트들은 사용하지 않는게 좋다.

 

https://www.pinterest.de/ // 이런 것은 기본으로 80 이 붙어 있기 때문에 도메인 뒤에 붙지 않는다.

 

---

 

이제는 파일을 읽어서 전송을 해보자.

우리가 전송을 하면 문자열로 전송을 할 것이다. 

 

 

server.html 파일을 하나 만든다.

 

! 치면 이멧이 나옴 

 

 

 

바디 쪽에 적어줄 거시다.

 

헤드 안에는 메타정보가 들어가 있고,

Title은 위에 메뉴쪽에 뜨는 제목

바디 안에 작성을 하면된다.

마크다운이랑 똑같다.  = HTML 화면 어떻게 띄울것인가

 

그냥 실행하면 안되고, 확장을 눌러준다.

 

 

 

어셋 스토어같은 게 뜬다.

 

 

 

 

ㅏ이브서버 검색 

설치하기

 

 

설치를 하고 

 

 

html 파일에 오른쪽 클릭하면 오픈 라이브 서버 뜬다.

 

 

이건 위와같이 우리의 서버가 아니라, 가상 서버를 통해서 보여주는 것이다 

 

진짜 서버가 아니라는 뜻 !

 

잘나온 걸 확인했으니깐 서버를 만들어서 보자 

 

 

기본 틀 

 

 

 

 

fs를 써서 파일을 불러오기 이벤트를 달아서 err면 err

아니면 res.end(data); 해서  끝내준다.

 

 

 

서버구동한다.

 

 

문법이 안쪽으로 들어가니깐 꼭 먼저 와꾸를 프레임을 잡고 안을 채워주는 방법으로 하기

 

서버의 코드를 바꾸면 꼭 서버를 재시작해야지 바뀐 내용이 보인다 

 

 

-----

 

포트만 다르게 해서 동시에 여러 노드서버를 실행할 수도 있다.

 

쿠키와 세션 이해하기

 

클라에서 보내는 요청에서 단점에는 누가 요청을 보내는지 모른다.

여러 컴퓨터가 공통의 IP주소를 가질수도 있기 때문에

하지만 로그인을 구현 할려면 쿠키와 세션을 알아야한다.

우리가 방문하는 사이트는 로그인을 할 떄 내부적으로 쿠키와 세션을 사용

우리가 로그인 후 새로고침 해도 로그아웃아 안된다. 왜냐면 클라가 서버에게 여러분이 누구인지를

계속 알려주기 때문이다.

 

즉, 쿠키에다가 저장을 하고 쿠키는 다시 서버에  보내줍니다.

 

여러분이 누구인지 기억하기 위해서 서버는 요청에 대한 응답을 할 떄 쿠키라는 것을 같이 보낸다.

 

쿠키는 키-값의 쌍입니다.

 

쿠키를 저장해두었다가 요청할 때마다 쿠키를 동봉해서 보냅니다.

서버는 요청에 들어 있는 쿠키를 읽어서 사용자가 누구인지 파악합니다.

 

브라우저는 쿠카가 있다면 자동으로 동봉해서 보내주므로 따로 처리할 필요가 없다

서버에서 브라우저로 쿠키를 보낼 때만 우리가 코드로 작성하여 처리한다.

 

유니티에서는 우리가 따로 저장을 해두어야한다.

 

클라가 요청 할때 서버는 쿠키와 함께 응답. 다시 클라가 요청할때 쿠키와 함꼐 요청을 한다.

 

 

쿠키는 요청과 응답의 헤더(header)에 저장됩니다.

 

요청과 응답은 각각 헤더와 본문을 가집니다. 

 

------

 

자바에서는 할당 하지 않으면 undefined 으로 뜬다.

 

 

 

 

 

    res.writeHead(200, {'set-Cookie':'mycookie=test'});

쿠키를 저장하는 것 .

 

쿠키 보는 법 f12 ->

닥 사이즈 밑으로

 

그러면 브라우저 = 클라 에 쿠키가 쌓여 있다.

 

그러고 다시 

 

 

 

 

    console.log(req.headers.cookie);

으로 현재 클라에 있는 쿠키를 확인 할 수 이싿 .

 

서버에 잘 뜬다.

 

즉. 정리하면,  클라에서 쿠키 정보를 내려주고, 브라우저가 가지고 있으는 쿠키를 다시 쿠키를 받을 수 가 있다.

 

res.writeHead(200, {'set-Cookie':'mycookie=test'});

쿠키 저장

    console.log(req.headers.cookie);
    
 

쿠키 받기 

 

-----

 

 

 

 

사이트에 상태를 알 수도 있다.

 

쿠키도 지울 수도 있다.

 

 

-----

 

server4.html 만들어준다.

 

! 눌러서 이밋 자동 만들기

 

 

와꾸를 먼저 짜기 input은 특이하게 /> 끝난다.

 

form 은 데이터를 받는 것을 의미

 

 

input 태그는 저렇게 표현

버튼은 저렇게 

 

 

 

태그 안에 들어가는 것을 속성이라고함

 

id = '' 는 태그의 id를 설정하는 것.

 

 

 

 action = './login' 이 중요하다.

 

----

 

 

 

쿼리를 받아 올 수 있다.

 

/login 에 들어가면 

 

 

 

--

강제로 쿼리 만들어 보기

 

데이터가 넘어 온다.

 

----

 

qs.parse 쿼리 를 해서 데이터로 저장 해보자

 

 

 

 

즉 사이트에서 쿼리 값을 받으면, 

데이터로 쓸 수 있다.

 

const http = require('http');
const fs = require('fs');
const url = require('url');
const qs = require('querystring');

//서버생성
const server = http.createServer((req, res) =>{
    let message = '';

    if(req.url.includes('/')){
        message = 'home';
        if(req.url.includes('/login')){
            message = 'login';
            console.log(req.url);
            const {query} = url.parse(req.url);
            console.log(query);
            const {name, age } = qs.parse(query);
            console.log('name :' + name, 'age :' + age);
        }
    }
    res.end(message);
});

//서버를 시작한다.
server.listen(3000, ()=>{
    console.log('서버 시작')
});

 

즉 정리하면,

맨 처음에는 쿠키를 세팅해주고, 쿠키 값을 클라에게 받아서 그걸 사용한다.

url ? 이후 쿼리 값을 받아서 사용할 수도 잇따.

 

--- 

 

쿠키를 파싱하는 이유는 DB로 저장하기 위해서 즉, ID 값을 따로 저장하고 데이털르 가져올려고함

 

정리하면 서버에서 응답할 때 쿠키를 동봉해서 보내고

클라는 새로고침할때 그 쿠키를 다시 서버로 던져주고, 서버는 그걸 데이터로 가지고 비교해서

기존 유저인가를 가진다. 

 

또한 주소별로 분기 처리를 하였다.

 

----

더 공부하고 싶으면 

cookie

.map

.reduce 

 

자주 사용한다.