반응형
파일 쓰기/삭제하기 + 예제
포스팅 요약
2. 파일 쓰기: fs.writeFile 설명 + 간단한 예제
3. 파일 삭제: fs.unlink 설명 + 간단한 예제
4. writeFile + unlink 를 사용한 미니 프로젝트 코드
1. 최종 미니 프로젝트 설명 + 결과
<프로젝트 설명>
>localhost:3000/ 페이지 윗부분에는 생성할 파일의 타이틀과, 파일 내용을 적는 입력란을 준다.
> 제출버튼 클릭시, 디렉토리에 파일이 생성되며, 페이지 아랫부분에 파일 목록을 보여준다.
> 파일 목록 클릭 시 파일 삭제를 한다
<결과>
2. 파일 쓰기: fs.writeFile 설명 + 간단한 예제
> fs.writeFile("파일경로", "파일안에 적을 내용", "utf8", callback); *비동기이다
> 동기로 쓰고 싶다면 fs.writeFileSync("파일경로", "파일안에 적을 내용")
<예제 코드>
const http = require("http");
const fs = require("fs");
const qs = require("querystring");
const app = http.createServer((req, res) => {
const _url = req.url;
const fullUrl = new URL("http://localhost:3000" + _url);
const pathName = fullUrl.pathname;
if (pathName === "/") { // localhost:3000/ 접속시
res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
/* html에서 form action과 method 주목 아래에서 자세히 설명*/
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코드짜는 문과녀</title>
</head>
<body>
<form action="/write_file" method="post">
<p>
<input
autocomplete="off"
type="text"
name="title"
placeholder="타이틀"
value=""
required>
</p>
<p>
<textarea
autocomplete="off"
type="text"
name="description"
placeholder="설명"
value=""
required>
</textarea>
</p>
<p><input type="submit"></p>
</form>
</body>
</html>`);
} else if (pathName === "/write_file") { //localhost:3000/write_fils 로 접속시
let body = "";
req.on("data", (data) => {
body += data;
});
req.on("end", () => {
//위 form에서 input과 textarea의 값
let post = qs.parse(body);
//input의 name="title"이므로 post.title은 input의 value값
let title = post.title;
//textarea name="description" 이므로 textarea의 value값
let description = post.description;
//data폴더안에 title이란 이름으로, description이라는 내용을 입력하여 파일 저장
fs.writeFile(`data/${title}`, `<p>${description}<p>`, "utf8", (err) => {
res.writeHead(302, { Location: `/` }); //파일 저장뒤 바로 localhost:3000/으로 이동
res.end();
});
});
}
});
app.listen(3000, () => {
console.log("3000포트 서버 시작");
});> Action이란? form에서 action="/write_file"이란, form안의 데이터들을 처리할 서버 프로그램의 URL을 말합니다.
> method="post"란? method 에는 get과 post속성값이 있습니다. 기본값으로는 method="get"으로 설정되어 있으므로,
데이터를 전송하고 싶으면 method="post"를 써야됩니다.
> 참고링크: get과 post에 대한 설명이 매우 잘되어있는 블로그를 발견하여 공유합니다. (링크:JungB님의 블로그)
<결과>
* 제출 후, data폴더 안에 HTML파일이 생성됨.
3. 파일 삭제: fs.unlink 설명 + 간단한 예제
> fs.unlinkFile("파일경로", callback);
<예제 코드>
const http = require("http");
const fs = require("fs");
let app = http.createServer((req, res) => {
const _url = req.url;
const fullUrl = new URL("http://localhost:3000" + _url);
const pathName = fullUrl.pathname;
const queryData = fullUrl.searchParams;
if (pathName === "/") {
let list = "";
/* 예) localhost:3000/?id="hi"일 경우
queryData.get("id") === "hi" */
if (queryData.get("id") !== null) {
let fileName = queryData.get("id");
fs.unlink(`./data/${fileName}`, (err) => {
//삭제 후 localhost:3000/으로 접속
res.writeHead(302, { location: `/` });
res.end();
});
}
fs.readdir(`./data`, (err, files) => { //파일 목록 불러오기
files.forEach((file) => {
list += `<li><a href="/?id=${file}">${file}</a></li>`;
});
res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코드짜는 문과녀</title>
</head>
<body>
<ul>
${list}
</ul>
</body>
</html>`);
});
}
});
app.listen(3000, () => {
console.log("서버 3000포트에서 시작");
});> res.readdir 참고 링크 :
2021.09.08 - [웹/(Node.js)노드] - (Node.js) 파일 목록 불러오기/ 파일 이름 불러오기 + 예제(간단함)
<결과>
- 원래 data폴더에 있는 파일
- localhost:3000/ 화면(data폴더 안에 있는 파일을 불러옴)
- HTML 클릭 후, data폴더에 있는 파일이 없어짐.
4. writeFile + unlink 를 사용한 미니 프로젝트 코드
let http = require("http");
let fs = require("fs");
let qs = require("querystring");
let app = http.createServer((req, res) => {
let _url = req.url;
let fullUrl = new URL("http://localhost:3000" + _url);
let pathName = fullUrl.pathname;
let queryData = fullUrl.searchParams;
if (pathName === "/") {
let list = "";
if (queryData.get("id") !== null) {
let fileName = queryData.get("id");
fs.unlink(`./data/${fileName}`, (err) => {
res.writeHead(302, { location: `/` });
res.end();
});
}
fs.readdir(`./data`, (err, files) => {
files.forEach((file) => {
list += `<li><a href="/?id=${file}">${file}</a></li>`;
});
res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코드짜는 문과녀</title>
</head>
<body>
<form action="/write_file" method="post">
<p>
<input autocomplete="off" type="text" name="title" placeholder="타이틀" value="" required>
</p>
<p>
<textarea autocomplete="off" type="text" name="description" placeholder="설명" value="" required></textarea>
</p>
<p><input type="submit"></p>
</form>
<hr>
<ul>
${list}
</ul>
</body>
</html>`);
});
} else if (pathName === "/write_file") {
let body = "";
req.on("data", (data) => {
body += data;
});
req.on("end", () => {
let post = qs.parse(body);
let title = post.title;
let description = post.description;
fs.writeFile(`data/${title}`, `<p>${description}<p>`, "utf8", (err) => {
res.writeHead(302, { Location: `/` });
res.end();
});
});
}
});
app.listen(3000, () => {
console.log("server 3000포트에서 시작");
});반응형
'웹 > (Node.js)노드' 카테고리의 다른 글
| (Node.js-express) get, post요청 처리/body-parser deprecated (0) | 2021.09.11 |
|---|---|
| (Node.js) 파일 읽기 + 예제/ readFile과 readFileSync (0) | 2021.09.09 |
| (Node.js) 파일 목록 불러오기/ 파일 이름 불러오기 + 예제(간단함) (0) | 2021.09.08 |
| (Node.js) pm2 서버 중단 없이 소스 반영법/무중단 서비스하기 (pm2사용법) (0) | 2021.09.08 |
| (Node.js) node.js express로 서버구축하기 (0) | 2021.09.07 |
댓글