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

배포 사이트

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

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

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

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

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

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

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

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

마크다운 문법

마크다운 기초 문법

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

블럭 전환

리치 텍스트

순서 리스트

실시간 동시편집

한페이지 다중블록

다중 페이지 동시입력

워크스페이스

워크스페이스 접속

워크스페이스 초대

워크스페이스 초대수신

탭 브라우징

다중 탭브라우징

페이지 최대화

페이지 최소화

인터랙티브 컴포넌트

하이라이트 애니메이션

슬라이드 인 텍스트

페이드인 텍스트

펄스&바운드 텍스트

애니메이션 레인보우

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

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

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

캐럿 이동 문제

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

캐럿 관리 트러블슈팅

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

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

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

복잡한 중첩 구조 개선

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

한글 입력 컴포징 이슈 해결

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

🖥️ 탭 브라우징

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

페이지들이 화면을 벗어나지 않도록 위치를 조절할 수 있고, 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

Name		Name	Last commit message	Last commit date
Latest commit History 1,088 Commits
.github		.github
.vscode		.vscode
@noctaCrdt		@noctaCrdt
client		client
nginx		nginx
server		server
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
docker-compose.debug.yml		docker-compose.debug.yml
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.base.json		tsconfig.base.json

Ludovico7/web33-Nocta

Folders and files

Latest commit

History

Repository files navigation

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

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

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

마크다운 문법

마크다운 기초 문법

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

블럭 전환

리치 텍스트

순서 리스트

실시간 동시편집

한페이지 다중블록

다중 페이지 동시입력

워크스페이스

워크스페이스 접속

워크스페이스 초대

워크스페이스 초대수신

탭 브라우징

다중 탭브라우징

페이지 최대화

페이지 최소화

인터랙티브 컴포넌트

하이라이트 애니메이션

슬라이드 인 텍스트

페이드인 텍스트

펄스&바운드 텍스트

애니메이션 레인보우

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

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

캐럿 이동 문제

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

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

복잡한 중첩 구조 개선

한글 입력 컴포징 이슈 해결

🖥️ 탭 브라우징

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

🔧 기술 스택

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

📅 프로젝트 기간

🌱 팀원 소개

🚀 프로젝트 시작 가이드

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

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

Packages