[WebAppServer] 공유가 가능한 마크다운 메모장 서버

MdServer

나는 보통 내용을 정리할때 마크다운(md) 문서로 내용을 작성한다음 저장한다.

때로는 내가 만든 마크다운 파일을 공유할일이 생기는데 이참에 나만의 마크다운문서 서버를 만들고자했다.

GitHub

https://github.com/hbcha0916/mdServer

GitHub - hbcha0916/mdServer

 

제작

제작은 70%는 Claude.ai 가 했다 ㅋㅋ

나는 구현스택과 기능상세에대해 설명하고 질문하고 눈에보이는 버그 및 결함을 지시하고

모르거나 이상한부분에 대해 질문하고 -> 이상한부분에 대해 질문하면 잘못된 로직이라며 AI가 지혼자 수정한다

요구한 기능

인프라

1. docker 컨테이너 기반이고 docker-compose로 동작했으면 좋겠다

2. 데이터베이스는 마리아DB를 사용

3. compose-down 컨테이너 가동후 생기는 데이터는 삭제되니 볼륨은 현재디렉토리의 ./data와 컨테이너 내부 /md_server로 맵핑시키고 모든 마크다운은 컨테이너 내부 /md_server의 하위 디렉토리 내부에 생성

4. 웹 앱 베이스는 파이썬 또는 nodeJS를 사용

파일시스템

1. /md_server 디렉토리 내에 마크다운 디렉토리는 `MDV_` 의 접두사를 가져야하며 해당 하위 디렉토리에 마크다운 파일을 생성한다.

2. `MDV_` 의 접두사로 마크다운 파일 목록을 생성하며 디렉토리명은 곧 IDE의 프로젝트 개념과 같다

실시간작성기능

1. 내가 실시간으로 웹에서 마크다운을 작성할 수 있어야하고 오른쪽에는 PC일 경우 미리보기를 스플릿뷰로 하여 실시간으로 내가 작성한 마크다운 화면을 확인할 수 있어야한다.

2. 파일 업로드가 필요하다. 때론 이미지를 첨수할 수 있어야 하기 때문에 이미지 첨부파일을 생성해야한다. 

파일 업로드시 해당 디렉토리의 content/<MD파일명>/ 에다가 저장해야하며 이것또한 실시간 미리보기로 제공해야하며 업로드 후 뷰어, 공유뷰어로 확인시 정상적으로 나와야한다

뷰어

1. 로그인해서 나만 볼수있는 뷰어화면과 공유했을경우 뷰어화면, 디렉토리를공유했을때의 뷰어가 필요하다

- 로그인해서 볼수있는 뷰어에는 수정, 삭제 등 관리 메뉴가 필요

- 공유뷰어에서는 다운로드 및 열람할 수 있어야한다.

2. 디렉토리를 공유했을경우에는 해당 디렉토리의 모든 마크다운 문서를 리스트로 보여줘야하며 해당 마크다운 파일을 클릭했을경우 해당 마크다운 파일을 열람할 수 있어야한다.

- 디렉토리 다운로드버튼을 클릭하면 해당 디렉토리의 모든 마크다운과 컨텐츠를 다운로드할 수 있어야 한다.

3. 다크모드 / 라이트모드를 모두 고려하여 안보이는 글자가 없어야한다.

4. 코드하이라이트 기능으로 특정 코드의 함수는 하이라이트 시켜줬으면좋겠다

5. 마크다운 뷰는 깃허브처럼 나왔으면 좋겠다.

공유

1. 공유링크는 특정 토큰을 발급받아 공유용 URL을 생성해야한다.

2. 공유링크의 유효기간이 필요하며 무제한, 1시간, 6시간 등 선택할 수 있어야한다.

3. 공유링크는 단일파일, 디렉토리 공유가 필요하다.

- 단일파일은 해당 파일 및 컨텐츠만 열람 가능해야한다

- 디렉토리는 해당 디렉토리 내 모든 마크다운문서와 컨텐츠를 열람할 수 있어야한다.

4. 공유링크를 가진 사람만 열람 가능해야한다.

5. 공유관리 기능을 만들어 데이터베이스에 공유중인 모든것을 저장하고 즉시 공유를 중단시키거나, 내가 무엇을 공유중인지 확인할 수 있어야한다.

메인화면

1. 로그인한 사용자만 접속 가능해야한다

2. 메인화면에는 마크다운 프로젝트 디렉토리(디렉토리명이 `MDV_` 로시작하는 디렉토리)목록이 보여야한다.

3. 해당 디렉토리에 "보기"버튼을 누르면 해당 디렉토리 내 모든 마크다운 문서가 보여야한다.

4. "삭제"버튼을 클릭하면 디렉토리내 모든 마크다운과 컨텐츠, 공유내용이 사라져야한다.

5. "새 파일"버튼을 누르면 즉시 마크다운 파일을 만들수 있어야하며 파일명 정의후 에디터화면으로 넘어가서 바로 작성가능해야한다.

6. "공유"버튼을 눌러 디렉토리를 공유할 수 있어야한다.

7. 공유중인 디렉토리는 공유중임을 알 수 있게 표시해줘야한다.

구현된 모습

메인화면

로그인 화면

로그인 사용자의 뷰어

공유링크생성

공유 뷰어

에디터

디렉토리 공유

디렉토리 공유 뷰어(만료시간 6시간)

공유관리

마무리..

- 단시간에 이 앱을 구현할 수 있다는게 참 놀랍다..

- 요구사항대로 질문했지만 엉뚱하게말하면 AI가 뚱딴지같은걸 알려준다(한도 낭비)

- 질문자 또한 기술을 알고있어야 만들수 있는 결과물이며 너무 큰 범위로 설명하면 응용할 수 없는 수준이거나 버그 투성이다

- 잘못질문하면 한도초과라 다음날 혹은 오후6이 이후까지 기다려야한다

- 그래도 나혼자 개발하는것보단 무진장빨리 만들수 있었다.

- 이 단순 웹 앱이지만 저 위에 나열된것 말고도 매우 디테일한 질문이 필요했으며 아무곳도 모르는 요청자(고객)이 AI가지고 혼자 만들기엔 무리가 있어보인다.