2021년 목표설정

이미지
기본적으로 작년에 달성하지 못한 것들을 하려고 생각중인데..코로나가 언제까지 이어질지, 한국이나 북해도는 갈 수 있을지..자격증은 응시 가능할지..여러가지가 불확실하다. 2021년은 무엇보다 정신적인 부분과 경제적인 부분에 중점을 두고 조금 더 치열하게 지내보고 싶다. 일본나이로도 30대 마지막 해, 이제 불혹에 접어드는 나이..복잡하지만 심플하게. 육체적목표 : 트라이에슬론 스탠다드 도전하기 정신적 : 자격증2개 도전 + 자체개발 서비스 론칭 가족적 : 가정의 평화를 유지하기 경제적 : 외식과 유흥비를 줄이고 부수입을 늘려서 결과적으로 저축하기 사회적 : 목표세미나를 포함해서 민단과 개인인맥의 활성화와 교류를 촉진하기

node.js 심플한 웹에플리케이션 제작 by 생활코딩

무료인데도 유료 강의 이상의 충실한 내용과 학습컨텐츠가 넘쳐나는 그 유명한 생활코딩ㅋㅋ
덕분에 nodejs 공부를 아주 수월하게 잘 해가고 있다.

전형적인 엡에플리케이션 제작하는 강의를 따라하고 그 내용을 정리한다.
nodejs, express, body-parser, supervisor 등 기본설정은 이미 끝났다고 가정한다.

생활코딩에서는 템플릿 엔진으로 jade 를 사용했으나, 여기서는 ejs 로 진행했다.

만든 웹은 간단히 제목과 본문을 폼으로 입력받아서 POST로 전송하면 그 내용을 파일에 저장하고, 그 파일을 불러서 글 목록과 본문을 표시하는 예제이다.


[처음 화면] 

[링크를 눌렀을 경우 내용 표시] 

[New article 링크를 눌렀을 때 입력 폼] 
  • 우선, 템플릿엔진의 뷰 파일을 저장할 폴더를 views_file 이라는 이름으로, 전송된 내용을 저장할 파일이 담길 폴더를 data 라는 이름으로 생성한다.
  • 또한, 메인 파일을 프로젝트 폴더 루트에 app_file.js 라는 이름으로 생성한다.
[소스코드 - ./app_file.js]
// 익스프레스 설정
var express = require('express');
var app = express();
// POST 전송을 위한 body-parser 설정 -> bodyParser의 Install 이 먼저 선행되어야 함.
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
// 파일처리를 위한 객체생성
var fs = require('fs');
// 템플릿 엔진을 EJS 로 설정함, 뷰 파일이 저장될 폴더는 ./views_file 임.
app.set('views', './views_file');
app.set('view engine', 'ejs');
// 새로운 글 작성할 때 접근할 주소인 /new 라우팅
app.get('/topic/new', function(req, res){
// 폴더 내에 있는 파일목록을 읽어들여서 객체를 반환하는 readdir 메소드
fs.readdir('data', function(err, files){
if(err){
// 에러인 경우는 에러내역을 콘솔에 출력 후 화면에 에러메세지를 표시함.
console.log(err);
res.status(500).send('Internal Server Error');
}
// 정상적으로 처리된 경우에는 new.ejs 파일을 렌더링하고 topics 라는 이름으로 files 객체를 전달함.
res.render('new', {topics:files});
});
});
// 글 목록과 내용을 표시할 때 접근할 주소인 /topic 임. 링크를 통해서 id값을 받고, 파일명과 동일한 경우 내용을 표시함.
app.get(['/topic', '/topic/:id'], function(req, res){
fs.readdir('data', function(err, files){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
}
// 쿼리스트링으로 넘어 온 값을 id 변수에 저장한다.
var id = req.params.id;
if(id)
{
// id가 전달된 경우에는 id와 같은 파일명을 가진 파일을 읽어온다.
fs.readFile('data/'+id, 'utf8', function(err, data){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
}
// view에 파일객체, 파일명, 파일내용을 넘기고 렌더링한다.
res.render('view', {topics:files, title:id, description:data});
});
}
else
{
// id가 전달이 안 된 경우에는 기본값을 표시한다.
res.render('view', {topics:files, title:'Welcome', description:'Hello, Node.js'});
}
});
});
// 글 작성 페이지에서 Submit 버튼을 누른 경우 POST로 값을 받은 후 파일작성 & 리다이렉트 처리
app.post('/topic', function(req, res){
// view의 body 태그에서 title과 description 값을 받아와서 변수에 할당함.
var title = req.body.title;
var description = req.body.description;
// 파일객체를 이용해서 data 폴더 안에 title을 파일명으로 하고 description을 내용으로 하는 파일을 생성함.
fs.writeFile('data/' + title, description, function(err){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
}
// 저장 후 해당 파일명을 쿼리스트링으로 넘기고 리다이렉트 시켜서 내용 & 리스트를 표시
res.redirect('/topic/'+title);
});
});
// 3000번 포트를 listing
app.listen(3000, function(){
console.log('Connected, 3000 port!!!');
});
[소스코드 - ./views_file/view.js]
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2><a href="/topic">Server Side JavaScript</a></h2>
<ul>
<% for(var i=0; i<topics.length; i++) { %>
<li><a href="/topic/<%= topics[i] %>"><%= topics[i] %></a></li>
<% } %>
</ul>
<article>
<h3><% if (title) %><%= title %></h3>
<% if (description) %><%= description %>
</article>
<div>
<a href="/topic/new">New article</a>
</div>
</body>
</html>

[소스코드 - ./views_file/new.js]
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2><a href="/topic">Server Side JavaScript</a></h2>
<ul>
<% for(var i=0; i<topics.length; i++) { %>
<li><a href="/topic/<%= topics[i] %>"><%= topics[i] %></a></li>
<% } %>
</ul>
<article>
<form action="/topic" method="post">
<p>
<input type="text" name="title" placeholder="title">
</p>
<p>
<textarea name="description"></textarea>
</p>
<p>
<input type="submit"></textarea>
</p>
</form>
</article>
</body>
</html>

[참고 : 생활코딩 서버 javascript (nodejs)]  https://opentutorials.org/course/2136/11950

댓글

이 블로그의 인기 게시물

[메모] PostgreSQL에서 Insert 하는 경우 자동채번 PK가 중복에러 나는 경우

[C# & LINQ] 랜덤으로 데이터를 한 개 추출하는 방법

[react-native] uuid 생성이 에러가 날 때 대처법