"이전게시판/nodejs"에 해당되는 글 - 6건
Post
생활코딩 주소 : https://opentutorials.org/course/2136/11915
템플릿 엔진 Jade를 소개
정적 + 동적의 장점을 합쳐서 만든 템플릿 엔진
템플릿 엔진 중 Jade 공부
참고 코드 : http://expressjs.com/ko/guide/using-template-engines.html
1. jade 모듈 설치
npm install jade --save
2. 설치 후 코드에 jade 엔진을 사용하겠다는 소스코드를 추가
app.set('view engine', 'jade');
3. 템플릿이 있는 디렉터리를 알려준다.
그리고 views 라고 하는 디렉터리를 생성.(관습적으로 views라는 이름을 사용)
app.set('views', './views');
4. 템플릿에 대한 라우터 만들기
(템플릿엔진은 send가 아닌 웹페이지를 만들어내는 것이라 render()사용)
그리고 temp.jade라는 파일을 views 안에 만든다.
app.get('/template', function(req, res){
res.rennder('temp');
});
* node app.js가 번거롭다면 supervisor app.js 라고 친다.
supervisor는 app.js 를 등록하면 app.js 가 수정될 때마다 알아서 재시작을 해준다.
5. temp 안에 head라고 적으면
소스코드 보기에서 <head></head> 라고 찍힌 것을 확인할 수 있다.
그런데 만약
html
head
body
html
head
body
코드를 보기 좋게 하려면
app.locals.pretty = true;
-(마이너스는 화면에 출력되는 녀석이 아니라는 뜻
한줄 띄면 다음 문장의 태그 생성을 의미하므로
안에 내용을 넣고 싶다면 태그 다음에 한줄 띄지말고
적을 것
html
head
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
만약 시간을 출력하고 싶다면?
html
head
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
div= time
time이란 변수를 외부에서 줘야 한다.
외부에서 주는 것은 우리가 이 페이지를 호출하는 코드에서 인자를 추가해주면 된다.
app.get('/template', function(req, res){
res.render('temp', {time:Date()});
});
helloWorld.js
var express = require('express');
var app = express();
app.set('view engine', 'jade');
app.use(express.static('public'));
app.locals.pretty = true;
app.get('/template', function(req, res){
res.render('temp', {time:Date()});
});
app.get('/', function(req, res){
res.send('Hello World!');
});
app.get('/login', function(req, res){
res.send('Login Please');
});
app.get('/dynamic', function(req, res){
var lis = '';
for(var i = 0; i < 5; ++i)
{
lis = lis + '<li>coding</li>';
}
var time = Date();
var output = `
<!DOCTYPE html>
<html>
<head>
<meta acharset="utf-8">
<title></title>
</head>
<body>
Hello zzㅋㅋㅋdseer2312312fsdd
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
//var output = '';
res.send(output);
});
app.listen(3000, function(){
console.log('Example app listening on port 3000!');
});
temp.jade
html
head
title 타이틀입니다
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
div= time
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
|---|---|
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |
Post
Nodejs Express-웹페이지를 표현하는 방법
생활코딩 주소 : https://opentutorials.org/course/2136/11858
웹페이지에 데이터를 보여주는 방식을 공부하는 시간이었다.
정적 데이터로 표현해도 되지만
자바스크립트?? 를 이용해서 좀 더 편리하게 보여줄 수 있다는걸 깨달았다.
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello World!');
});
app.get('/login', function(req, res){
res.send('Login Please');
});
/*
app.get('/dynamic', function(req, res){
var lis = '';
for(var i=0; i<5; i++){
lis = lis + '<li>coding</li>';
}
var time = Date();
var output = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello, Dynamic!
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
res.send(output);
});*/
app.get('/dynamic', function(req, res){
var lis = '';
for(var i = 0; i < 5; ++i)
{
lis = lis + '<li>coding</li>';
}
var time = Date();
var output = `
<!DOCTYPE html>
<html>
<head>
<meta acharset="utf-8">
<title></title>
</head>
<body>
Hello zzㅋㅋㅋdseer2312312fsdd
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
//var output = '';
res.send(output);
});
app.listen(3000, function(){
console.log('Example app listening on port 3000!');
});
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 템플릿 엔진(Jade) (0) | 2017.07.08 |
|---|---|
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |
Post
생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기
https://opentutorials.org/course/2136/11885
https://opentutorials.org/course/2136/11886
홈페이지 ( http://expressjs.com/ko/starter/generator.html ) 를 참고하여 Nodejs Express를 설치한다.
express 설치
새로운 디렉터리 생성하고 폴더를 npm 폴더로 만들기 위해서 npm init을 해준다.
그러면 package.json 파일이 생성된다.
그후 npm install --save express 라고 하면 npm이 express 패키지를 다운받는다.
만약 성공적으로 깔렸다면 node_modules 폴더가 생성되어있다.
mkdir temp
cd temp
npm init
npm install --save express
(apckage.json이 이미 있다면 npm init을 해줄 필요는 없다)
Express, 간단한 웹앱 만들기
http://expressjs.com/ko/starter/hello-world.html
이 페이지의 HelloWorld 예제를 따라할 것이다.
***
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('Hello World!');
});
app.get('/login', function(req, res){
res.send('Login Please');
});
app.listen(3000, function(){
console.log('Example app listening on port 3000!');
});
***
을 적어서 저장하고 node app.js 명령어로 실행 후
인터넷에 localhost:3000 이라고 치면 Hello World가 뜨는걸 알 수 있다.
사용자는 보통 url을 쳐서 get 방식으로 접속하는 것.
그래서 get 방식으로 ('/') 홈에 들어온 사용자에게 메세지를 줄 수 있다.
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 템플릿 엔진(Jade) (0) | 2017.07.08 |
|---|---|
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |
Post
생활코딩
카테고리 : Server - JavaScript(NodeJS) - 콜백(callback)함수
node sample.js 라고 치면 sample.js를 실행시킬 수 있다.
하지만 그냥 node라고 치면 자신이 직접 커맨드 창에 입력 할 수 있게 된다.
콘솔창
console.log(1+1)
결과값
2
undefined
콘솔창
a = [3, 1, 2];
결과값
[3, 1, 2];
콘솔창
console.log(a);
결과값
[3, 1, 2]
콘솔창
a.sort();
결과값
[1, 2, 3]
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 템플릿 엔진(Jade) (0) | 2017.07.08 |
|---|---|
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |
Post
저번에 것 이어서 같은 모듈과 NPM단원이다.
NPM을 이용해 다른 사람이 만든 프로그램을 자신의 프로그램의 부품으로 사용
EX. underscore
npm을 현재 디렉토리를 지정하는 명령어를 사용
더 찾아보니 package.json을 만들어 준다고 한다.
package.json은 대충 프로젝트 내의 사용할 파일을 모아둔 것?? 인 것 같다
( 검색해 봤는데 다들 넘 당연하게 package.json 을 쓰고있다.. )
npm init
name이 뜬다. 이프로젝트의 이름을 지정하는 것
server_side_javascript라고 지정한다.
version은 server side javascript tutorials
그 외는 다 Enter 한다. 그러면 package.json이란 파일이 생겼다.
내용은 아래와 같다.( npm 등록한 걸 사용할 수 있는 초석 완료 )
{
"name": "server_side_javascript",
"version": "1.0.0",
"description": "",
"main": "FirstExServer.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
npm install underscore
please include the following file with any support request npm-debug.log
이런 에러가 떴는데, 오타를 score인데 socre이라고 오타나서 그런듯
아니면 관리자 권한으로 프롬프트 실행시키고
https://superuser.com/questions/42537/is-there-any-sudo-command-for-windows
를 참고해서 runas /noprofile /user:Administrator npm install underscore 라고 치니까 되었다.
에러의 원인은 둘 중에 아마 오타때문에 난 듯 싶다..(명령어 보니까 전부 socre 이라고 치고 있었다;;;)
아무튼 위 명령어를 치면 package.js 가 생기고 node_modules 폴더가 있다.
버전이 underscore@1.8.3 extraneous 라고 뜬다는데 난 안떴음.
이 extraneous는 불완전하게 설치되었다는 뜻임.
안전하게 설치하려면
npm install underscore --save
달라진 부분은 dependencies 라는 부분이 코드에 추가가 됨.
이 패키지는 1.3.8 버전에 의존하고 있다는 걸 표시하는 것.
이제 underscore를 사용해보자
underscore는 기존 array의 함수가 빈약하여 도와주는 역활을 한다.
기존 array의 첫번째 값을 가져오려면 다음과 같다.
var _ = require('underscore');
var arr = [3, 6, 9, 1, 12];
console.log(arr[0]);
이것을
var _ = require('underscore');
var arr = [3, 6, 9, 1, 12];
console.log(_.first(arr));
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 템플릿 엔진(Jade) (0) | 2017.07.08 |
|---|---|
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |
Post
생활코딩에 nodejs 강좌가 있어서
부랴부랴 듣는중..
아래는 정리한것이다.
다하고 리니지m 해야지 ㅋㅋ
모듈과 NPM
https://opentutorials.org/course/2136/11854
1.모듈이란? 모델. 부품. nodejs의 역활. 서버를 만드는 역활
미리 사람들이 만든 웹서버를 배우는 것이 이번장 목표.
nodejs는 http 라는 부품을 가지고 있고, 그 사용설명서를 찾는 법 설명
const http = require('http'); // http라는 모듈을 요청
2.메뉴얼에 나온 함수 사용해보기
우리가 사용하는 컴퓨터의 os를 알아보자
var o = require('os');
console.log(o.platform());
module.js 라고 저장 후 해당 경로로 가서
node moudle.js 라고 치면 자신의 os가 나온다.
나는 윈도우 win32
3. 다른 사람이 만든 모듈을 사용하는 방법? NPM
Node Package Manager
NodeJS가 제공하는 모듈 : HTTP, OS
JavaScript가 제공하는 모듈 : Date, String, Array
타인의 모듈을 사용하는 방법? NPM (Node계의 앱스토어)
www.npmjs.com
npm install uglify-js -g
-g 가 붙으면 전역, 붙지 않으면 사용 프로젝트에만 사용함.
아래 내용이 나옴
`-- uglify-js@3.0.19
+-- commander@2.9.0
| `-- graceful-readlink@1.0.1
`-- source-map@0.5.6
pretty.js 파일 작성
function hello(name){
console.log('Hi,'+name);
}
hello('hihi');
저장 후 uglityjs pretty.js 실행 하면 줄바꿈이 사라진 코드가 보임
uglityjs pretty.js -m 이라고 하면 name이 o로 바뀜. 이름을 바꿔도 상관없는 변수의 이름을 바꿔줌
uglityjs pretty.js -o uglified.js -m 으로 uglified.js -m 파일로 저장할 수도 있고
uglityjs pretty.js -o uglified.js -m 으로 pretty.min.js -m 파일로 작아졌다는 의미를 부여해서 저장할 수 있다.
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 템플릿 엔진(Jade) (0) | 2017.07.08 |
|---|---|
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |