내용이 길어질수록 아래처럼 목차가 너무 길어지는 문제(?)가 발생했다. 처음으로 페이지가 로딩 될 때, 조금 더 유용한 내용을 유저에게 전달하고 싶어서 pc 버전에서 목차를 오른쪽 여백에 띄워주는 기능을 추가하기로 하였다.

첫 화면에서는 목차와 제목만 보이는 것을 확인할 수 있다

첫 화면에서는 목차와 제목만 보이는 것을 확인할 수 있다

velog등 다른 블로그 서비스들은 목차를 오른쪽에 항상 띄워준다. 출처 : velopert velog

velog등 다른 블로그 서비스들은 목차를 오른쪽에 항상 띄워준다. 출처 : velopert velog

oopy 서비스에 추가할 코드 사전 작업하기


본격적으로 개발을 진행하기 전에, 사전 작업을 해보려고 한다. 내가 직접 개발한 코드가 아니라 oopy서비스 코드에 injection을 해야하는 상황이다. oopy에 직접 들어가 코드를 작성하면서 변경사항을 참고해도 된다.

Untitled

하지만 자동완성, 반영속도 등이 만족스럽지 않아서 다른 방법을 사용하기로 했다. oopy에서 우클릭을 한 후 페이지 소스보기를 누른다. 그럼 해당 페이지에 대한 소스가 나오게 되는데 이걸 vscode, sublime text 등 본인이 개발하기 편한 곳에 복사 붙여넣기 후 작업을 진행하면 된다. 수정된 화면은 경로에 저장된 html을 직접 열어서 확인할 수 있다.

Untitled