[WEEK 16] 나만의 무기 - TIL

나만의 무기 진행 상황

 

백엔드

백엔드는 NodeJS를 사용. 프론트인 javascript, react에 맞춘 선택. 같은 javascript기반으로 좀 더 쉽게 협업 및 지원이 가능.

정글 입학 시험에서 사용했던 파이썬 플라스크와 거의 유사하다고 생각되어 거의 회원가입부터 구현하면서 손에익히는 방식으로 진행.

1) 회원가입, 로그인

passport를 안쓰는 세션방식으로 구현했는데 토큰방식을 사용해보려함

postman으로 테스트완료

구현을 다했지만 자체 회원가입, 로그인 기능을 없애기로 하고 소셜로그인만 하기로함

2) 구글소셜로그인

토큰방식으로 변경해서 프론트와 통합 필요

 

프론트엔드

React 라이브러리 사용. javascript 는 내용이 너무 방대하니 포이마웹에서 대략적인 개념들을 파악하고 foreach같은 ES6의

모르는 내용이 나오면 그때그때 찾아보았음.

리액트는 공식문서 주요개념 1~12단원 +  Ref, hook 을 보면서 공부.

에디터 라이브러리가 타입스크립트 기반이라 타입스크립트 공부 필요..

1) 하이라이팅

하이라이팅 객체를 뽑는 부분 맡음. html로 파싱된 pdf문서를 브라우저 윈도우 객체의 selection, range 객체를 이용.

2) 에디터

block 같은 우리가 원하는 기능의 플러그인이 있거나 라이브러리를 직접 수정하여 쓸 수 있는 라이브러리인지 검토하는데에

시간을 많이 소요함. 

yjs 라이브러리와 milkdown 라이브러리 선택. 현재 milkdown 라이브러리 예제 소스코드 이용하여 우리 프로젝트에 통합 및

local 테스트 완료.

블록 드래그앤드롭도 된다!

타입스크립트로 된 부분, 겹치는 css name이 있어서 디버깅에 어려움이 있었음. 앞으로 백엔드 구현 들어갈듯.

검토했던 동시편집(CRDT) 오픈소스 라이브러리:

• yorkie
  
  네이버에서 만든 오픈소스. Go 언어 기반이라 배우면서 할까 고민하다가 지금도 배울게 많아서 패스..
  
  
• Diamond types
  
  Rust로 구현해서 CRDT 중에 가장 속도 빠름. automerge 라이브러리보다 5000배 빠름. 하지만 이 라이브러리로
  
  구현된 기능이 없고 docs도 부족하여 패스.
  
  
• yjs
  
  성능도 좋고 docs에 기능도 잘 정리되어있는 편이라 yjs로 선택.

검토했던 에디터 라이브러리:

• 쌩으로 구현
  
  아래 매우잘 정리된 노션클론 블로그가 있어 follow up 하면서 구현하면 재밌을 것 같다고 생각하였으나,
  
  팀원들과 프로젝트 시간을 고려했을때에 아쉽지만 더 빠른 방법을 택하기로 함.
  
  https://medium.com/swlh/how-to-build-a-text-editor-like-notion-c510aedfdfcc

How to Build a Text Editor Like Notion

• prosemirror
  
  괜찮은 라이브러리이고 직접 스키마 노드를 만들 수 있어 자유도가 높다고 판단. 커뮤니티 큰편. 보류.
  
  
• tiptap
  
  블록기능은 있지만 드래그앤드롭 플러그인이 없고 해당 기능을 직접 만들어서 붙이기가 어렵다고 판단.  
  
  
• milkdown
  
  블록 드래그앤드롭 플러그인이 있음. prosemirror 기반이라 자유도가 괜찮음.
  
  docs나 참고할만한 커뮤니티는 조금 부족하지만 prosemirror를 이용할 수 있고 지원기능도 많고 UI도 깔끔해서 선택.