프로젝트 회고/사용자 매뉴얼 사이트 개발

3. 정리 - 사용자 매뉴얼 사이트

배운 점들 ㄱ. intersectionObserver의 활용 목차를 구현할 때 현재 사용자가 어떤 제목 영역을 보고 있는지를 intersectionObserver를 활용해 구현했다.무한 스크롤, 사용자 인터랙션 등 다양한 분야에서 활용되는 intersectionObserver의 활용 능력을 키웠다. ㄴ. 검색 로직 구현 각 매뉴얼들의 본문을 파싱하여 트리 형태로 저장, 이를 재귀형태로 탐색하여 일치하는 부분의 근처 단어들, 속한 제목 영역 정보 등을 다시 트리 형태로 저장, 보여주는 로직을 구현했다. 이는 현재 블로그, 공식 문서등 다양한 분야에서 사용되는 로직이기 때문에 추후에도 활용 빈도가 높을 것 같다. ㄷ. 정규식 활용 ㄴ. 과 이어지는 내용으로 검색을 위해 mdFile을 파싱할 때 정규식을 많이..

2. 개발 - 전체

데이터 페치, 라우팅, 사이드바 설정 앱 최초 기동시에 각 사용자 매뉴얼 파일 정보를 트리 형태로 불러왔다. export default function ManualSite() { const [manuals, setManuals] = useState([]) useEffect(() => { getManuals().then(res => { setManauals(res) }) }, []) // ...생략 } 트리의 depth는 3이고 각 노드들은 파일 주소, 이름, path이름을 가지고 있다. manuals = [{mdUrl: "botCategory.md", name: "봇 카테고리", "botCategory"}, ...] 파일 주소를 바탕으로 md 파일을 읽어와 저장했다. getMdFiles(manauals)..

1. 요구사항 정리, 기초 구상

1. 개요 보이스봇, 챗봇 저작 운영 서비스의 사용자 매뉴얼, FAQ, 릴리즈 노트를 조회할 수 있는 사이트를 개발 2. 요구사항 정리 사용자 매뉴얼 1) 사용자 매뉴얼은 개발자들이 md파일로 작성해 관리한다. md파일의 주소, 이름을 서버에서 관리한다. 2) 매뉴얼의 큰 제목들을 화면 우측의 목차에 보여주고, 클릭 시 해당 제목이 있는 영역으로 이동하게 한다. 3) 각 매뉴얼을 인쇄, 복사할 수 있어야 한다. 4) 검색을 통해 검색어가 포함된 매뉴얼의 정보들(매뉴얼 제목, 큰 제목, 내용)을 검색결과 팝업에 나타내고, 클릭 시 해당 매뉴얼의 해당 영역으로 이동하게 한다. 포함된 단어 주변의 2~3단어를 포함해 결과창에 보여주고 검색어는 강조 처리한다. 5) 매뉴얼은 화면 좌측의 사이드바에서 클릭을 통해..