👉 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로 반환해 화면에 추가하는 것이었다.