React(리액트) 티키타카 4 ( Node 웹서버)

React

by e7e 2024. 9. 26. 21:54

2024.09.25 - [자바스크립트] - React(리액트) 티키타카 3 (NODE NPM 이해 )

에서 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

되었당. 요거 2개만 있어도 꽤나 편리하당.

먼저 webserver 폴더 아래에 public 이름으로 폴더를 맹글장.

그라고 webserver 폴더에 아래 파일을 맹글장. (주의 public 폴더 아이당!)

staticServer.js

import express from "express";
import serveIndex from "serve-index";

const serverPort = 8272;

const app = express();

// 요기가 핵심으로 브라우져에서 /e7e라는 건
// 실제 현재 디렉토리 아래 public 폴더를 가리킨다는 의미로
// 멋진 말로는 가상 디렉토리(Virtual Directory)라 한다.
// 너무 어렵게 생각말고, 그저 public폴더에 /e7e 별명을 준거라 생각하장
// serveIndex 모듈은 이 디렉토리에 인덱싱 기능을 제공한당
app.use(
  "/e7e",
  express.static("./public"),
  serveIndex("./public", { icons: true })
);


app.listen(serverPort, () => {
  console.log(`E7E 서버가 포트 ${serverPort} 에서 돌아버려요 `);
});

확인 하장. Terminal에 아래 처럼 입룍허장.

node staticServer.js

E7E 서버가 포트 8272 에서 돌아버려요 메세지가

Terminal에 보인당. 도는 구낭!!!~~

이제 브라우져 주소 줄에 http://localhost:8272/e7e 라고 치면 아래 처럼 보여야 한단당.

헉 이렇게 재미없을 수강!~~ 배 아펐다 배 나은 기분이당.

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:8272/e7e만 되공 localhost:8272는 안되서 짜증 난당.

Ctrl + c 를 눌러 서버 실행을 중지 시키고, 소스에 아래 처럼 쪼메 추가하장.

staticServer.js

import express from "express";
import serveIndex from "serve-index";

const serverPort = 8272;

const app = express();

app.use(
  "/e7e",
  express.static("./public"),
  serveIndex("./public", { icons: true })
);

// 요기를 추가 하장 / 도 public을 가리킨당. 그렇당
app.use(
  "/",
  express.static("./public"),
  serveIndex("./public", { icons: true })
);

app.listen(serverPort, () => {
  console.log(`E7E 서버가 포트 ${serverPort} 에서 돌아버려요 `);
});

node staticServer.js 로 서버를 다시 구동 시키고. 브라우져에서

http://localhost:8272

http://localhost:8272/e7e

에 멋지게 connect 해보면 둘다 public 폴더 내용이 나옴에 아하!

느끼메 등골에 땀이 전혀 흐르지 않아 건성피부에 좋은 보습제가

유통기한을 넘겨 버려지는 아픔에 목에서 음치 소리가 나는뎅

그게 피아노 소리같당.

대략이지만 node가 머하는 아이인지 쪼금은 친해진 느낌이당.

node를 깊이 가면 react를 기피하게 되닝.. 요정도로 일단 만족하고

다음편 부터는 React랑 스토리를 맹글어 보장.~~

사랑이라고 무조건 좋은 건 아니당.

지나치면 공포스런 공격이 될 수 있당.

모자람도 핵 분열의 시작이 될 수 있당.

사랑이 문제가 아니라

지나침과 모자람이 문제당.

사랑이 공격이 되지 않게, 술은 적당히.... ㅋㅋ

Love Defence 말공 Love Defense로

밸런스 있겡!~~~~.....

https://www.youtube.com/watch?v=9XttLI0oH0I

'React' 카테고리의 다른 글

React(리액트) 티키타카 6 (JSX) (2)	2024.09.30
React(리액트) 티키타카 5 (개발 폴더 파일 구조) (0)	2024.09.30
React(리액트) 티키타카 3 (NODE NPM 이해 ) (0)	2024.09.26
React(리액트) 티키타카 2 (개발 환경 구축 ) (2)	2024.09.24
React(리액트) 티키타카 1 (소개) (0)	2024.09.23