9시 24분
callback, 패키지 매니저와 PM2, 글 생성, POST 방식으로 전송된 데이터 받기, 파일 생성과 리다이렉션 본문
callback, 패키지 매니저와 PM2, 글 생성, POST 방식으로 전송된 데이터 받기, 파일 생성과 리다이렉션
leeeee.yeon 2021. 5. 12. 21:35callback
fs.readFile('syntax/sample.txt', 'utf8', function(err,result){
console.log(result);
});파일을 읽고 그 작업이 끝난 후 저 함수를 호출함 > 작업이 끝나고 처리할 일을 function 안에 쓴다.
// callback.js
function a(){
console.log('A');
}
var a = function(){
console.log('A');
} // 함수가 값이다.
a();
function slowfunc(callback){
callback();
}
slowfunc(a);Javascript에서는 함수를 값으로 저장할 수 있다.
slowfunc 함수에서 인자를 callback으로 받고 위와 같이 코드를 작성하면 callback 함수가 호출될 때 함수 a가 실행된다.
패키지 매니저와 PM2
패키지 매니저: 패키지를 생성, 수정, 삭제하는 프로그램
패키지 매니저 중 NPM에 대해 알아볼 것이다. ( node.js 설치할 때 같이 설치됨 )
PM2: 프로세스 관리 도구, 프로그램을 감시, 파일 수정되면 프로그램 다시 껐다 켜주는 등 프로세스 관리를 쉽게 해준다.
원래는 코드를 수정하고 확인하고 싶을 때, main.js를 끄고 다시 켜야 하는데, 이제는 새로고침만 해도 수정된 내용 확인 가능
HTML form
form : 사용자가 서버 쪽으로 데이터를 전송하기 위한 방식
form.html을 만들어 실습해보자.
<body>
<form action="http://localhost:3000/process_create" method="POST">
<p><input type="text" name="title"></p> // 제목 역할
<p>
<textarea name="description"></textarea> // 본문 역할, 여러 줄 작성 가능
</p>
<p>
<input type="submit"> // 제출 버튼
</p>
</form>
</body>
form 태그를 통해 글을 작성하고 제출 버튼을 누르면 아래와 같이 action의 URL로 이동
URL 뒤에 작성한 데이터가 뜬다.
그러나 주소에 데이터가 포함되어 있다면, 서버의 정보가 생성/수정/삭제될 수 있으므로 URL로 데이터를 보내는건 위험하다.
그래서 method에서 POST 방식을 이용하여 데이터를 안 보이는 방법으로 전송한다. ( URL에 표시하는 건 get method 또는 method 생략 )
글 생성
templateHTML() 함수를 다음과 같이 수정해주고,
function templateHTML(title, list, body){
return `
<!doctype html>
<html>
<head>
<title>WEB - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
<a href="/create">create</a>
${body}
</body>
</html>
`;
}
- ${list} 아래 글 생성 페이지로 가는 하이퍼링크 추가
if(pathname === '/') 뒤의 else if 문을 다음과 같이 추가해준다.
else if(pathname === '/create'){
fs.readdir('./data',function(error, fileList){
var title = 'WEB - Create';
var list = templateList(fileList);
var template = templateHTML(title, list,`
<form action="http://localhost:3000/process_create" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="description" placeholder="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`);
response.writeHead(200); // 성공적으로 접속했다
response.end(template);
});
}(결과는 위 사진 참고)
다중 if문이기 때문에 어떤 if문 뒤에 else if를 써야하는지 주의하자!
submit 버튼을 누르면 앞에서 했던거처럼 process_create 페이지로 가고 개발자 도구의 Network를 확인해보면,
데이터가 잘 전송된 것을 확인할 수 있다.
POST 방식으로 전송된 데이터 받기
querystring 모듈을 받아오자
var qs = require('querystring');
else if문을 하나 더 추가하자
else if(pathname === '/create_process'){
var body = '';
request.on('data', function(data){
// 데이터가 많을 경우 조각조각의 데이터를 인자로 콜백 함수를 호출 > 수신한 정보를 줌
body += data;
});
request.on('end', function(){ // 더 이상 들어올 정보가 없으면 콜백 함수를 호출
var post = qs.parse(body); // post 안에 POST 데이터가 들어있을 것
console.log(post);
});
response.writeHead(200);
response.end('sucess');
}
글을 작성하면 post의 정보가 이렇게 콘솔 창에 출력된다
( BUT, pm2로 main.js를 실행하면 콘솔 창에 출력이 안되고, node 명령어로 main.js를 실행해주어야 작동한다. 왜일까 ...?! )
파일생성과 리다이렉션
POST 방식으로 전송된 데이터를 data 디렉토리 안에 파일로 저장하는 방법을 알아보자. > file write에 대해 알아야해
else if(pathname === '/create_process') 안에 있는 request.on 함수를 아래와 같이 추가해주자.
request.on('end', function(){ // 더 이상 들어올 정보가 없으면 콜백 함수를 호출
var post = qs.parse(body); // post 안에 POST 데이터가 들어있을 것
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){ // 에러가 있을 때 에러를 처리하는 방법
response.writeHead(200);
response.end('sucess');
});
console.log(post);
});- fs.writeFile() 함수 추가
이제 create에서 글을 생성해주면, 아래처럼 data 디렉토리에 생성해준 글이 파일로 저장된 것을 볼 수 있다.
이제 success 화면이 아닌, http://localhost:3000/?id=nodejs로 페이지를 이동시킬 수 있도록 하고 싶다. 이런 작업을 리다이렉션이라고 한다.
글을 적어주었다! 두근두근
리다이렉션 성공 ~
이번 글은 여기까지 하고 자르고, 다음 글에서 수정 및 삭제부터 이어서 하자 ~
'Javascript > Node.js' 카테고리의 다른 글
| MySQL 모듈 기본사용법, 홈페이지 구현, 상세보기 구현 (0) | 2021.07.05 |
|---|---|
| 실습 준비 (0) | 2021.07.05 |
| API & REST API (0) | 2021.05.12 |
| ~이제까지 공부한거 복습 (0) | 2021.05.12 |
| 함수를 이용한 정리 정돈, 동기와 비동기, call back (0) | 2021.05.05 |
