mysql에 저장된 데이터를 받아 client에서 출력하고 싶어 검색을 해봤는데 ejs에 관한 언급이 많았다. 새로운 것을 추가하고 싶지 않아서 계속 흐린 눈을 유지하며 무시했는데.. 아무리 해봐도 되지 않아서 결국 ejs를 한 번 사용해 보기러 했다.
위 링크를 참조해 ejs를 설치하고 적용해 봤는데
위 그림과 같이 vs code가 ejs의 문법을 인식하지 못하는 것 같았다.(나는 빨간색이 너무 싫어...)
https://4sii.tistory.com/301#:~:text=%EC%9D%B8%EC%8B%9D%20%EB%B6%88%EA%B0%80%20%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0&text=settings.json%20%ED%8C%8C%EC%9D%BC%EC%9D%B4%20%EC%97%B4%EB%A6%AC%EB%8A%94%EB%8D%B0,%EB%90%9C%20%EA%B2%83%EC%9D%84%20%ED%99%95%EC%9D%B8%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4.
처음에는 이 링크를 참고해 해결을 해보려 했지만 전혀 문제가 해결되지 않았다.
정답은 vs code에 extension을 설치하는 것이었다!
extensions 탭에서 ejs를 검색해 EJS language support를 설치하니
이제서야 익숙하고 예쁜 알록달록한 색깔로 변신!
마음의 안정이 찾아왔다!
하지만 여기서 문제는 끝나지 않았다!
...ㅎ
이번엔 브라우저에서 그냥 문자열마냥 출력을 해버리는 것이다!
이거 문제 해결할라고 진짜 2시간 가까이 검색을 했다.
수정 전 코드 - 문제 있는 부분
const express = require('express'); //package 불러옴
const app = express(); // express 함수의 변환값 저장
const port = process.env.PORT || 3000; //process.env = 환경변수 호출, 환경변수가 입력되지 않을 시 port에 3000번으로 설정
const mysql = require('mysql2');
const cors = require('cors');
const bodyparser = require('body-parser');
const dbconfig = require('./config/database.js'); //db 정보 로드
const db_conn = mysql.createPool(dbconfig); //mysql과 express 연결 -> 이 변수를 통해 db접근 가능
const jsonParser = bodyparser.json(); //body-parser를 사용하기 위한 변수 할당
const nunjucks = require('nunjucks');
app.set('view engine', 'ejs'); //view engine이 사용할 template engine
app.set('views', './views');
nunjucks.configure('views', {express:app}); //nunjucks.config 첫번째 인자 : html을 담아 둘 폴더의 이름, 두번째 인자 : express 속성에 app을 연결
app.use(express.static('views')); //정적파일 제공
사실 이거 말고 다른 문제도 있었다.
나는 그냥 생각없이 image 파일과 html 파일 폴더를 static으로 설정해서 다른 분들의 코드를 보고 내 코드에 적용을 시킬 때 view관련 폴더 지정할 때 static 폴더명을 입력시켰었다.
아무 문제가 없었지만 이 문제로 2시간 가까이 헤매다보니까 혹시 폴더명 때문일까 하는 걱정에 다른 분들이랑 똑같이 폴더명을 views로 변경해 보았는데 계속 template not found 에러가 발생했다.
그래서 별의 별 방법을 시도해 봤는데 갑자기 문득
app.use(express.static('views'));
이 줄의 코드가 위의 설정을 다 초기화시킬 것 같다는 느낌이 들었다.
그래서 그 줄을 삭제를 하고 다시 돌렸더니?
유레카...
저 화면 보고 울뻔했다...
수정 후
const express = require('express'); //package 불러옴
const app = express(); // express 함수의 변환값 저장
const port = process.env.PORT || 3000; //process.env = 환경변수 호출, 환경변수가 입력되지 않을 시 port에 3000번으로 설정
const mysql = require('mysql2');
const cors = require('cors');
const bodyparser = require('body-parser');
const dbconfig = require('./config/database.js'); //db 정보 로드
const db_conn = mysql.createPool(dbconfig); //mysql과 express 연결 -> 이 변수를 통해 db접근 가능
const jsonParser = bodyparser.json(); //body-parser를 사용하기 위한 변수 할당
const nunjucks = require('nunjucks');
app.set('view engine', 'ejs'); //view engine이 사용할 template engine
app.set('views', './views');
nunjucks.configure('views', {express:app}); //nunjucks.config 첫번째 인자 : html을 담아 둘 폴더의 이름, 두번째 인자 : express 속성에 app을 연결
app.use(express.static('views')); //정적파일 제공
app.get('/', (req, res) => {
db_conn.query('SELECT * FROM LIST', (err, rows) => {
if(err) throw err;
res.render("home.ejs", {rows:rows}); //html로 변수 전달
console.log(rows[0].CONTENT);
})
});
//리스트 추가
app.post('/lists', jsonParser, (req, res) => {
console.log(req.body);
// const sql = 'INSERT INTO LIST (NUM, CONTENT, DONE) VALUES (?, ?, ?)';
// const num = req.body.num;
// const content = req.body.content;
// const done = req.body.done;
// const params = [num, content, done];
// console.log(num, content, done)
// db_conn.query(sql, params, (err, rows, fields) => {
// if(err) throw err;
// console.log(rows);
// });
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT}`);
});
결론 코드 적용시키기 전에 제발 이해 좀 하고 넣자^^
이제 데이터베이스에 저장된 리스트를 출력해보자.
일단 server.js에서 다음과 같이 데이터 베이스에서 받아온 map을 넘겨주었다.
app.get('/', (req, res) => {
db_conn.query('SELECT * FROM LIST', (err, rows) => {
if(err) throw err;
res.render("home.ejs", {rows:rows}); //rows 변수 안에 rows를 담아서 home.ejs로 전달
})
});그리고 리스트를 출력해야 할 ejs 부분에서 js문법을 사용해 다음과 같이 출력했다.
<% for(var i=0; i < rows.length; i++) { %>
<ul class="lists">
<input type="checkbox" id="done_check" onchange="done_change()">
<label for="done_check"></label>
<div class="content"><%= rows[i].CONTENT %></div>
<img class="edit" src="images/pencil.png" alt="edit button">
</ul>
<% } %>
ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
드디어ㅜㅜㅜㅜ 이거 할라고 거의 일주일을 삽질을 했는데!!!
강의를 끊어야되나 고민을 그렇게 했는데!!!
자 이제 체크박스 누르면 done 변수에 적용시키는 걸 해볼건데..
내일... 하자...ㅎ
