깃허브 레포지토리
프로젝트 주소
🚀 프로젝트 기간
24.11.11 - 24.11.14
💻 기술 스택 및 도구
언어 : HTML, CSS, Vanilla Javascript
프로젝트 관리: Gihub
디자인 도구: Figma
💁 프로젝트 목표 및 주제
바닐라 자바스크립트의 History API를 이용해 SPA 형태로 구현하여
마크다운 기반으로 동적으로 텍스트 블록을 생성하는 문서 편집 사이트 제작
😁 잘한 점 (성공적인 부분)
구현 사항
SPA 라우팅
javascript의 History API를 사용하여 SPA 형태로 구현
// history API 사용한 코드 일부분
if (!id) {
history.pushState({ page: "/" }, "", /); // root로 이동
loadTextEditor("Content");
} else {
history.pushState({ page: id }, "", /documents/${id});
loadTextEditor(id);사이드바
편집기에서 문서 제목 수정시 사이드바에 실시간 자동 저장 (디바운싱 적용)
모든 문서 목록 표시(랜더링)
토글 기능으로 화면 공간 효율적 활용
새 문서 생성 버튼 제공
하위 문서 생성 버튼 제공
문서 삭제 버튼 제공
문서 제목 검색 기능 제공
사이드바 제목 말줄임표 기능 사용
텍스트 편집기
편집기 본문은 texteditable block를 사용하여 구현
MarkDown 기법중 제목(H1~H4), 리스트(ul,ol) 구현
편집기 상단에 현재 도큐먼트의 경로 표시, 가시성과 직접적인 접근 가능
편집기 하단에 현재 도큐먼트의 하위 도큐먼트 페이지 링크, 직접적인 접근 가능
제목, 내용을 별도의 저장 버튼 없이 디바운싱을 적용하여 서버 통신 최소화
😅 개선할 점 (아쉬운 부분)
우선 프로젝트 기간이 3일 정도 밖에 없어서 목표하고자 했던 기능들을 전부 다 구현하지 못한 부분들이 아쉽다.
1. 구현하지 못했던 기능들
도큐먼츠 컨텐츠 내에 새로운 페이지 링크기능
문서 삭제시 root URL로 이동시켜줘야 하는데, 삭제되도 별다른 동작을 수행하지 않으면 그 페이지에 남아 있는 문제
문서 추가하면 해당 문서 URL로 이동시켜줘야하는데 사용자가 수동으로 이동해야한다는 불편함
에디터에서 내용을 수정할때마다 이벤트의 실행을 최소화해 서버에 부담을 줄여주기위해
2. 디바운싱을 사용하였는데 시간을 너무 짧게 설정해 효과가 별로 없었던 문제
3. 협업에서 중요한 git, github 활용에 대한 부족한 지식
팀원의 대부분이 팀 프로젝트의 경험이 없던 터라 협업시에 코드 공유에 필수적인 git,github 활용법에 대해 알지 못해 초반에 시간을 많이 할애하였다.
물론 팀원중 한분이 git에 대한 지식이 풍부하여 많은 부분들을 배울 수 있었다.
ps. 준영님 감사합니다😀
4. 기능적인 면에만 너무 집중한 나머지 UI/UX 측면에서 생각하지 못한 부분
프론트앤드 개발자라면 웹 어플리케이션의 기능적인 부분뿐 아니라 UI/UX 측면에서도 바라봤어야하는데 필수적인 기능 구현에만 집중한 나머지 중요한 부분을 놓쳤던 것이 아쉽다.
📖 배운 점
1. 효율적인 코드 작성
도큐먼트들을 CURD할때마다 매번 겹치는 코드들을 사용해야했는데 그러다보니
코드도 길어지고 가독성도 좋지 않게 되었다.
어떻게 하면 가독성도 좋고 효율적인 코드를 짤 수 있을지 고민하였고
API 요청 관련 함수룰 따로 모듈화하여 관리해 효율적인 코드를 작성할 수 있었다.
2. Vanilla Js로 SPA 구현
SPA로 구현해야하기 때문에 버튼이나 문서들을 클릭하였을때 새로고침되지않고
부드러운 화면전환이 이뤄저야했다.
그렇다면 어떤 동작이 일어날때마다 사이드바에 모든 문서들을 렌더링 해줘야한다.
이를 위해서는 모든 문서들을 사이드바에 뿌려주는 함수를 구현해야했다.
특히 하위문서가 있다면 하위문서까지 재귀적으로 확인하여 랜더링해줘야했다.
이러한 과정 속에서 트리형태로 이루어져 있는 문서들을 어떻게 불러오는지에대해 명확히 알 수 있었고 프레임워크를 사용하지 않고 JS만으로도 SPA를 구현할 수 있다는것을 배울 수 있었다.
👀 개선할 부분들
1차 팀 프로젝트는 끝이 났지만 기능적인 부분들이나 UI/UX 측면에 있어서 아쉬운 부분들이 많았기 때문에 개인 프로젝트로 이어갈 예정이다!
모든 개선점들을 보완한다면 결과물을 올릴 예정이다!
+) 2024.11
몇가지 기능들을 보완하였고 Netlify를 이용해 배포까지 해보았다.