1.TCP 방식으로 HTTP 를 생성하자
http 프로토콜
우리가 브라우저에서 url을 입력하고 엔터를 누르면
HTTP 요청을 보내게 되는데
TCP 3-way hands shaking 과정을 거친다.
3-way hands shakin: 클라이언트와 서버가 데이터 통신을 하기전에
통신준비가 되었다는것을 확인하는 것.
클라이언트가 서버에 연결 요청을 하고
서버는 연결 요청을 받아서 클라이언트에게 연결 요철 수락을 응답해요.
클라이언트는 서버로부터 수락 확인을 보내면 연결이 된다.
SYN(Synchronize Sequence Number),ACK(Acknowledgement)
클라리언트가 syn을 서버에 요청하고
서버는 SYN+ACK을 클라리언트에 연결요청 수락을 응답한다.
클라이언트가 ACK를 보내면 연결이 된다.
서버에 요청과 응답을 한다.
클라이언트가 요청을 보내면 서버가 응답을 하고
4 way-handshake TCP 연결을 종료 수행하는것.
연결을 종료하기위해 클라이언트와 서버의 상태를 서로 확인 한다.
서버가 FIN 메시지를 받고 클라이언트는 데이터가 없다는 것을 의미하는
메시지인 ACK를 보내고 서버는 데이터가 더 없으면 자신이 보내지지 않은 데이터를
확인하고 전송한 후 클라이언트에게 FIN 메시지 전송 클라이언트는 서버가
더이상 전송할 데이터가 없는 것을 확인하는 ACK메시지를 보낸다.
클라이언트와 서버의 연결이 종료되는 것.
http 프로토콜을 사용해서 네트워크 통신을 수행하는 모듈을 가지고 웹서버 개발
요청과 응답을 처리하는 기능을 제공하는 모듈
내장 모듈 http- Client Server
| |
| SYN --> |
| |
| <-- SYN, ACK |
| |
| ACK --> |
| |
그림과 같이 클라이언트와 서버간에 3번의 경우에 따라 실행된다. - 그렇다면 4-hand-shake는 어떨까?
- 코드로 만들어보자
const http = require("http");
const { url } = require("inspector");
const server = http.createServer((req, res) => {
// createServer 메서드로 서버 객체를 만들어 준다. 매개변수로 전달되는 콜백함수에는
// 매개변수로 request,response를 전달해준다.
// 콜백함수의 첫번째 매개변수
// req:http요청의 정보 URL,메소드 (GET,POST 등) 요청 헤더 정보,바디의 내용이 있다.
// 콜백함수의 두번째 매개변수
// res:http응답의 정보를 가지고 있는 객체 상태 코드는 statusCode 응답 헤더,바디의 내용이 있다.
// 200==성공
res.statusCode = 200;
// setHeader 응답 헤더의 내용을 설정 할 수 있다.
res.setHeader("Content-Type", "application/json", "charset=utf-8");
// Content-Type:응답의 내용
// application/json:응답의 내용을 JSON 형식의 데이터로 전송
// charset=utf-8:응답의 문자를 인코딩 utf-8로 설정
const URL = req.url;
// /: main 페이지의 경로
// /list:글의 목록 페이지 혹은 게시판
// 내용을 응답하고 종료하는 메서드;
// 응답하는 내용은 매개변수로 전달하면 된다.
// 브라우저의 요청을 보내면 자동으로 웹사이틔 아이콘인 파비콘 URL이 자동으로 요청된다.
// 무시하자
if (URL == "/favicon.ico") {
res.end();
return;
}
console.log(URL);
// res.end("나 응답했음");
switch (URL) {
case "/":
res.end("main page");
break;
case "/list":
res.end("list page");
break;
case "/add":
res.end("add page");
break;
default:
break;
}
});
server.listen(8080, () => {
console.log("서버 잘 열렸음");
});- 내장 모듈로 변수 생성
const http = require("http"); const { url } = require("inspector"); - 서버를 만들고 헤더와 url설정
const server = http.createServer((req, res) => { // createServer 메서드로 서버 객체를 만들어 준다. 매개변수로 전달되는 콜백함수에는 // 매개변수로 request,response를 전달해준다. // 콜백함수의 첫번째 매개변수 // req:http요청의 정보 URL,메소드 (GET,POST 등) 요청 헤더 정보,바디의 내용이 있다. // 콜백함수의 두번째 매개변수 // res:http응답의 정보를 가지고 있는 객체 상태 코드는 statusCode 응답 헤더,바디의 내용이 있다. // 200==성공 res.statusCode = 200; // setHeader 응답 헤더의 내용을 설정 할 수 있다. res.setHeader("Content-Type", "application/json", "charset=utf-8"); // Content-Type:응답의 내용 // application/json:응답의 내용을 JSON 형식의 데이터로 전송 // charset=utf-8:응답의 문자를 인코딩 utf-8로 설정 const URL = req.url; // /: main 페이지의 경로 // /list:글의 목록 페이지 혹은 게시판 // 내용을 응답하고 종료하는 메서드; // 응답하는 내용은 매개변수로 전달하면 된다. // 브라우저의 요청을 보내면 자동으로 웹사이틔 아이콘인 파비콘 URL이 자동으로 요청된다. // 무시하자 if (URL == "/favicon.ico") { res.end(); return; } console.log(URL); // res.end("나 응답했음"); switch (URL) { case "/": res.end("main page"); break; case "/list": res.end("list page"); break; case "/add": res.end("add page"); break; default: break; } });- url이 만약 list나 add일 경우 res.end()로 서버를 종료하며 해당 txt를 화면에 띄워준다.
- 마지막으로 대기상태로 만듦
server.listen(8080, () => { console.log("서버 잘 열렸음"); });
2.파일시스템 접근
// fs 모듈: 파일 시스템 파일 생성, 삭제 읽기 쓰기 등 작업을 할 수 있다.
const fs = require("fs");
// 폴더가 있는지 확인을 하는 메서드
// existsSync:메서드 폴더가 있는 지 확인을 해주는 메서드. 반환값이 boolean
// 동기적으로 작동합니다. sync 구분이 있는 메서드는 동기적으로 동작한다.
// 매개변수 폴더의 경로를 작성해준다.
let folder = fs.existsSync("./20230501/test");
console.log(folder);
// 폴더를 생성해보자
// mkdirSync 메서드: 폴더생성
// 첫번째 매개변수는 생성할 폴더의 경로
// 두번째 매개변수로 폴더 생성시 호출할 콜백 함수
// 콜백함수 첫번째 매개변수로 에러의 내용의 객체를 전달 받는다.
if (!folder) {
fs.mkdir("./20230501/test", (err) => {
if (err) {
console.log(err);
} else {
console.log("폴더생성");
}
});
// fs.mkdirSync("./20230501/test");
// console.log("폴더 On");
}
// 폴더를 만들었고 폴더안에 파일을 추가해보자
// writeFile:파일 쓰기 파일에 데이터를 작성 할 수 있다.
// 첫번째 매개변수 파일의 이름 경로
// 두번째 매개변수 파일에 작성할 내용
// 세번째 매개변수 콜백 함수
// 콜백함수의 매개변수는 에러내용의 객체를 전달 받는다.
// sync없으니까 비동기
fs.writeFile("./20230501/test/text.txt", "Hello nodejs", (err) => {
if (err) {
console.log(err);
} else {
console.log("파일 생성 완료");
}
});
//폴더도 만들고 파일도 만들고 파일의 내용도 작성해 봤으니까
// 파일을 읽어와 보자
// readFile:파일을 읽어온다.
// 첫번째 매개변수로 파일의 경로
// 두번째 매개변수로 인코딩의 내용
// 인코딩 내용을 작성을 안한면 null로 들어간다!
// 이렇게 되면 buffer객체로 읽어온다.
// 세번째 매개변수 콜백함수
// 콜백함수의 첫번째 매개변수는 에러의 내용 객체
// 두번째 매개변수는 읽어온 파일의 내용
// 마찬가지로 비동기
fs.readFile("./20230501/test/text.txt", "utf-8", (err, data) => {
if (err) {
console.log(err);
} else {
console.log(data);
}
});
// 동기는? return갓이 data
let readFileData = fs.readFileSync("./20230501/test/text.txt", "utf-8");
// 여기에 동작이 끝날 때 까지 기다린다.
console.log(readFileData);
// 폴더 제거 해보자
// rm 메서드:폴더 삭제
// 첫번 째 매개변수:삭제할 폴더의 경로
// 두번 째 매개변수로 옵션 객체를 전달하는데{recursive:true}
// recursive 키의 값에 따라 true나 false를 폴더안에 내용이 있는지 폴더안의 내용까지
// 제거할 것인지.
// 세번째 매개변수로 콜백함수
// 콜백함수는 매개변수로 에러내용의 객체를 전달 받는다.
// fs.rm('./20230501/test',{recursive:true},(err)=>{
// if (err) {
// console.log(err)
// }else{
// console.log('폴더 컷')
// }
// })- fs 내장 모듈로 existsSync를 사용하여 폴더가 존재하는 지 확인한다.
- 여기서 뒤에 Sync가 붙는것은 동기로 실행된다는 의미이다. 따라서 비동기로 실행시키고 싶다면 Sync를 제거해도 된다.
- 다만 이 때 매개변수가 달라질 수 있으니 주의하자.
3.연동
- 내장모듈 만들기
// 내장 모듈 http,fs const http = require("http"); const fs = require("fs"); - server 생성
const server = http.createServer((req, res) => { // createServer 메서드 서버 객체 만들고 // 콜백함수의 매개변수로 req요청 내용을 가지고 있는 객체 // res응답 내용을 가지고 있는 객체를 전달 받는다. // setHeader res.setHeader("Content-Type", "application/json", "charset=utf-8"); const URL = req.url; // 요청한 url이 뭘까? // 요청한 url이 파비콘이면 그냥 무; if (URL == "/favicon/ico") { res.end(); // 내용을 응답하고 종료하는 메소드 // 응답을 안해주면 클라이언트는 요청을 하고 계속 기다림! return; } switch (URL) { case "/": fs.readFile("./20230501/views/main.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; case "/list": fs.readFile("./20230501/views/list.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; case "/add": fs.readFile("./20230501/views/add.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; default: break; } });- header설정
// setHeader res.setHeader("Content-Type", "application/json", "charset=utf-8"); - URL에 따라 다른 html을 res에 보내주는 구문
switch (URL) { case "/": fs.readFile("./20230501/views/main.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; case "/list": fs.readFile("./20230501/views/list.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; case "/add": fs.readFile("./20230501/views/add.html", (err, data) => { if (err) { res.statusCode = 404; res.end(err.code); } else { res.statusCode=200; // 전달하는 컨텐츠의 내용은 html 파일의 내용이야 res.setHeader("Content-Type", "text/html", "charset=utf-8"); res.end(data); } }); // res.end(); break; default: break; }- 여기서 res.setHeader("Content-Type", "text/html", "charset=utf-8"); 는 body의 내용이 html로 바꼈기 때문에 json에서 text/html로 변경해준다.
- end안에 있는 파라미터 data는 readFile에서 두번째 매개변수 콜백함수의 두번째 매개변수이다.
파일 안에있는 data를 의미한다. 즉, html
- header설정
- server 대기상태
server.listen(8080, () => { console.log("성공했구나 이녀석..."); });
4.pacakage.json
npm init
package.json 파일을 만들어 준다.
파일을 만들 때 속성들을 입력하라고 함...
메타데이터는 데이터들을 설명해주는 데이터
예) 책이 한 권 있다고 가정하면 제목,저자,출판사도 있고 등등의 책의 정보
우리의 프로젝트의 정보를 가지고 있는 json파일이다.
메타데이터 설명을 가지고 있는 json파일 초기화 명령어
모든 설정에 기본값
npm init -y
{
"name": "blockchain",
"version": "1.0.0",
"description": "- git은 뭐냐?",
프로젝트의 설명
"main": "index.js",
모듈화를 시킬 때 메인 파일
패키지리를 require 함수로 불러올 때 명시한 value를 불러 올 수 있다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
우리가 실행시킬 때 스크립트의 명령어
"keywords": [],
검색 키워드 배열의 형태로 넣어준다.
"author": "",
패키지 제작자
"license": "ISC"
패키지 라리센스, ISC는 전체 공개
}
scripts: 우리가 자주 실행할 것 같은 명령어를 작성해 두고
npm 명령어로 실행할 수 있다. ex)npm run test
'scripts':{start : 'node index4.js'}=== npm start== node index4.js- 그럼 이 pakage.json 에 외부 모듈을 추가해보자
mysql에 연결 해볼거임 외부 모듈 설치 이번에 설치받아서 사용할 모듈은 mysql2 모듈을 설치받아서 사용할 예정 -------------------------------------------------------------------- npm install mysql2 npm i -------------------------------------------------------------------- node_module이 없으면 프로젝트 실행 안됨. 우리는 일일히 설치할 필요없지 npm install 로 dependencies의 내용의 모든 모듈을 다 설치 받음 "dependencies": { "mysql2": "^3.2.4" } ^^ 왜 웃음? 이는 명시한 버전이 없으면 다른 버전을 찾아서 설치받는다는 내용 실제 설치된 버전은 lock.json이 있다!
5.mySQL 연결하기
- 모듈 가져오기
// mysql 모듈도 있어요, 근데 왜 mysql2씀? // mysql모듈은 콜백 기반으로 promise 기반으로 사용하기가 힘긂....그래서 // mysql2를 사용할거고 . mysql2가 promise 기반을 지원하기 떄문에 사용하기 편하다. // mysql2 사용하라고 공식문서에도 권장을 함... // mysql2모듈 가져오자 const mysql2 = require("mysql2"); - createConnection으로 연결
// 연결하자 // 매개변수로 연결하는 Mysql의 옵션을 전달 해줘야한다. // host:연결할 호스트를 나타냄 root // port:연결할 포트 3306 포트에 기본적으로 열림 // user:사용자의 이름 // password:사용자 비밀번호 // database: 어떤 데이터 베이스를 연결 시킬건지 const temp = mysql2.createConnection({ user: "root", password: "q1w2e3R$", database: "test2", }); - query작성 후 테이블 생성
개발당시에 직면한 이슈를 정리하는 곳
정말 잘 읽었습니다, 고맙습니다!