👉 Express란?
- Node.js로 개발 환경을 꾸미는 데에 있어서, 서버 구축을 할 수 있게 해주는 npm 모듈 (프레임워크) 이다.
👉 Express 설치 및 간단한 예제 실습!
🤷♂️ 1. express server 만들기
- 먼저 node.js를 설치하고 node.js개발 환경을 위해 프로젝트 디렉토리에
npm init을 해준다. - express 설치를 위해
npm install express를 한다. - app.js라는 테스트 js파일에 공홈의 예제를 쳐서
node app.js로 서버를 실행시킨다.
// 공홈의 예제
//express로드 , 이를 통해 express모듈을 제어한다.
const express = require("express");
//express()가 application함수를 로드한다. 그것을 app변수에 선언하여 어플리케이션을 만든다.
const app = express();
//포트 지정
const port = 3000;
//middleware이다.
//client가 "/"경로에 get 요청을 보내면
//req는 요청객체, res는 응답객체 이다.
app.get("/", (req, res) => {
//응답 콜백 함수
//"Hello World"를 보내 화면에 출력한다.
res.send("Hello World!");
});
//middleware
//port에 접속 성공하면 콜백 함수를 실행시킨다.
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});- http://localhost:3000 에서 확인
🤷♂️ 2. (GET)express server에 내가 만든 파일 띄워보기
- nodemon이란 모듈을 설치 후 이용하여 서버를 킨다.
npm install nodemon
(nodemon = 서버 on/off 없이 변동사항 실시간 반영) - 프로젝트 디렉토리에 정적파일이 담길, src 디렉토리를 만들고, 그 안에 html파일을 생성한다.
- app.js에서 요청 처리를 위한 코드를 작성한다.
// "/"경로에 get요청 처리 middleware
app.get("/", (req, res) => {
// res.sendFile()을 통해 안의 경로에 있는 파일이 띄워진다.
// __dirname = 요청 파일의 경로를 단축시켜주는 절대경로 (현재 실행 중인 폴더 경로이다.)
// __dirname + /src/index.html 파일을 보낸다.
res.sendFile(__dirname + "/src/index.html");
});- http://localhost:3000 에서 확인
🤷♂️ 3. (POST) 유저 입력 화면에 렌더하기
- 유저 입력 양식 html을 만든다.
<!-- post method는 서버로 데이터를 전송하는 기능이다.-->
<form action="post" method="post">
input : <input type="text" name="input" /><br />
submit : <input type="submit" />
</form>-
출력 모습
-
제출한 데이터를 받아서 처리하는 모듈인 body-parser를 설치한다.
npm install body-parser -
app.js에서 post요청 처리를 위한 코드를 작성한다.
//body-parser 로드
const bodyParser = require("body-parser");
//middleware추가
// 브라우저에서 오는 응답이 json 일수도 있고, 아닐 수도 있으므로 urlencoded() 도 추가한다.
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post("/post", (req, res) => {
// 브라우저에서 받은 데이터는 req.body 에 저장된다.
res.send("<h1> welcome! </h1>" + req.body.input);
});- 출력 모습
🤷♂️ 4. fetch API를 이용한 ajax 연습
- src에 /data/homeContents.json 추가
- app.js에 json파일 렌더 코드 추가
//fs모듈 로드 (file-system)
const fs = require("fs");
let homeContents = {};
// data 폴더 안에 들어있는 json 파일들을 파싱하여 객체 안에 넣는다.
homeContents = JSON.parse(
fs.readFileSync(__dirname + "/src/data/homeContents.json", "utf-8")
);
app.get("/homeContents.json", (req, res, next) => {
res.json(homeContents);
});-
출력 모습
-
다음으로 homeContents.json 안에서 원하는 프로퍼티(이미지)만 화면에 출력해보자
-
먼저 html에 파싱한 데이터를 보여줄 태그를 추가해준다.
<div class="content"></div>
<!-- script파일 추가 -->
<script src="./sample.js"></script>- src에 js파일을 추가하고 코드를 작성한다.
//img를 넣을 태그
const content = document.querySelector(".content");
// fetch()를 통해 괄호 안 url의 데이터를 변수에 저장한다.
const item = fetch("http://localhost:3000/homeContents.json")
// fetch api는 promise를 기반한다.
// then 메서드로 fetch의 반환값 res를 받아 이를 json형태로 변환한다.
.then((res) => res.json())
// 받은 데이터를 innerHTML 한다.
.then(
(json) =>
(content.innerHTML = `<img src="${json.contents[0].eventContent.imgurl}">`)
);- 출력 모습
👉 긴 글을 마치며,,
node.js로 개발 환경을 세팅하고, 클라이언트와 서버가 통신하는 여러가지 방법에 대해 실습해 보았다.
이 글의 핵심은 fetch api를 통하여 ajax통신을 하고, 그것을 express server로 반환해 화면에 추가하는 것이었다.
if(기록📝) 성장🌱