7/20 Node.JS HTML

JK·2023년 7월 21일
TIL크래프톤정글
0

어제까지 회원가입, 로그인, JWT의 구현을 마치고 이제 프론트엔드와 연결을 해야 하는데 저를 포함한 한 명의 팀원을 제외하고는 이런 걸 해본 경험이 없다 보니 일단 인터넷 강의를 보면서 공부하기로 했습니다

Node.js와 HTML의 연동

Node.js와 HTML의 연동은 클라이언트와 서버 간의 데이터 교환과 상호작용을 가능하게 합니다. 클라이언트에서는 HTML, CSS, JavaScript를 사용하여 사용자 인터페이스를 구현하고, 서버에서는 Node.js를 사용하여 요청을 처리하고 데이터를 제공합니다.

HTTP는 클라이언트와 서버 간의 통신을 위한 프로토콜로, GET, POST, PUT, DELETE와 같은 메서드를 사용하여 요청을 보냅니다. 이러한 메서드는 서버에 어떤 동작을 수행할지를 지정합니다.

  1. GET 메서드: 서버로부터 데이터를 가져올 때 사용됩니다. 예를 들어, 브라우저에서 웹 페이지를 요청하거나 검색 기능을 사용할 때 주로 사용됩니다.

  2. POST 메서드: 서버에 새로운 데이터를 전송하거나 데이터를 생성할 때 사용됩니다. 예를 들어, 회원가입 폼을 작성하고 제출할 때 사용됩니다.

  3. PUT 메서드: 서버에 데이터를 업데이트(수정)할 때 사용됩니다. 예를 들어, 사용자 정보를 수정하거나 블로그 글을 수정할 때 사용됩니다.

  4. DELETE 메서드: 서버에 데이터를 삭제할 때 사용됩니다. 예를 들어, 사용자 계정을 삭제하거나 게시물을 삭제할 때 사용됩니다.

간단한 예제로 설명해보겠습니다.

Node.js와 HTML의 연동은 클라이언트와 서버 간의 데이터 교환과 상호작용을 가능하게 합니다. 클라이언트에서는 HTML, CSS, JavaScript를 사용하여 사용자 인터페이스를 구현하고, 서버에서는 Node.js를 사용하여 요청을 처리하고 데이터를 제공합니다.

HTTP는 클라이언트와 서버 간의 통신을 위한 프로토콜로, GET, POST, PUT, DELETE와 같은 메서드를 사용하여 요청을 보냅니다. 이러한 메서드는 서버에 어떤 동작을 수행할지를 지정합니다.

GET 메서드: 서버로부터 데이터를 가져올 때 사용됩니다. 예를 들어, 브라우저에서 웹 페이지를 요청하거나 검색 기능을 사용할 때 주로 사용됩니다.

POST 메서드: 서버에 새로운 데이터를 전송하거나 데이터를 생성할 때 사용됩니다. 예를 들어, 회원가입 폼을 작성하고 제출할 때 사용됩니다.

PUT 메서드: 서버에 데이터를 업데이트(수정)할 때 사용됩니다. 예를 들어, 사용자 정보를 수정하거나 블로그 글을 수정할 때 사용됩니다.

DELETE 메서드: 서버에 데이터를 삭제할 때 사용됩니다. 예를 들어, 사용자 계정을 삭제하거나 게시물을 삭제할 때 사용됩니다.

간단한 예제로 설명해보겠습니다.

HTML 파일과 Node.js 서버 파일을 생성합니다.
index.html:
html
Copy code

Node.js and HTML Example

Hello Node.js and HTML!

Get Data server.js: javascript Copy code const express = require('express'); const app = express(); const port = 3000;

app.use(express.json());

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.get('/data', (req, res) => {
const data = {
message: 'Data from server!',
};
res.json(data);
});

app.listen(port, () => {
console.log(Server is running on port ${port});
});
서버를 실행하고 웹 브라우저에서 http://localhost:3000을 엽니다.

서버는 루트 경로에 해당하는 index.html 파일을 응답으로 보내면서 브라우저에 화면을 보여줍니다.
웹 페이지에는 "Hello Node.js and HTML!"과 "Get Data" 버튼이 표시됩니다.

"Get Data" 버튼을 클릭하면 JavaScript 함수 getData()가 실행됩니다.

getData() 함수에서는 fetch를 사용하여 서버의 /data 경로로 GET 요청을 보냅니다.

서버는 /data 경로에 대한 GET 요청을 처리하는 핸들러를 가지고 있으며, 이 핸들러에서는 단순히 JSON 데이터를 응답으로 보냅니다.

클라이언트는 서버로부터 받은 JSON 데이터를 alert()으로 표시하여 "Data from server!" 메시지를 보여줍니다.

이렇게 HTML과 Node.js를 연동하여 간단한 데이터를 주고받을 수 있습니다. 이후에는 POST, PUT, DELETE 등의 요청을 처리하거나 데이터베이스와 연동하여 더 복잡한 기능을 구현할 수 있습니다.

HTML 파일과 Node.js 서버 파일을 생성합니다.

  • index.html:
<!DOCTYPE html>
<html>
<head>
  <title>Node.js and HTML Example</title>
</head>
<body>
  <h1>Hello Node.js and HTML!</h1>
  <button onclick="getData()">Get Data</button>
</body>
<script>
  async function getData() {
    const response = await fetch('/data', {
      method: 'GET',
    });
    const data = await response.json();
    alert(data.message);
  }
</script>
</html>

server.js:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.get('/data', (req, res) => {
  const data = {
    message: 'Data from server!',
  };
  res.json(data);
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

  1. 서버를 실행하고 웹 브라우저에서 http://localhost:3000을 엽니다.

    • 서버는 루트 경로에 해당하는 index.html 파일을 응답으로 보내면서 브라우저에 화면을 보여줍니다.

  2. 웹 페이지에는 "Hello Node.js and HTML!"과 "Get Data" 버튼이 표시됩니다.

  3. "Get Data" 버튼을 클릭하면 JavaScript 함수 getData()가 실행됩니다.

  4. getData() 함수에서는 fetch를 사용하여 서버의 /data 경로로 GET 요청을 보냅니다.

  5. 서버는 /data 경로에 대한 GET 요청을 처리하는 핸들러를 가지고 있으며, 이 핸들러에서는 단순히 JSON 데이터를 응답으로 보냅니다.

  6. 클라이언트는 서버로부터 받은 JSON 데이터를 alert()으로 표시하여 "Data from server!" 메시지를 보여줍니다.

이렇게 HTML과 Node.js를 연동하여 간단한 데이터를 주고받을 수 있습니다. 이후에는 POST, PUT, DELETE 등의 요청을 처리하거나 데이터베이스와 연동하여 더 복잡한 기능을 구현할 수 있습니다.

EJS

EJS(Embedded JavaScript)는 JavaScript의 확장된 형태로, Node.js와 웹 프레임워크 Express에서 사용되는 템플릿 엔진 중 하나입니다. EJS를 사용하면 HTML 문서 안에 JavaScript 코드를 쉽게 삽입하여 동적인 웹 페이지를 생성할 수 있습니다.

EJS의 주요 특징과 사용법을 설명하겠습니다:

  1. 템플릿 엔진: EJS는 웹 애플리케이션에서 동적인 컨텐츠를 생성하는 데 사용되는 템플릿 엔진입니다. HTML 문서 안에 <% %>와 같은 템플릿 태그를 사용하여 JavaScript 코드를 삽입할 수 있습니다.

  2. 템플릿 렌더링: EJS를 사용하면 서버에서 데이터를 받아 HTML 템플릿을 렌더링하여 최종 HTML 문서를 생성할 수 있습니다. 클라이언트에게 최종 HTML 문서를 전송하여 동적인 컨텐츠를 제공할 수 있습니다.

  3. 데이터 전달: EJS에서 템플릿에 데이터를 전달하는 방법은 <% %> 태그 안에서 변수를 사용하는 것입니다. 이러한 변수는 서버에서 클라이언트로 데이터를 전달하는 데 사용됩니다.

  4. 조건문과 반복문: EJS에서는 JavaScript의 조건문(if-else)과 반복문(for, while)을 사용하여 동적인 컨텐츠를 생성할 수 있습니다. 이를 통해 템플릿에 다양한 데이터를 동적으로 표시할 수 있습니다.

  5. Partials(부분 템플릿): EJS에서는 부분 템플릿을 사용하여 웹 페이지의 여러 부분을 분리하여 관리할 수 있습니다. 이를 통해 웹 페이지의 구조를 모듈화하고 코드의 재사용성을 높일 수 있습니다.

간단한 EJS 예제를 통해 사용법을 설명하겠습니다:

  1. Node.js와 Express 프레임워크를 사용하여 웹 애플리케이션을 설정합니다.

  2. EJS를 설치하고 Express 애플리케이션에서 EJS를 사용하도록 설정합니다.

  3. EJS 템플릿을 작성하여 웹 페이지의 동적인 컨텐츠를 구현합니다.

예제 코드:

// index.js (Node.js 서버 파일)
const express = require('express');
const app = express();
const port = 3000;

// EJS를 사용하도록 설정
app.set('view engine', 'ejs');

// 라우트 설정
app.get('/', (req, res) => {
  const data = {
    title: 'Hello EJS',
    message: 'Welcome to EJS example!',
  };
  res.render('index', data); // index.ejs를 렌더링하며 데이터 전달
});

// 서버 실행
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

<!-- index.ejs (EJS 템플릿 파일) -->
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

위의 예제에서는 Express 애플리케이션에서 EJS를 사용하도록 설정하고, '/' 경로로 요청이 오면 index.ejs 템플릿을 렌더링하며 data 객체를 템플릿에 전달합니다. title과 message는 EJS 태그(<%= %>)를 사용하여 템플릿 안에서 데이터를 동적으로 표시하고 있습니다.

이렇게 EJS를 사용하면 서버에서 데이터를 렌더링하여 동적인 웹 페이지를 구현할 수 있습니다. EJS는 Express와 호환성이 높아서 Node.js 서버 개발 시 유용하게 사용되는 템플릿 엔진 중 하나입니다.

내일부터는 코딩애플 인터넷강의를 들으며 실습을 해보고 실습한 내용을 정리해 보겠습니다 ㅎㅎ

profile
JK
^^
이전 포스트

7/19 JWT 인증

다음 포스트

7/20 Node.JS HTML

0개의 댓글

관련 채용 정보