고정 헤더 영역
상세 컨텐츠
본문
기본적으로 제공되는 http 모듈만으로 똑같은 응답을 하는
아덕 실속따윈 없는 초간단 http서버를 맹글어 보았음이 첫걸음이었당.
이제 파일(main.html)을 읽어서 응답하는 두번째 걸음을 후욱 질러보장
파일도 시시하당! 파일을 편하게 다루라고 fs모듈이 이미 제공된당!
HttpServer 디렉토리 아래에 public이라고 폴더를 맹글공
아래의 내용으로 main.html을 맹글어보장(카복도 상관없당)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>벌써 시작만 몇번째인가?</title>
</head>
<body style="text-align: center;">
<h1>난 최고의 개발자당</h1>
<h2>난 최고의 개발자당</h2>
<h3>난 최고의 개발자당</h3>
<h4>난 최고의 개발자당</h4>
<h5>난 최고의 개발자당</h5>
<h6>난 최고의 개발자당</h6>
<h5>난 최고의 개발자당</h5>
<h4>난 최고의 개발자당</h4>
<h3>난 최고의 개발자당</h3>
<h2>난 최고의 개발자당</h2>
<h1>난 최고의 개발자당</h1>
</body>
</html>
그라공 server.js 내용을 아래처럼 고친당.
(눈은 항상 맥락(Context)을 보려 해야 한당. 그냥 타이핑은 NO!)
import http from 'http';
import fs from 'fs'; // 파일 모듈 사용
const serverPort = 272;
const staticFolder = './public'; // public 폴더 경로 변수 지정
const server = http.createServer((req,res)=>{
// 요기 부터
fs.readFile(`${staticFolder}/main.html`,(err,data)=>{
res.end(data);
});
// 요기 까정
});
server.listen(serverPort, ()=>{
console.log(`Server is listening on ${serverPort}`);
});vs code 터미널에서 node server.js를 입력 엔터 때려, 에러가 없다면
브라우져에서 주소줄에 localhost:272 와 엔터를 때리면 main.html이 보일 것이당
localhost:272/메롱 이라 쳐도 main.html이 보일 것이당!
그렇당! 뭐라고 쳐도 소스를 보면 main.html만 읽어서 응답하닝 당연하당! ㅋㅋ
fs모듈의 readFile은 비동기로 파일의 시작부터 끝까지 읽은 뒤,
callback 함수에 error와 data를 넘겨준당! 그 data를 응답 해 준 것 뿐이당!
쪼메 낯설다면 그건 시간의 몫이니 시간에게 도움을 부탁하장!
쪼메만 더 달려 보장
main.html에 아래 한줄 내용을 <body> 태그 바로 아래에 일단 추가로 넣장!
<a href="./merong.html">요거이 이동</a>클릭하면 merong.html로 이동해야 하닝 public폴더에 아래의 내용으로 merong.html을 맹글장
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이젠 중간으로 올라서야 할 때</title>
</head>
<body style="text-align: center;color:blueviolet">
<a href="./main.html">요거이 이동</a>
<h1>난 최고의 메롱당</h1>
<h2>난 최고의 메롱당</h2>
<h3>난 최고의 메롱당</h3>
<h4>난 최고의 메롱당</h4>
<h5>난 최고의 메롱당</h5>
<h6>난 최고의 메롱당</h6>
<h5>난 최고의 메롱당</h5>
<h4>난 최고의 메롱당</h4>
<h3>난 최고의 메롱당</h3>
<h2>난 최고의 메롱당</h2>
<h1>난 최고의 메롱당</h1>
</body>
</html>
server.js 파일을 아래처럼 수정해장!
아적은 소스 라인 수가 적어서 모두 적어 넣기로 하장~~
import http from 'http';
import fs from 'fs'; // 파일 모듈 사용
const serverPort = 272;
const staticFolder = './public'; // public 폴더 경로 변수 지정
const server = http.createServer((req,res)=>{
console.log("체킁 url:",req.url);
let fileName = req.url.split('/')[1];
console.log("체킁 fileName",fileName);
if(!fileName) fileName = 'main.html'; // fileName이 비었다면 main.html로 강제 지정
fs.readFile(`${staticFolder}/${fileName}`,(err,data)=>{
res.end(data);
});
});
server.listen(serverPort, ()=>{
console.log(`Server is listening on ${serverPort}`);
});이제 vs code 터미널에서 ctrl + c를 눌러, 기존 실행코드를 멈추공,
node server.js를 입력 다시 실행시킨당
console에 찍힐 req.url 과 req.url.split('/')[1] 에 주목한당!
아마 눈으로 봤다면 의미가 짐작될 것이당!
브라우져에서 localhost:272 입력 하고, main.html의 a 링크를 누르면 merong.html
merong.html a 링크를 누르면 main.html로 왔다리 갔다리 하는 걸 볼 수 있을 것이당.
추가로 public 폴더에 원하는이름.html을 맹글공
(파일명이 소스에 디코딩이 적용 안되어 있어 아덕은 영어이름이어야 한당!)
브라우져에 localhost:272/원하는이름.html 을 입력하면 실행되는 걸 확인 할 수 있을 것이당!
js나 css 확장자를 가진 파일도 public 폴더에 맹글어보공,
localhost:272/js파일명.js 나 localhost:272/css파일명.css 로 접속해 보장!
지금까지 한 내용을 가만히 생각해 보는 시간을 잠시 가져보장!(3분이라동~~)
요기까지가 보통 정적 웹서버가 일반적으로 주구장창 많이 하는 일일 것이당.
곧 정적 웹서버가 하는 일을 적어도 이해 한 것이당! 부정해도 소용없당 아는 것이당! ~~ ㅋㅋ
사실 걱정없당!
express라는 프레임워크 모듈을 쓰면 여태까지의 내용 + 알파를 다 해준당!
어떻게 버그까지 사랑하겠어엉~~
콘솔.로그 널 사랑하는 거지잉!
버그가 나쁜것만은 아니당
어쩌면 버그가 존재 이유이며, 디버그로 인연을 맺을 것이당!
니 버그 내 디버그...
내 버그 니 디버그 모두 사랑하장!~~
Null 조차동.....
https://www.youtube.com/watch?v=_vU28jNLQ-8
'자바스크립트' 카테고리의 다른 글
| 시베리안 허숙희의 자바스크립트 비기닝 4 (변수동작: 복사와 참조) (0) | 2023.06.01 |
|---|---|
| 시베리안 허숙희의 자바스크립트 비기닝 3 (0) | 2023.05.30 |
| 시베리안 허숙희의 자바스크립트 비기닝 1 (0) | 2023.05.28 |
| html2canvas와 jspdf를 이용 pdf 맹글깅 (0) | 2023.05.24 |
| fancytree (0) | 2023.05.09 |
