-
[이력서 꾸미기] EJS(Embedded JavaScript Templating)개발/프로젝트2(유데미) 2023. 3. 13. 21:13
일단 오늘 배운 풀코드
const express = require('express'); const app = express(); const path = require('path'); const redditData = require('./data.json'); app.use(express.static(path.join(__dirname, 'public'))) app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, '/views')); app.get('/', (req, res) => { res.render('home'); }) app.get('/cats', (req, res) => { const cats = [ 'Blue', 'Rocket', 'Monty', 'Stephanie', 'Winston' ] res.render('cats', { cats }) }) app.get('/r/:subreddit', (req, res) => { const { subreddit } = req.params; const data = redditData[subreddit]; if (data) { res.render('subreddit', { ...data }); } else { res.render('notfound', { subreddit }); } }) app.get('/rand', (req, res) => { const num = Math.floor(Math.random() * 10) + 1; res.render('random', { num }); }) app.listen(3000, () => { console.log("LISTENING ON PORT 3000"); });const express = require('express'); const app = express();이부분은 그냥 처음 시작할때 같이 작성해야한다
노드에서 프레임워크 Express를 가져오고 express는 대부분 app으로 만든다고 한다
깃배쉬에서 npm i express 설치하고 index.js 만들고 이부분이랑
맨 마지막에 써있는
app.listen(3000, () => { console.log("LISTENING ON PORT 3000"); });이 부분 먼저 작성한다
깃배쉬에서 서버 실행하고 localhost:3000으로 들어가면 화면을 볼수있게 설정하는 것이다
그리고 시작되면 아무것도 안써있으니까 실행중인걸 콘솔에서 알 수 있게 메세지를 출력한다고 한다
그리고 노드몬도 설치했다
노드몬을 설치하지 않으면 파일을 수정할때마다 서버를 계속 껐다 켰다 해야돼서 귀찮은데
노드몬을 설치하면 그냥 한번 실행하면 알아서 새로고침할때마다 자동으로 껐켰해줘서
신경 안쓰고 하면 된다
근데 노드몬을 종료했다가 다시 켜야할때 자꾸 에러가 발생했다
나만 그런게 아니고 노드몬 문제인건지 윈도우 문제인건지 아무튼 내가 문제는 아닌거 같긴 한데
나중에 더 찾아봐야겠음
const path = require('path');이 부분은 노드 자체에 있는 경로를 가져온다고 한다
const redditData = require('./data.json');이 부분은 data.json 파일에 있는 데이터를 가져오는 것인데
json 파일에는 그냥 soccer, chickens, mightyharvest 이름, 회원수 같은 데이터가 들어있다
app.use(express.static(path.join(__dirname, 'public')))__dirname은 절대경로를 설정한다고 한다
이걸 설정안하고 한단계 위에서 index.js에 접근했을때 에러가 났다
이 부분을 작성하고 나면 한단계 디렉토리 위에서도 절대경로여서 에러가 나지 않는다
app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, '/views'));뷰 엔진을 ejs로 설정하고 디렉토리를 views폴더로 설정한다
여기도 마찬가지로 절대경로로 설정한다
app.get('/', (req, res) => { res.render('home'); })루트 url경로를 설정하는 부분이다
app.get('/cats', (req, res) => { const cats = [ 'Blue', 'Rocket', 'Monty', 'Stephanie', 'Winston' ] res.render('cats', { cats }) })/cats 경로에 대한 라우트를 설정하고 /cats를 렌더링한다
cats 이름을 적어놓은 배열을 하나하나 cats로 전달했다
cats.ejs 파일에서 for문을 사용하여 작성해서 하나하나 cats로 불러왔는데
for문을 사용할때 ejs(embedded javascript templating)를 사용하여
<%= %>로 한줄 한줄 감싸서 자바스크립트를 사용할 수 있었다
app.get('/r/:subreddit', (req, res) => { const { subreddit } = req.params; const data = redditData[subreddit]; if (data) { res.render('subreddit', { ...data }); } else { res.render('notfound', { subreddit }); } })/r/:subreddit 경로에 대한 라우트를 설정하고 subreddit을 사용하여 아까 불러왔던 redditData에서 데이터를 검색한다
이때 경로를 subreddit 데이터에 존재하는 이름으로 검색하면 해당 데이터를 렌더링하고
없는경우는 notfound.ejs 파일을 따로 만들어서 렌더링한다
app.get('/rand', (req, res) => { const num = Math.floor(Math.random() * 10) + 1; res.render('random', { num }); })이부분도 사실 테스트용으로 그냥 만든 페이지같긴 한데
/rand 에 대한 라우트를 설정하고
1에서 10 사이의 난수를 생성해서 random으로 전달한다
그렇게 만든 subreddit.ejs
<%- include('partials/head') %> <body> <%- include('partials/navbar') %> <div class="container"> <h1>Browsing The <%= name %> subreddit</h1> <h2> <%= description %> </h2> <p> <%= subscribers %> Total Subscribers </p> <hr> <% for(let post of posts){ %> <article> <p> <%= post.title %> - <b> <%= post.author %> </b> </p> <% if(post.img){ %> <img src="<%= post.img %>" alt=""> <% } %> </article> <% } %> </div> </body> </html>nav 부분을 따로 지정하지 않게 하기위해 head 부분을 따로 만들어서
head.ejs 파일로 저장하고 footer부분도 따로 저장해도 된다고 한다
부트스트랩을 이용하여 조금 보기좋게 만들었다
'개발 > 프로젝트2(유데미)' 카테고리의 다른 글
[이력서 꾸미기] Geocode 오류때문에 얼마나 시간을 허비했는지 (0) 2023.05.02 [이력서 꾸미기] Mongoose 에러 해결하기 (0) 2023.03.15 [이력서 꾸미기] 터미널 명령어가 왜 다른거죠 (0) 2023.03.03 [이력서 꾸미기] 실제 데이터를 불러오는것은 재밌다 (0) 2023.02.28 [이력서 꾸미기] 드디어 AJAX (0) 2023.02.27