[NodeJS+Express] 2.새로운 페이지 만들기 Kassid

728x90

//server.js

const express = require('express')
const app = express()

//PORT 열기
app.listen(8080, ()=>{
  console.log('http://localhost:8080 에서 서버 실행중!');
})

//root에서 GET요청(접속)시 렌더링할 내용
app.get('/', (req, res)=>{
  res.send("HELLO!!");
})

저번 포스트에서 간단하게 서버를 만들어보았다.

단 한개의 페이지만 제작하였는데 여러 페이지를 만들고 싶다면 어떻게 해야할까?

1. 새로운 페이지 만드려면?

페이지를 어떻게 만들까?

우리는 브라우저를 열고 사이트에 접속할때 URL을 이용한다. 이에 대해서 간단하게 살펴보자.

1) URL

URL의 구성▼

위의 구성을 갖는 URL에서 페이지를 나누는 것은 path이다.

예를 들어 뉴스 페이지는 /news, 스포츠 페이지는 /sports 등으로 만들 수 있다.

2. NodeJS에서 새로운 페이지 만들기

1) 새로운 path 생성

이제 NodeJS에서 페이지 즉, path를 만드는 방법을 알아보자.

app.get('/path명', (req, res)=>{ //req, res는 임의 파라미터명!
  res.send("접속 시 보낼 내용");
})

즉, 위에서 처음으로 서버를 만들때 작성했던 아래의 코드도 같은 방법인 것을 알 수 있다.

단지 path가 '/' 인 메인 페이지로의 접속에 대한 처리인 것이다.

app.get('/', (req, res)=>{
  res.send("HELLO!!");
})

2) html 파일 전송하기

지금까지는 접속을 요청했을때 간단한 텍스트를 반환했다.

이번에는 html 파일을 전송해보자.

(1) html 파일 생성

먼저 html 파일을 생성한다. (간단한 프로젝트니까 일단 이렇게!)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>Hello Stranger!</h2>
</body>
</html>

(2) js파일 수정

아래의 파일을 수정해보자!

//server.js

const express = require('express')
const app = express()

//PORT 열기
app.listen(8080, ()=>{
  console.log('http://localhost:8080 에서 서버 실행중!');
})

//root에서 GET요청(접속)시 렌더링할 내용
app.get('/', (req, res)=>{
  res.send("HELLO!!");
})

res.sendFile(파일경로)

sendFile()은 파일을 렌더링하는 함수이다. 인수에 파일 경로를 전달한다.

//root에서 GET요청(접속)시 렌더링할 내용
app.get('/', (req, res)=>{
  res.sendFile(__dirname + "/index.html");
})

[ 파일 경로 ]

① __dirname : 현재 파일의 절대 경로를 반환한다.

② "/index.html" : 렌더링할 파일인 index.html은 현재 파일(server.js) 기준 같은 디렉토리에 있으므로 이와같이 작성한다.

결과

잘나온다!

저작자표시

'🌌 | WEB DEV > NodeJS' 카테고리의 다른 글

[NodeJS+Express] 3.정적파일 넣어주기 (css파일 등록) & Bootstrap 이용하기 (0)	2023.09.23
[NodeJS+Express] nodemon으로 자동화하기 (0)	2023.09.23
[NodeJS+Express] 1. NodeJS, Express 세팅 (0)	2023.09.22
[NodeJS] 2. 노드의 특성 (1)	2023.09.17
[NodeJS] 1. 노드의 정의 (0)	2023.09.15

[NodeJS+Express] 2.새로운 페이지 만들기

1. 새로운 페이지 만드려면?

1) URL

2. NodeJS에서 새로운 페이지 만들기

1) 새로운 path 생성

2) html 파일 전송하기

(1) html 파일 생성

(2) js파일 수정

'🌌 | WEB DEV > NodeJS' 카테고리의 다른 글

댓글

티스토리툴바

[NodeJS+Express] 2.새로운 페이지 만들기

1. 새로운 페이지 만드려면?

1) URL

2. NodeJS에서 새로운 페이지 만들기

1) 새로운 path 생성

2) html 파일 전송하기

(1) html 파일 생성

(2) js파일 수정

'🌌 | WEB DEV > NodeJS' 카테고리의 다른 글

관련글

댓글

티스토리툴바