디늑
360
2019-02-22 17:45:48
13
1888

오픈소스 web ERD 개발후기



현재 1차개발완료 데모 주소 https://vuerd.github.io/vuerd-front/

github https://github.com/vuerd/vuerd-front


평소 오픈소스 활동을 하고 싶어도 어떻게 시작해야할지 몰라

내가 그냥 뭔가를 만들자라고 고민했습니다 주제없이 고민만하다가

exERD라는 tool을 쓰고있었지만 개인도 유료화 소식에 깊은 충격을 받아

여러 erd tool를 조사하다가 약간씩 부족한 느낌을 받았습니다

PR하고 싶어도 오픈소스가 아니라 원하는 기능을 추가할 수 없어 마침

평소 오픈소스 활동을 하고 싶어 무작정 ERD 개발을 시작했습니다

솔직히 만만하게 봤지만 ㅋㅋㅋ (그녀석은 쉽지않았습니다)


회사에 도입이 쉽지 않은 신기술을 쓰기위해

마침 핫한? vue, react 중에 vuejs를 선택해 개발을 시작했습니다

vuejs를 선택한 이유는 java web개발 풀스택 1년차인 제가 nodejs 환경에 익숙하지않고

그당시 es6문법도 몰랐고... 시작하기 쉽고 배우기 쉬워서 vuejs로 시작을 했습니다


오픈소스개발 이라는게 자발적으로 하는거라 동기가 없거나 재미가없으면

지속적으로 유지하기가 쉽지않다는걸 깨달았습니다

개발중간까지 새로운 기술을 써서 흥미를 유지했지만

어느 정도 익숙해지면서 끝나지않는 ERD 설계에 지루해지면서

진행이 더디었던 구간이 있었습니다

기초설계가 끝나고는 기능을 붙이는 개발속도가 빨라 흥이나서

몇번 밤새 개발했었던적도 있었습니다 ㅎㅎ


해당 오픈소스 목표는 docker 기반에 쉬운 설치형제공 및 ERD 관리 tool

인데 생각보다 ERD editor 개발이 오래걸려서

진이빠져 2차 관리페이지 개발은.... 느긋하게 진행하지 않을까 싶네요


그래도 ERD editor 개발이 끝났을때 뿌듯함은 좋았던거 같습니다


소스코드는 음.. 굉장히 하드코딩에 놀라지 마시길..


밴치마킹

aquerytool - http://aquerytool.com/

erdcloud - https://www.erdcloud.com/

exerd - http://ko.exerd.com/

workbench - https://www.mysql.com/products/workbench/design/


3
1
  • 댓글 13

  • 디늑
    360
    2019-02-22 17:53:11

    아 시작은 마우스 오른쪽 클릭이에요

    0
  • 초무쿤
    2k
    2019-02-22 17:58:44 작성 2019-02-22 18:01:18 수정됨

    엌ㅋㅋㅋㅋ 

    잘쓰겠습니다. 

    이름을 보아하니 vue 기반으로 개발하신거 같은데.

    혹시 테이블간 line 구현은 라이브리러 쓰신건지요.


    0
  • 디늑
    360
    2019-02-22 18:06:57

    테이블간에 line는 직접... svg로 구현했습니다 ㄷㄷ

    0
  • 초무쿤
    2k
    2019-02-22 18:11:29

    @디늑

    아..그렇군요...저도 구현할 일이 좀 있어서..ㅎㅎ

    0
  • 칸나
    1k
    2019-02-22 18:31:38

    으으 딱봐도 캔버스 노가다 쩔었을거 같네요

    고생하셨습니다.

    0
  • 초무쿤
    2k
    2019-02-22 18:34:48 작성 2019-02-22 18:35:29 수정됨

    근데 이거 잘만드시면 괜찮을거 같은데요.

    저도 이게 절실히 필요했는데. 마땅히 괜찮은곳이 없어서..

    (exERD 개인유료화 되는 바람에 저도 지금 방황중이라..;;)

    잘되시길 바랍니다.

    0
  • 디늑
    360
    2019-02-22 18:50:51

    @칸나

    놀랍게도? canvas가 아닌 html,svg,css 로만 구현되어 있습니다 저도 하고 놀랐어요 canvas안써도 왠만한건 다 그릴수 있더라구요

    0
  • 디늑
    360
    2019-02-22 18:54:50

    @초무쿤

    사실 aquerytool이나 erdcloud도 나쁘지 않는데

    설치형이 없어서 아쉽더라구요

    바로 그점을 노렸습니다 ㅋㅋ

    0
  • 초무쿤
    2k
    2019-02-22 18:56:31

    @디늑

    오픈소소로 하시는거면 다 되시면 설치형으로도 만들어주세요 ㅋㅋ

    0
  • ceastgun
    1k
    2019-02-23 18:35:29

    line을 SVG로 구현하셨는데 파이어폭스에서도 이미지 저장이 잘 되네요.

    저는 파이어폭스에서는 SVG 이미지 저장이 잘 안되더라구요.

    관련해서 찾아보니 파이어폭스 관련 버그가 있다고 하더라구요.

    소스 보니까 특이한 것은 없던데 vue의 힘인가요?

            domtoimage.toBlob(document.querySelector('.canvas')).then(blob => {

              this.execute(blob, fileName)

            })


    0
  • 디늑
    360
    2019-02-23 19:56:48 작성 2019-02-23 20:09:15 수정됨

    @ceastgun

    dom을 이미지로 변환하는 라이브러리중에 제가 알고있는건 크게 2개인데

    dom-to-image와 html2canvas인데 html2canvas는 svg는 변환을 못하더라구요

    dom-to-image 라이브러리는 가능해서 쓰고 있고 있습니다 vue와 별개로 라이브러리가

    잘해주더라구요

    0
  • ceastgun
    1k
    2019-02-24 07:06:18

    예전에 dom-to-image를 넣었다가 뺐던 기억이 이제 났네요.

    dom-to-image의 경우 아주 큰 이미지는 오류가 발생하더군요.

    하지만 아주 큰 이미지를 만들 일이 없다면 최고의 선택이죠.


    0
  • Garion
    1k
    2019-05-22 14:28:29

    오.. 웹이라서 쓰기 참 편하네요

    잘 쓰겠습니다.

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.