* 개발환경 - 윈도우, VS Code
1. express 설치
* express: node.js에서 API 서버 구축할 때 많이 쓰이는 프레임워크, node.js를 사용해 웹 개발하는 경우 더 간편하게 개발할 수 있게 해줌
2. nodemon 설치 (소스 수정될 때마다 서버를 자동으로 재실행 => 번거로움을 덜어줌)
설치가 된 줄 알았는데 나중에 nodemon 명령어 실행해보니 실행이 안됨.
그래서 다른 명령어로 설치했다.
3. ejs 설치 (자바스크립트가 내장된 html 파일. 기존 html을 대체함.)
서버 실행 환경 파일 설치가 끝남.
4. server.js 파일 생성 후 서버 실행 코드 입력
const express = require('express'); // express 모듈 가지고오기
const app = express();
app.listen(8080, ()=>{ // 포트넘버 8080, arrow function 사용
console.log('server on');
})
5. 서버 실행 확인
server on 뜨면 서버가 잘 실행된거. 코드 디버깅하고 해야됨.
6. 주소창에 localhost:8080 치고 서버 접속.
암것도 없어서 저렇게 뜸.
7. 프로젝트에 views 폴더 만들고 index.ejs 파일 만듦.
ejs 파일은 views 폴더 안에 위치해야됨. (이름 변경x)
html 파일에서는 서버에서 보낸 데이터를 활용하기 힘들어서 ejs 라이브러리 사용.
<!DOCTYPE html>
<html>
<head>
<meta charest="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello</h1>
</body>
</html>index.ejs 파일에 위 코드 입력.
8. server.js에 아래 코드 추가.
app.set('view engine', 'ejs');ejs 라이브러리 사용을 위한 코드. const app 선언 밑에 추가.
그 다음 localhost:8080을 요청했을 때 index.ejs를 보여주는 코드 추가
app.get('/', (req, res)=>{
res.render('index.ejs');
})req: 요청, res: 응답
메인화면이므로 '/'를 GET으로 요청함.
9. localhost:8080 접속하면 이렇게 뜸.
'Node.js' 카테고리의 다른 글
| [Node.js] http 모듈로 서버 구축하기(1) - http 모듈, fs 모듈 (0) | 2024.03.04 |
|---|---|
| node.js와 mongoDB로 웹 만들기 (5) 아이디 중복체크(ajax) (0) | 2023.01.17 |
| node.js와 mongoDB로 웹 만들기 (4) mongoDB 연결 (0) | 2023.01.13 |
| node.js와 mongoDB로 웹 만들기 (3) 로그인, 회원가입 (0) | 2023.01.12 |
| node.js와 mongoDB로 웹 만들기 (1) node.js, npm 설치 (0) | 2023.01.10 |