[Project] myPage - CRUD

➕ CRUD 추가

myPage 프로젝트에 CRUD를 추가하는 과정을 기록한다.

✔ Challenge 1 (21.1.5)

문제점

게시글에 이미지를 업로드하고 다운로드하기 위해서는 enctype="multipart/form-data"를 사용해야 했는데, 해당 타입으로 암호화하자 텍스트가 제대로 파싱되지 않았다.

시도 1

따라서 텍스트를 먼저 업로드하고, 이미지 업로드 창으로 넘어가도록 하였다. 하지만 이미지를 업로드하는데에도 알맞은 변수들을 지정해 줘야 해서 이미지를 저장하는데 필요한 변수들만 새롭게 입력하도록 했다.

쿼리스트링에 folder과 title 값이 이상한 모양으로 전송되는 것을 확인했고, 알맞게 parsing을 해줌으로써 folder과 title을 추출하려고 시도했다. 하지만 request가 비동기적 방법이여서인지, 두 변수가 제대로 입력되지 않았다

...
request.on('end', function(){
  let post = qs.parse(body, 'name="', '"\r\n\r\n');
  folder = post.folder.split('\r\n')[0];
  title = post.title.split('\r\n')[0];
})
let form = new formidable.IncomingForm();
form.parse(request, function(err, fields, files){
  ...
}
...

시도 2

사실 텍스트, 즉 폼의 값들은 fields에 저장되어 있던 것이었다. 따라서 단순히 fields에 있는 form 변수들을 참조하는 것으로 게시물 생성을 구현할 수 있었다.

else if(pathname === '/create_process'){
  let form = new formidable.IncomingForm();
  form.parse(request, function(err, fields, files){
    let folder = fields.folder;
    let title = fields.title;
    let description = fields.description;
    let oldpath = files.file.path;
    let imgType = files.file.type.split('/')[1];
    let newpath = `./tab/${folder}/img/${title}.${imgType}`;
    fs.rename(oldpath, newpath, function(err){
      fs.writeFile(`./tab/${folder}/data/${title}`, description, 'utf8', function(err){
        response.writeHead(302, {'Location': `/?id=${folder}&theme=${theme}`});
        response.end();
      });
    });
  });
}

참고 사이트

• Node.js 파일 업로드하기
• querysting을 통한 form-data 파싱

✔ Update 1 (21.1.6)

변경점

• update와 delete 분기
• home에서는 create, update, delete 버튼 보이지 않도록 수정
• id(folder) 값을 hidden으로 전송하도록 수정
• insight 탭에서는 column이 3개가 아닌 2개로 나오도록 수정

변경방법

update의 경우 fs.rename(oldpath, newpath, callback)으로 기존 파일을 rename하고, fs.writeFile(newpath, description, callback)으로 새롭게 파일을 덮어씌우는 방식으로 작업

...
fs.rename(oldpathText, newpathText, function(err){
  fs.writeFile(newpathText, description, 'utf8', function(err){
    fs.rename(oldpathImg, newpathImg, function(err){
      ...

delete의 경우 fs.unlink(path, callback)을 이용해서 데이터와 이미지를 모두 삭제

...
fs.unlink(`./tab/${folder}/data/${title}`, function(error){
  fs.unlink(`./tab/${folder}/img/${title}.png`, function(error){
    ...

문제점 및 개선방안

• update와 remove시 이미지의 확장자를 png로 한정했다. 이미지의 확장자를. 가져오는 방법을 찾아볼 것.
• update시 이미지 변경이 불가하다. 해결방안을 모색해 볼 것.
• 포스트들을 표시할 때 column을 이용하니까 가로로 차곡차곡 쌓이지 않고 문단처럼 왼쪽부터 채워나간다. 포스트가 많아지면 flexbox를 사용하여 리팩토링 하는것도 고민해 볼 사항. 또한 페이지를 추가해도 좋겠다.

+21.1.11: MySQL로 변경중이므로, MySQL로 이미지를 가져오는 방법을 찾아볼 것.

✔ Update 2 (21.1.7)

변경점

• 모듈을 사용해 function과 변수 정리:

let template = require('./lib/template.js');
...
//main.js에서 template.js 모듈을 불러와서 사용

• <form>에 css 적용:

input[type=text]{
  //포커스시 발생하는 효과 제거
  outline-style: none;
  //둥근 모서리를 3px로
  border-radius: 3px;
}

• <input> 자동완성 해제:

//자동완성을 off로 설정
<input type="text" name="title" autocomplete='off'>

• 보안 강화:

//sanitize-html을 이용해 <script> 실행을 차단
let sanitizeHtml = require('sanitize-html');
...
let sanitizeTitle = sanitizeHtml(title);

//parse를 이용해 허용되지 않은 디렉토리를 서치하는것을 보안
`let filteredTitle = parse.parse(title).base`
fs.readdir(`./tab/${filteredTitle}/data`, function(error, tempTextlist){
  ...

✔ Finished (21.1.7)

MyPage 프로젝트에 CRUD를 모두 구현했다. 하지만 아직도 nodejs 서버를 어떻게 구현하고 배포하는지를 잘 모르겠다. 프론트앤드를 목표를 하고 있지만, 서버쪽도 조금은 배워놓는게 좋을 것 같고, 동적으로 이 프로젝트를 배포해보고 싶기 때문에 서버쪽 공부가 필요해 보인다.