[nodejs] 간단한 게시판 만들기(1)

🔗 시작하기 전 깔아야하는 모듈

 

1. express    - 웹 프레임워크로써 API개발을 위해 사용합니다.

2. ejs          - html 대신 ejs를 사용하기 위해 사용합니다.

3. body-parser - post request data의 body로부터 파라미터를 추출할 때 사용합니다.

4. nodemon - 변경사항이 있을 때 서버를 자동으로 업데이트하기 위해 사용합니다.

5. mysql - 저는 mysql를 데이터베이스로 사용할 것이라 깔았습니다.

 

npm install --save express, ejs, body-parser, nodemon

설치 되었을 때 package.json에 들어온 모듈들

---

 

📋 기능별 폴더 나누기

 

1. bin - 포트 설정 후 서버를 실행하는 파일

2. dbConfig - 데이터베이스와 연결하는 파일

3. public - ejs와 연결되어 이벤트를 실행하는 css와 js파일

4. routes - 프론트와 백을 연결해주는 라우터 기능을 하는 파일들

5. views - 사용자가 보는 화면을 설정하는 ejs파일들 저장

 

 

---

 

데이터베이스나 포트연결 그리고 main.js는 로그인과 설정이 똑같기 때문에 넘어가겠습니다!

 

현재 데이터베이스 테이블

 

 

---

ejs 파일

 

 

views폴더의 home.ejs

ejs에는 html과 다른 설정이 있습니다.

 

1. <% %>는 javascript의 문법을 사용할 수 있습니다!

(주의할 점: 코드를 쓰다가 한줄이 넘어가면 다시 <% %>를 써야합니다)

 

2. <%= %> 안에 변수를 적으면 변수의 값을 대입할 수 있습니다.

(위에서 보다시피 data의 board_no 값등을 불러와서 저장하였습니다)

 

3. <% %>는 개발자모드(F12)에서 볼 수 없다.

(html로 해석됩니다)

 

💡 그래서 라우터 파일에서 render로 변수값을 전달하면 ejs파일에서 사용할 수 있습니다!!!

 

---

routes 파일

 

routes폴더의 route.ctrl.js

db와 연결한 파일을 require로 가져온 후

미리 만들어놓은 데이터베이스 값들을 select로 검색합니다.

 

여기서 data_format은 DATETIME으로 되어있어 아래 사진처럼 나오는 데이터를 년.월.일 시간.분으로 바꾸어 준 것입니다.

 

그리고 검색한 값을 render를 이용해 home.ejs로 전달합니다.

 

routes폴더의 routes.js

그리고 그 값을 받아와 기본 /에 라우터를 연결합니다.

 

홈화면

이런식으로 나오게 됩니다.(css는 작업을 다하고 만들어보겠습니다!)

---

 

다음에 이어서 진행하겠습니다!🙇‍♂️

 

 

느낀점


로그인은 값을 받아와서 비교만 하면 됐는데 게시판은 보여줘야하는 기능이 있어서 애를 많이 먹었지만

ejs의 기능을 이용해서 해결해 다행이다..
다음에는 제목을 눌러서 들어가기도 하고  조회수도 오르고 값도 집어넣을 수 있는 작업도 해봐야겠다.