📕 프로젝트 소개

---

프로젝트 개요

• 기간 : 23.10.25. ~ 23.10.31
• 인원 : FE 4명
• 한 줄 설명 : Velog 블로그 글 작성을 더 편리하게 해주는 크롬 확장 프로그램
• 링크 : Github

사진 및 영상

기술 스택

• JavaScript, HTML, CSS

프로젝트 기능

1. 미리보기 제어 기능 : 미리보기 토글 버튼을 통해 자동으로 생기는 미리보기 창 토글 가능
2. 템플릿 CRD 기능 : Velog 본문에 글 작성 후 템플릿 버튼을 통해서 CRD 기능
3. 글 작성 페이지 내 테마 설정 기능 : 글 작성 페이지 내에서 테마 설정 기능
4. 글자 색상 지정 기능 : Color Picker를 이용하여 자동으로 색상 태그를 삽입해주는 기능

✅ 기여한 부분

---

미리보기 제어 기능

• Velog 에디터 패이지 내 화면 해상도에 따른 자동 미리보기가 생기는 불편함 해소
• 미리보기 토글 버튼을 통해서 사용자 제어 기능 구현

템플릿 CRD 기능

• 수강생들의 TIL 작성 용이성 증대 목적을 위해 도입
• 로컬 스토리를 이용하여 템플릿 생성, 읽기, 삭제 기능 구현

글 작성 페이지 내 테마 설정 기능

• 기존 Velog 글 작성 페이지에서 테마 설정 불가 문제 해결
• 글 작성 페이지 내 테마 설정 토글 버튼 기능 구현

🛠️ 트러블 슈팅

---

에디터 내 템플릿 내용 삽입 처리

• velog 페이지 내 에디터내 line과 text를 통해서 구분돼 있음
• 단순 innerHTML을 통해 삽입 시 Velog 에디터 라이브러리 이벤트 혹은 위 태그들 처럼 자동 삽입 되지 않아 제대로 동작하지 않음
• 따라서 유저가 복사/붙여넣기를 수행한 것처럼 javascript를 이용하여 해당 기능 구현
• Custom Event, dispatchEvent를 이용하여 해당 문제 해결