[5일차] Node.js, MongoDB - Part 2 : 상세페이지 만들기 (URL parameter), Bootstrap 디자인 넣기 & HTML 조립식 개발하기
coading apple - Node.js, MongoDB
📕 상세페이지 만들기 (URL parameter)
일반 쇼핑몰처럼 누군가 /detail/3 으로 접속하면 3번 게시물 데이터를 보여주고
누군가 /detail/4 로 접속하면 4번 게시물 데이터를 보여주게 만들어보자.
app.get('/detail/3', function(요청, 응답){
응답.render('detail.ejs', {3번게시물데이터} )
});
app.get('/detail/4', function(요청, 응답){
응답.render('detail.ejs', {4번게시물데이터} )
});이렇게 코드 짤 경우 상품수에 따라 몇만개 만들어야한다.
유동적으로 변화되는 코드를 위해 파라미터를 사용하자.
1. 서버 URL parameter 셋팅하기
파라미터는 쉽게 말하면 URL 뒤에 무작위의 문자를 붙일 수 있게 만들어주는 URL 작명 방식이다.
/경로/:작명 형식으로 사용하면 된다.
app.get('/detail/:id', function(요청, 응답){
응답.render('detail.ejs', {어쩌구} )
});이제 사용자가 /detail/ 뒤에 어떤 숫자나 문자를 붙이든 위의 코드3줄로 인식할 수 있다.
id로 작명한 이유는 보통 무작위의 고유한 숫자를 뜻하기 때문이다.
파라미터는 두개 세개 계속 이어붙여 사용할 수 있다.
이제 사용자가 입력한 :id값대로 DB에서 불러오면 된다.
app.get('/detail/:id', function(요청, 응답){
db.collection('post').findOne({ _id : URL에입력한id값 }, function(에러, 결과){
응답.render('detail.ejs', {어쩌구} )
})
});.findOne() 함수를 사용해서 게시물을 찾는다.
.findOne({원하는게시물정보}, function(){ 완료시 실행할 코드 }) 이렇게 사용하면 된다.
사용자가 URL에 입력한 파라미터값은 요청.params에 담긴다.
app.get('/detail/:id', function(요청, 응답){
db.collection('post').findOne({ _id : 요청.params.id }, function(에러, 결과){
응답.render('detail.ejs', {data : 결과} )
})
});요청.params.id를 해서 요청된 id값을 넣어줬다.
마지막줄에서 DB에서 찾은 결과를 data라는 이름으로 ejs파일로 보내준다.
하지만 결과로 null이 뜬다.
이유는 저번시간 했던거 복습하면 됨.
app.get('/detail/:id', function(요청, 응답){
db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){
응답.render('detail.ejs', {data : 결과} )
})
});서버로 받아올 때 id 파라미터가 문자형으로 들어왔다.
parseInt() 해줘서 정수로 변환후 검색해주면 잘 작동한다.
2. EJS 파일 셋팅하기
view 폴더 안에 사용자가 요청한 detail.ejs 파일을 만들어주자.
다른 ejs파일에 있던 내용 복붙하고 HTML 채워준다.
(detail.ejs)
<h4>상세페이지 입니다.</h4>
<h4>제목 : <%= data.제목 %></h4>
<h4>날짜 : <%= data.날짜 %></h4>그리고 이부분 추가해주면 원하는 내용 잘 출력된다!
내가 지금까지 한 것 요약하자면,
- URL란에 /detail/4 입력시
- detail.ejs 파일이 렌더링되는데 data라는 변수에 실제 DB에 있던
_id4인 게시물이 담겨옴 - data.제목 이렇게 4번 게시물의 제목과 날짜를 ejs 파일 안에서 출력해줌
이거 진행했다.
📗 Bootstrap & HTML 조립식 개발
Bootstrap
HTML 디자인을 다듬기 위한 Bootstrap 강의시간.
강의 들으면서 전체적으로 디자인 리뉴얼 해줬다.
새롭게 알게된것
- container라는 클래스는 Bootstrap에서 좌우 여백을 예쁘게 잡을 수 있게 도와주는 클래스다.
- mt-2, pt-3 ... 마진탑, 패딩탑 값 설정하는 클래스다. 바텀,왼,오 전부 가능하다.
- text-center 클래스 넣으면 가운데 정렬 해준다!
클래스 많이 외워둬야겠다..
CSS 파일 넣는 법
CSS 파일은 보통 관습적으로 public 폴더에 보관한다.
CSS, 이미지처럼 자주 바뀌지 않는 static은 전부 public에 넣으면 됨!
(public은 view폴더 옆에 동등한 위치로 만들기)
그렇게 경로설정하고 만든 CSS파일을 원하는 HTML이나 EJS파일에 가서
<head>
<link href="/public/님들이만든CSS파일.css" rel="stylesheet">
</head>해주면 된다.
하지만 그냥 넣으면 동작하지 않는다!
Node에게 public 폴더가 있다고 명시 해줘야함!
(server.js)
app.use('/public', express.static('public'))위 코드를 app.set이나 app.use 모여있는 상단쪽에 같이 넣어주면 된다.
"/public 위치에 있는 폴더를 쓰겠다"라는 뜻
이제 잘 읽힌다.
HTML 조립식 첨부하기
지금까지 만든 페이지가 4개 정도 있는데 nav태그로 이루어진 상단메뉴 UI가 반복적으로 계속 출현하고 있다.
모두 동일한 형태여야 하는데 만약 수정사항이 생길 경우 엄청나게 번거로워진다.
이런 상황을 위해서 조립식으로 개발해보자.
- nav.html 파일을 만들고
- 그 파일을 사용될 파일들에
첨부하는 형식으로 UI 개발
views 폴더 내에서 모두 작업하면 된다.
(views/nav.html)
<nav>
<a>링크</a>
어쩌구...
저쩌구...
</nav>원본이 될 nav.html 파일을 views 내에 생성하기.
(list.ejs)
<%- include('nav.html') %>이런 첨부하는 태그를, 사용될 ejs 파일마다 넣어주면 된다.
물론 ejs 문법이기 때문에 html로 파일 만들었을 경우 views 폴더 안에 ejs 파일로 전부 변환해주기.
그리고 서버에서 연결도 다시 해주기!
((예시))
(server.js)
// 기존코드
app.get('/', function(요청,응답){
응답.sendFile(__dirname + '/index.html')
});
// 수정한 코드
app.get('/', function(요청,응답){
// 응답.sendFile(__dirname + '/index.html')
응답.render('index.ejs', {})
});이렇게 바뀐 ejs 파일로 render 다시 걸어주면 된다.
