1. Semantic UI 라이브러리 사용해보기
설치
npm install semantic-ui --save설치되면 node_modules > semantic-ui > ui 폴더안에 아래와 같이 자바스크립트와 CSS가 있습니다.
min이 붙은것은 텍스트가 압축하여 크기가 작은거로써 배포시 유용하지만 개발중에는 참고하기 힘듬으로 min이 없는것을 2개(semantic.ja, semantic.css)을 복사해서 사용하면됩니다.
<HEAD>와 </HEAD> 사이에 추가하면됩니다.
Jquery는 아래사이트를 보고 원하는 버전을 추가하면된다.
umcompression : 기본 코드
minified : 공백 등을 제거하여 용량을 간소화 시킨 코드
slim : ajax를 제거한 기본 코드
slim minified : slim파일을 간소화 시킨 코드
아래는 jquery-3.3.1.js 의 umcompression 코드이다.
- package.json
{
"name": "DefaultExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"ejs": "^2.6.1",
"errorhandler": "^1.5.0",
"express": "^4.16.4",
"express-error-handler": "^1.1.0",
"express-session": "^1.15.6",
"mongoose": "^4.13.18",
"package.json": "^2.0.1",
"pug": "^2.0.3",
"serve-static": "^1.13.2"
}
}
에러 :
해결 : 옵션추가
mongoose.connect(config.db_url, {
useMongoClient: true
});
- 반응형 웹
1) 미디어 쿼리(Media Query)
@media screen and (min-width: 320px) and (max-width: 768px) {
#cardbox {
width:90%;
}
label[id=contentsText] {
display:none;
}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
#cardbox {
width:80%;
}
}
2. MVC 패턴
- 엔진 모듈
{
"name": "ViewExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"ejs": "^2.6.1",
"errorhandler": "^1.5.0",
"express": "^4.16.4",
"express-error-handler": "^1.1.0",
"express-session": "^1.15.6",
"mongoose": "^4.13.18",
"serve-static": "^1.13.2"
}
}
- 뷰엔진 설정
// 익스프레스 객체 생성
var app = express();
//===== 뷰 엔진 설정 =====//
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');- 라우팅 환경설정
module.exports = {
server_port: 7001,
db_url: 'mongodb://localhost:27017/local',
db_schemas: [
{file:'./user_schema', collection:'users3', schemaName:'UserSchema', modelName:'UserModel'}
],
route_info: [
//===== User =====//
{file:'./user', path:'/process/login', method:'login', type:'post'}// user.login
,{file:'./user', path:'/process/adduser', method:'adduser', type:'post'} // user.adduser
,{file:'./user', path:'/process/listuser', method:'listuser', type:'post'} // user.listuser
]
}- 익스프레스 서버 객체인 app에는 render() 메소드가 들어 있고 이 메소드를 호출하면 뷰 엔진이 템플릿 파일을 읽어 들인후 파라미터로 전달한 contexet 객체의 속성으로 들어 있는 값들을 적용하고 그 결과를 콜백 함수로 돌려준다.
1) 응답페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 성공 페이지
</head>
<body>
<h1>로그인 성공</h1>
<div><p>사용자 아이디 : <%= userid %> </p></div>
<div><p>사용자 이름 : <%= username %> </p></div>
<br><br><a href='/public/login.html'>다시 로그인하기</a>
</body>
</html>
2) 응답페이지 호출
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
// 뷰 템플레이트를 이용하여 렌더링한 후 전송
var context = {userid:paramId, username:username};
req.app.render('login_success', context, function(err, html) {
if (err) {
console.error('뷰 렌더링 중 에러 발생 : ' + err.stack);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>뷰 렌더링 중 에러 발생</h2>');
res.write('<p>' + err.stack + '</p>');
res.end();
return;
}
console.log('rendered : ' + html);
res.end(html);
});
- 응답페이지 모듈화
1) adduser.ejs
<!DOCTYPE html>
<html>
<% include ./head.ejs %>
<body>
<h2><%=title %></h2>
<% include ./footer.ejs %>
</body>
</html>
2) head.ejs
<br><br><a href='/public/login.html'>로그인으로 - ejs에서 include됨</a>
3) footer.ejs
<head>
<meta charset="UTF-8">
<title>헤드 부분 - ejs에서 include됨</title>
</head>
반응형
'WEB > Node JS' 카테고리의 다른 글
| Nodejs기초 - 13일차 정리(패스포트 모듈 사용) (0) | 2019.01.27 |
|---|---|
| Nodejs기초 - 12일차 정리(pug템플릿 사용 및 상속, 패스포트 정의) (0) | 2019.01.26 |
| Nodejs기초 - 10일차 정리(Require 이해, 모듈화분리 패턴) (0) | 2019.01.24 |
| 9일차 정리 (0) | 2019.01.14 |
| 8일차 정리 (0) | 2019.01.12 |
