배포 사이트

📑 문서 작성이 더 편하고 즐거워진다

🤔 하나의 문서를 작성하면서 다른 문서도 함께 보고 싶었던 적 있으신가요?

문서 작성할 때 여러 창을 띄워두고 번거롭게 작업하셨던 불편함이 있었죠. 기존 에디터들은 하나의 창에 갇혀있어서, 참고할 내용이 있을 때마다 창을 이동해야 했어요.

Nocta는 에디터에 새로운 바람을 불어넣었어요.

1. 탭 브라우징으로 여러 문서를 자유롭게 넘나들 수 있어요.
2. 인터랙티브한 요소들로 문서 작성이 더 흥미롭게 변해요.

Nocta에서 단순한 기록을 넘어, 새로운 글쓰기 경험을 시작하세요.

노션 | 개발위키 | 시연영상 | 최종발표

${\textsf{\color{blue}서비스 전체보기}}$

마크다운 문법

마크다운 기초 문법

블럭 드래그앤 드롭과 슬래시

블럭 전환

리치 텍스트

순서 리스트

실시간 동시편집

한페이지 다중블록

다중 페이지 동시입력

워크스페이스

워크스페이스 접속

워크스페이스 초대

워크스페이스 초대수신

탭 브라우징

다중 탭브라우징

페이지 최대화

페이지 최소화

인터랙티브 컴포넌트

하이라이트 애니메이션

슬라이드 인 텍스트

페이드인 텍스트

펄스&바운드 텍스트

애니메이션 레인보우

🏃‍♂️‍➡️ 직접 만들었습니다 CRDT 라이브러리!

@noctaCRDT 라는 이름으로 client와 server에서 사용해요

기술적 도전을 위해 RGA(Replicated Growable Array)알고리즘을 적용했어요 LinkedList 기반으로 논리적 시계를 활용하여 각 문자들의 인덱스와 순서를 관리해요

• CRDT(Conflict-free Replicated Data Type)
• CRDT를 구현해보자 (1): CRDT를 알아볼까..?
• CRDT를 구현해보자 (5): DB 데이터 구조 정하기
• CRDT를 구현해보자 (6): CRDT라이브러리 개선 + dev에 붙이기
• CRDT 동시성 처리
• CRDT 최적화하기

캐럿 이동 문제

CRDT 연산이 일어나고 상태가 업데이트되며, 캐럿의 위치가 초기화되거나 다른 페이지로 이동했어요 수동으로 캐럿위치를 설정하고, 페이지별로 CRDT를 생성해 관리했어요

• 캐럿 관리 트러블슈팅

📝 실시간 협업 마크다운 에디터

실시간으로 여러 사용자가 동시에 문서를 편집할 수 있는 마크다운 에디터를 구현했어요.

CRDT를 활용해 실시간 동시 편집 시의 충돌 문제를 해결했어요 마크다운 프리뷰와 에디터를 동기화하여 작성하면서 바로 결과물을 확인할 수 있어요

• 마크다운은 어떻게 구현해야 할까(1): 문법 변환
• 마크다운은 어떻게 구현해야 할까(3): 연결리스트

복잡한 중첩 구조 개선

기존의 중첩 구조는 복잡한 DOM 순회 로직이 필요하고 에러 발생 가능성이 높았어요 모든 요소의 depth를 1로 통일하고 prev/next 관계만 유지하도록 개선했어요

• 마크다운은 어떻게 구현해야 할까(4): CRDT 적용을 위한 구조 변경
• 마크다운은 어떻게 구현해야 할까(6): 리치 텍스트

한글 입력 컴포징 이슈 해결

macOS와 Windows에서 한글 입력 시 컴포징 이벤트 처리 방식이 달라 문제가 발생했어요 OS를 확인하여 각 OS에 맞게 처리했어요

• 마크다운 디버깅 - 윈도우에서 연산이 제대로 안되는 버그
• 마크다운 한글입력의 경우 블록이 2번 생기는 오류

🖥️ 탭 브라우징

페이지를 원하는 위치로 이동하고 사이즈를 조절할 수 있어요

페이지들이 화면을 벗어나지 않도록 위치를 조절할 수 있고, 8방향으로 크기를 조절할 수 있어요. GPU를 활용한 렌더링 최적화를 진행했어요

• 페이지 리사이징
• 탭 브라우징 구현하기

🔧 기술 스택

Common

Frontend

Backend

Infra

시스템 아키텍처 다이어그램

📅 프로젝트 기간

2024.10.28 ~ 2024.12.06 (6주)

🌱 팀원 소개

J078	J098	J099	J213
FE+BE	FE+BE	BE+Infra	FE
김현훈	민연규	민정우	장서윤

🚀 프로젝트 시작 가이드

# 저장소 복제
git clone https://github.com/boostcampwm-2024/web33-boostproject.git

# 의존성 설치
pnpm install

# 프로덕션 빌드
pnpm run build

# 프로젝트 개발 모드 실행
# Frontend: http://localhost:5173/
# Backend: http://localhost:3000/
pnpm run dev

# 프로젝트 Docker 빌드 후 실행 (http://localhost/)
docker-compose up -d --build