본문 바로가기
웹개발

Node.js

bluesunset 2023. 10. 11. 21:04

Node.js는 자바스크립트를 실행할 수 있게 해주는 환경이다.

자바스크립트로 서버를 만들고 실행하기 위해서 Node.js를 사용한다.

 

Node.js설치

구글에 nodejs를 검색하고 들어간 공식 사이트에서

왼쪽의 LTS를 다운받으면 된다.

설치 확인을 위해서 cmd창에 node -v, npm -v를 입력했을때

설치된 버전 정보가 뜨면 제대로 설치된 것이다.

 

이제 프로젝트를 만들기 위한 폴더로 이동하고 cmd창에서 npm init 이라는 명령어를 입력해야 한다.

package name, version, ..., author, licence까지 여러 항목들이 나오는데 패키지 이름은 그냥 web_study로 할거라 넘겼고, description이나 author도 굳이 적을 필요가 없을 거 같아서 넘겼다.

 

서버의 구조는 model, router, view로 구성되어 있는데

model은 데이터베이스, router는 주소, view는 실제 우리가 보는 화면을 나타낸다.

router는 controller라고도 불러서 MVC(model, view, controller) 패턴이라고도 한다.

 

이 구조를 프로젝트에 만들기 위해서 model, view, router 폴더를 만든다.

그리고 이 서버를 실행하기 위한 자바스크립트 파일 app.js를 만든다.

model과 router안에는 자바스크립트 파일, view안에는 html파일을 만들면

이런식으로 구성이 된다.

package.json은 아까 npm init을 통해 nodejs프로젝트라는 것을 설정하면서 만들어졌다.

 

express

express는 nodejs로 서버를 쉽게 만들기 위한 유용한 라이브러리이다.

npm install express

프로젝트 폴더에서 위 명령어를 입력해 설치할 수 있다.

 

app.js를 작성해보자.

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

app.get("/", function(req, res){
    res.send('HI')
})

app.listen(3000, function(req, res){
    console.log("서버")
})

require('express')와 express()는 다운 받은 express 라이브러리를 가져와서 사용할 수 있게 해준다.

app.get("/")는 주소를 하나 만든 것인데 이 주소로 들어가면 function이 실행된다.

req는 요청, res는 응답이고, res.send('HI')를 통해서 우리가 만든 서버가 HI라는 메세지를 보내는 응답을 하는 것이다.

app.listen은 컴퓨터에서 서버의 전원을 키는 역할이다. app.js가 실행되면 3000번 포트로 서버가 켜진다.

터미널에서 node app.js 명령어를 통해 실행을 시키면 "서버"라는 문자열이 뜨고,

localhost:3000 으로 들어가 보면 HI라는 메세지가 와 있음을 볼 수 있다.

supervisor

js 스크립트 파일에서 변경 사항이 생겨도 이미 서버가 실행중이기 때문에 반영이 안된다.

이를 해결해주는 도구가 supervisor이다.

npm install -g supervisor

이 명령어를 통해 설치할 수 있고, node app.js 대신에

supervisor app.js 를 통해 서버를 실행시키면, 변경 사항이 생길 때마다 서버를 자동으로 껐다가 켜준다.

(그냥 npm install supervisor로 설치했는데 실행이 안되서 한참 헤맸는데 -g로 전역 설치를 하면 해결된다.)

 

helmet

helmet은 보안을 강화시켜주는 도구이다.

npm install helmet

npm 명령어를 통해 설치해주고

const helmet = require("helmet")
app.use(helmet())

이 두줄로 간단하게 웹사이트의 보안을 강화시킬 수 있다.

이런 다양한 npm 툴은 nodejs의 공식 사이트에서 찾아볼 수 있다.

https://gist.github.com/anvaka/8e8fa57c7ee1350e3491

 

npm rank

npm rank. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

여기 보면 많이 사용되는 npm툴들을 확인할 수 있다.

 

router

위에서 app.get를 통해 주소를 만들고 추가하였다.

app.js 파일에 이런 식으로 주소를 계속 만들면 복잡해지기 때문에 router파일에서 따로 관리한다.

전에 만들어 두었던 router폴더의 controller.js 파일을 작성해보도록 하겠다.

const express = require('express')
const router = express.Router()

router.get("/", function(req, res){
    res.send('HI')
})

module.exports = router

이게 controller.js 파일의 코드이다.

express를 가져오고 express.Router()로 라우터까지 가져온다.

그리고 router.get를 이용해 주소를 똑같이 만들고, module.exports = router로 라우터를 설정해준다.

app.js파일에서는 기존의 app.get 코드 대신에

const mainRouter = require('./router/controller')
app.use('/', mainRouter)

이 코드를 작성한다. 라우터를 불러오기 위해 require로 controller.js 파일의 주소를 찾고,

app.use로 라우터를 /주소에 할당한다. 만약

app.use('/ddd', mainRouter) 이런식으로 작성한다면

localhost:3000이 아니라 localhost:3000/ddd 에 들어가야 우리가 만든 것을 볼 수 있게 된다.

 

views

이번에는 view 화면을 띄우는 방법에 대해서 알아보자.

app.js 파일에서

app.set('view engine', 'ejs')
app.set('views', './views')
app.use('/public', express.static(__dirname+'/public'))

이런 코드를 추가할 것이다.

먼저 첫번째 줄에서 ejs는 embedded javascript를 뜻하며, 자바스크립트가 포함된 html파일 양식이다.

view engine을 ejs 파일로 설정했기 때문에 views폴더에

만들어 두었던 index.html파일을 index.ejs파일로 확장자를 바꿔야 한다.

두번째 줄에서 views를 ./views로 설정하는 것은 이따 살펴볼 router에서 render링을 할 때 views폴더를 기본 폴더로 

설정한다는 뜻이다.

세번째 줄은 이미지 파일이나 css파일을 가져올 때는 public이라는 폴더에서 가져오라는 의미이다.

public 폴더를 아직 만든 적이 없기 때문에 만들고, 폴더 안에 main.css라는 파일을 만들자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>메인 페이지</h1>
</body>
</html>

index.ejs파일은 간단하게 이렇게 작성하였다. html코드를 똑같이 쓴 것이다.

 

그럼 이제 router의 controller파일을 보면, 

router.get("/", function(req, res){
    res.render('index')
})

이런식으로 res.render함수를 이용해 index.ejs파일을 응답으로 보낸다.

여기서 그냥 index만 써도 되는 이유가 아까 app.js에서 추가한 코드의 두번째 줄에서

views를 '/views'로 설정했기 때문에 자동으로 /views/index파일을 불러오는 것이다.

이렇게 해놓고 결과를 보면

잘 나온다.

 

 

ejs가 할 수 있는 기능에는 render로 파일을 불러올 때 데이터를 함께 보내는 기능이 있다.

하는 방법은 간단한데 우선 router파일인 controller.js파일에서 render를 할 때

router.get("/", function(req, res){
    res.render('index', {title:"빡공팟 수료 기원 1주차"})
})

이런식으로 파일명 뒤에 객체를 하나 보낸다.

이렇게 보낸 객체를 사용하는 방법은 index.ejs파일에서

<body>
    <h1><%= locals.title %></h1>
</body>

이런식으로 <%=    %>  안에 locals 즉, local에서 보낸 데이터의 title이라는 키에 담긴 값을 불러오면 된다.

실행해보면 이런식으로 잘 나온다.

 

그리고 마지막으로, 아까 만들어 두었던 main.css 파일 안에

h1{
    color: blue;
}

간단하게 이런 코드를 추가하고,

index.ejs파일에서 <head> 태그 안에 

<link href="/public/main.css" rel="stylesheet" />

이렇게 main.css를 불러올 수 있는 link태그를 넣어주면 된다.

이게 가능한 이유가 아까 app.js에서 추가한 코드의 세번째 줄에서 public폴더를

css파일이나 이미지 파일을 불러오는 경로로 설정해 두었기 때문이다.

이렇게 css파일이 잘 적용된 것을 확인할 수 있다.

'웹개발' 카테고리의 다른 글

점프 투 파이썬 2장 - 자료형  (0) 2023.10.17
MySQL-Sequelize  (0) 2023.10.15
JavaScript  (0) 2023.10.11
Css  (0) 2023.10.11
Html  (0) 2023.10.11

'웹개발' Related Articles

티스토리툴바