https://deahan.tistory.com/416
[React] 272샘의 React3 (NODE NPM 이해)
https://deahan.tistory.com/414 [React] React 개발환경 구축node.js설치 아래 url참고https://deahan.tistory.com/413 [React] Node.Js설치https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrom
deahan.tistory.com
에서 express 모듈을 설치해 놓고서 그냥 지나치려니 서운하다고 함....
중장기적으로 전체적인 이해에 분명 도움이 되니 살짝 건드려 보고 가자
Express모듈은 사실 Node에선 아래 처럼 엄청나게 유명함
MERN -> MongoDB + Express + React + Node
MEVN -> MongoDB + Express + Vue + Node
MEAN -> MongoDB + Express + Angular + Node
자바 스프링의 MVC 역할을 불편없이 해줌
Express를 이용해서 그래도 쓸만한 정적 웹서버를 1개 만들어 보자
정적 웹서버가 웹 개발자에게 쓸만하려면 디렉토리 indexing 기능이 당연히
있어야 할 것이다. (디렉토리에 있는 파일 리스트를 보여주는 기능)
없다면 짜증남...
직접 fs(파일시스템) 모듈을 이용 디렉토리를 읽는 기능을 넣어서 만들수도 있지만,
serve-index라는 이름의 모듈로 이미 구현되어 있다
express모듈을 설치했던 것 처럼 webserver 폴더인 상태에서
Terminal에 아래 명령어를 입력하여 serve-index 모듈을 설치 해보자
npm install serve-index
되었다. express모듈, serve-index 모듈 이것 2개만 있어도 정말 편리하당.
먼저 webserver 폴더 아래에 public 이름으로 폴더를 만들자
그리고 webserver 폴더에 아래 파일을 만들자. (주의 public 폴더 아니고 webserver 다)
staticServer.js
import express from "express";
import serveIndex from "serve-index";
const serverPort = 8220;
const app = express();
// 요기가 핵심으로 브라우져에서 /minwoo라는 건
// 실제 현재 디렉토리 아래 public 폴더를 가리킨다는 의미로
// 멋진 말로는 가상 디렉토리(Virtual Directory)라 한다.
// 너무 어렵게 생각말고, 그저 public폴더에 /minwoo라는 별명을 준거라 생각하자
// serveIndex 모듈은 이 디렉토리에 인덱싱 기능을 제공한다
app.use(
"/minwoo",
express.static("./public"),
serveIndex("./public", { icons: true })
);
app.listen(serverPort, () => {
console.log(`민우 서버가 포트 ${serverPort} 에서 돌아요 `);
});
확인 하자. public파일로 이동해해서
reactsudy\webserver> cd public
Terminal에 아래 처럼 입력
node staticServer.js
민우 서버가 포트 8272 에서 돌아요 메세지가
Terminal에 보인당. 잘 돌고 있구나
이제 브라우져 주소 줄에 http://localhost:8220/minwoo 라고 치면 아래 처럼 보여야 한단당.
public 폴더에 아래 2개 파일을 복사 붙여넣기로 만들자
미누마니좋아.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>미누마니좋아</title>
<style>
#who {
color: yellow;
background-color: black;
}
#minu {
color: white;
background-color: pink;
}
</style>
</head>
<body>
<h1 id="who">누가 날 미누?</h1>
<h1 id="minu">미누! 정말 좋아!!</h1>
</body>
</html>
e7e는은폐엄폐좋아.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>E7E는 은폐엄폐좋아</title>
<style>
#e7e {
color: white;
background-color: black;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>미누는 천재?</h1>
<h1 id="e7e">E7E 정말 좋앙!~~</h1>
</body>
</html>
이제 브라우져에서 새로고침을 한다면 아래 처럼 보이는데.... 클릭 하고싶다
Search 안에 찾는 파일명도 써보장 검색도 되는지 확인
근데... 근데....
localhost:8220/minwoo만 되고 localhost:8220은 안되서 짜증 난다.
Ctrl + c 를 눌러 서버 실행을 중지 시키고, 소스에 아래 처럼 조금 추가
staticServer.js
import express from "express";
import serveIndex from "serve-index";
const serverPort = 8220;
const app = express();
// 요기가 핵심으로 브라우져에서 /minwoo라는 건
// 실제 현재 디렉토리 아래 public 폴더를 가리킨다는 의미로
// 멋진 말로는 가상 디렉토리(Virtual Directory)라 한다.
// 너무 어렵게 생각말고, 그저 public폴더에 /minwoo라는 별명을 준거라 생각하자
// serveIndex 모듈은 이 디렉토리에 인덱싱 기능을 제공한다
app.use(
"/minwoo",
express.static("./public"),
serveIndex("./public", { icons: true })
);
// 요기를 추가 하자 / 도 public을 가리킨다. 그렇다!!
app.use(
"/",
express.static("./public"),
serveIndex("./public", { icons: true })
);
app.listen(serverPort, () => {
console.log(`민우 서버가 포트 ${serverPort} 에서 돌아요 `);
});
node staticServer.js 로 서버를 다시 구동 시키고. 브라우져에서
http://localhost:8220
http://localhost:8220/minwoo
에 멋지게 connect 해보면 둘다 public 폴더 내용이 나옴에 아하!
대략이지만 node가 뭐하는 아이인지 조금은 친해진 느낌이다.
node를 깊이 가면 react를 기피하게 되니.. 요정도로 일단 만족하고
다음편 부터는 React랑 스토리를 만들어 보자
'REACT' 카테고리의 다른 글
| [React] 272샘의 React6 (JSX) (6) | 2024.10.08 |
|---|---|
| [React] 272샘의 React5 (개발 폴더 파일 구조) (3) | 2024.10.08 |
| [React] 272샘의 React3 (NODE NPM 이해) (1) | 2024.10.07 |
| [React] 272샘의 React2 (개발환경 구축) (4) | 2024.09.26 |
| [React] 272샘의 React1 (Node.Js설치) (0) | 2024.09.26 |
