[UniUnity 개발일지] 1. node.js로 서버 구축 시작하기

서버구축실습 수업 기록

추가 강의 자료 [Node.js] 백엔드 맛보기 강의

https://www.youtube.com/playlist?list=PLSK4WsJ8JS4cQ-niGNum4bkK_THHOizTs

[Node.js] 백엔드 맛보기

 

해당 관련게시글은 학교 팀플 수업을 진행하면서 기록하는 것으로... 불규칙적으로 필요한 부분을 올려보고자 함요

 

---

 

해당 서버는 node.js, express를 사용함

우선 node.js를 설치해줘야 하는데, 본인의 os에 따라 설치해주면 된다.(+32/64bit)

npm init

node를 설치하게 되면 npm도 설치가 되어있을 것인데, npm init으로 우선 초기화를 시켜줘야 한다.

해당 명령어를 입력하면 다음과 같은 질문들이 나오는데,

따로 설정할 질문이 없다면 그냥 엔터로 스킵

그러면 이런 package.json이라는 파일 생성

이 후에는 express를 사용하기 때문에 다음 명령어로 express도 설치

npm install express --save

뷰(View)

​

http://localhost:3000/reatiler에 접속하면 retailer에 해당하는 웹 페이지 화면이 나올 수 있도록 라우터를 설정해야한다.

const express = require("express");
const app = express();

// 앱 셋팅
app.set("views","./views");
app.set("view engine","html");
app.get('/', function(req,res){
  res.render("index.ejs");
})
app.get('/retailer', function(req,res){
  res.render("retailer.ejs");
})
app.listen(3000,()=>{
    console.log(`Server start.`);
})

 

서버에 아래와 같이 라우터를 설정해주면, '/'경로로 접속 시 'views'폴터에 있는 index.ejs가 실행된다.

참고한 영상에서는 그냥 'index'로 작성해줘도 잘 연결이 되었고, 예전에 나도 'index'만 썼던 것 같은데... 이상하게 .ejs를 안붙이면 실행이 안됨...

그리고 이렇게 하면 css가 연결이 안되는데, node에서는 접속을 도와주는 미들웨어를 추가해줘야함(나는 위에 app.js)에 추가

app.use(express.static(`${__dirname}/public`));

'__dirname'은 app.js가 있는 위치 반환(나같은 경우에는 app/app.js로 있으므로 app의 위치를 반환함.)하는데,

이 위치 안에있는 /public폴더를 정적 경로로 추가해주겠다는 의미이다.

이때, .ejs 파일에도 css(+js)의 경로를 추가해줘야 하는데, 이때 아래와 같은 상대경로로 표현.

<link rel="stylesheet" href="../public/css/retailerPage.css"> //(X)
<link rel="stylesheet" href="/css/retailerPage.css"> //(O)

 

이미 서버에서 '/public'이라는 정적 경로를 사용한다고 선언했으므로 '../public"으로 시작하는 절대 경로로 시작하지 않아도 된다.

디자인.. 이라기도 뭐하지만 우선 적용 완.

강의를 살펴보면 서버를 어느정도 만들고 -> css적용 하는데, 나 같은 경우는 화면을 어느 정도 구현 한 후에 확인하면서 서버에 적용된 정보들을 확인하기 때문에 편의를 위해서 뷰를 먼저 적용해주었다.(보통 이렇지 않나?)

​

우선 서버 연결은 완...!

그리 복잡한 파트는 아니지만 노트북에 에러가 많이 발생해서 좀 힘들었음....

다음에는 해당 페이지에 지도 API를 추가해봐야함!

 

---

​

++

nodemon설치

 

변경사항이 발생할 때마다 서버를 끄고 다시 키는걸 수동으로 하는게 좀 귀찮기 때문에 nodemon을 사용해서 생산성을 높여줄거임

sudo npm install nodemon -g

위 명령어를 사용해서 설치해 주는데, Mac이나 Linux를 사용하는 경우에는 위에 처럼 sudo 명령어를 사용해줄 필요가 있고, Window는 아마 필요 없는걸로 안다. 나는 Mac을 써서 개발중이나 sudo 사용!

그러면 그림 처럼 nodemon (실행파일)을 입력해서 실행

그리고 package.json파일에 가서 'script'의 'start'의 명령어를 "nodemon (실행서버파일이름)"으로 변경(or 추가)해주면, 'npm start'명령어 사용시 자동으로 서버 파일 실행됨.