본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"프레임워크는 현실의 복잡함으로 부터 우리를 구원해 줄
우리의 구원자가 될 것입니다."
(생활코딩 : Web3 - express 수업소개. 중)
#0.
var express = require('express')
var app = express()
var fs = require('fs');
var template = require('./lib/template.js');
//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);
response.send(html);
});
});
app.get('/page', function(req, res) {
return res.send('/page');
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
});생활코딩의 강의에서는 이해에 도움을 위해서 축약된 형태의 문법을 지양하고 있지만,
지금은 express에 익숙해지는 과정이므로 다시 express의 문법에 맞도록 코드를 변경해보자.
const express = require('express')
const app = express()
const port = 3000
var fs = require('fs');
var template = require('./lib/template.js');
app.get('/', (request, response) =>
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);
response.send(html);
}
))
app.get('/page', (req, res) =>
res.send('/page')
);
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})만약 "ReferenceError: fs is not defined" 와 같은 에러가 나온다면 fs 모듈을 설치해주자.
npm install fs --save여기서 DB를 사용하지 않고 이전 방식인 fs를 사용하는 방식으로 홈페이지를 구현하는 것을 확인할 수 있는데..
/lib/template.js는 아래와 같이 HTML 템플릿 구조가 정의되어 있다.
module.exports = {
HTML:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
},list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}
그다지 익숙하지 않은 방식일 수 있다.
FS에 대한 이해가 필요하다면 이 페이지를 확인하고,
File system | Node.js v15.0.1 Documentation
nodejs.org
만약 mySQL등의 DB와 연동되는 방법이 궁금하다면 생활코딩의 다른 코스를 수강하도록 하자.
Node.js - MySQL - 생활코딩
수업소개 이 수업은 Node.js와 MySQL을 이용해서 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억 개의 페이지로 이루어진 웹사이트에서 필요한 정보가 파일에 하나하나
opentutorials.org
나는 학습목적이 MEAM / MERN 스텍에 대한 기초를 다지는 것이 목적이기에...
코드에 대한 이해에 어려움이 없다면 지나가도 무방할 듯 하다.
'오픈튜토리얼스 > 생활코딩 : Web3 - Express' 카테고리의 다른 글
| [생활코딩|Express #10] 정적인 파일의 서비스 (0) | 2020.10.30 |
|---|---|
| [생활코딩|Express #7~9] Express 미들웨어의 사용 / 미들웨어 만들기 / 미들웨어의 실행순서 (0) | 2020.10.30 |
| [생활코딩|Express #3~6] 상세보기 페이지 / 페이지 생성 / 페이지 수정 / 삭제 기능 구현 (0) | 2020.10.28 |
| [생활코딩|Express #1] Hello, World! (0) | 2020.10.28 |
| [생활코딩|Express #0] 실습환경준비 (0) | 2020.10.28 |
최근댓글