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

데이터 페치, 라우팅, 사이드바 설정 앱 최초 기동시에 각 사용자 매뉴얼 파일 정보를 트리 형태로 불러왔다. 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)..