개인프로젝트 마무리

Ungs·2021년 5월 9일

TOY node.js

Tree Generator

Tree_Generator 배포 링크

사용기술

CSS
Javscript
Node js (Express, ejs)

개발하게된 과정

최근 올라온 글중에 Folder Tree 구조 생성기를 만드신 분이 있었다. 내가 가진 기술 로는 어떻게 만들 수 있을 지 궁금하였기에 한주 안으로 완성을 해보았다.

구현하지 못한 부분

Image Issue

지금 존재하는 Image download 기능은 h2mlcanvas라는 함수를 이용하고 있다. 그런데 파일이 너무 많을 시에는 밑에가 잘리는 불상사가 발생한다. 이것을 어떻게 해결해야 할지가 더 좋은 기능이 될 것 같다.

불완전한 알고리즘

현재 만든 generator는 초기버전이기 때문에 오류가 너무 많고, 특정한 Tree구조의 경우 내가 생각했던 방식과 다르게 출력이 된다. 그래서 제일 빨리 해결해야할 사안 인 것 같다.

UI

아무래도 UI적 감성이 부족한 나로서는 기존에 어느정도 나와있는 Folder tree 생성기의 모습과 매우 유사하다. 나중에는 file의 확장자를 통해서 해당하는 image도 같이 출력 되게 만들 예정이다.

수동 생성

수동생성 기능은 너무 시간이 오래걸리고 오류가 많아 배포단계까지는 오지 못했다. 빠르게 알고리즘을 수정을 먼저한후 수동생성 기능도 구현을 해봐야 할 것 같다.

Function 공부

Fetch : http 통신 get, post를 할 수 있는 함수

const fetch = require("node-fetch");

function fetchData(url, branch){
return fetch(`https://api.github.com/repos/${url}/git/trees/${branch}?recursive=1`)
      .then(res => res.json())
}

multer : 파일 업로드,저장기능

var Product = require('../models/Product');
var multer = require('multer');

// 저장소 설정 (다운로드 장소, 파일 이름)
var storage  = multer.diskStorage({ 
    destination(req, file, cb) {
      cb(null, './public/upload');
    },
    filename(req, file, cb) {
      cb(null, `${file.originalname}`);
    },
  });
  var uploadWithOriginalFilename = multer({ storage: storage }); 

// 
router.post('/', uploadWithOriginalFilename.single('attachment'), function(req, res){
      res.redirect('/upload);
  });