1. Hydration이란?Hydration은 서버에서 생성된 HTML을 브라우저에 표시한 뒤, React가 이를 읽고 동적인 기능(이벤트 처리, 상태 관리 등)을 연결하는 과정입니다.React 앱이 서버 사이드 렌더링(SSR) 된 경우, HTML은 빠르게 화면에 표시되지만, 이 상태에서는 동적인 기능이 작동하지 않습니다. 2. 왜 Hydration이 중요할까?Hydration은 SSR과 클라이언트 렌더링의 장점을 모두 결합한 기술입니다.빠른 초기 화면 표시: 서버가 완성된 HTML을 보내므로, 사용자는 빈 화면이 아닌 완성된 페이지를 바로 볼 수 있습니다.동적 기능 활성화: Hydration을 통해 React의 인터랙티브한 기능(클릭, 상태 변경 등)이 동작하게 됩니다. 3. Hydration의 과정서..

import { request } from '../utils/api.js'import NewBtn from './NewBtn.js'export default function SidebarPage({ $target, initalState }) { this.state = initalState this.createTreeView = (data) => { let str = '' for (const key in data) { if (data[key].documents.length > 0) { str += ` 📄 ${data[key].title} ..

지금부터 더미데이터로 기능을 구현했던걸 api를 받아와서 구현하겠습니다.먼저 api를 알아보기 이전에 사용법을 알아보도록 하겠습니다.그다음 postman을 통해서 요청 연습을 해보겠습니다. API 사용법1. 기본사항모든 API에는 headers에 아래의 값을 넣어야 합니다. header에 해당 값이 누락이 되면 API 호출에 실패합니다.'x-username': '다른 사람과 겹치지 않는 고유한 이름'2. Root Documents 가져오기API URL : https://mwu1.notion.edu-api.programmers.co.kr/documentsmethod : GET전체 Document의 구조를 트리 형태로 가져옵니다. Response의 형태는 아래와 같습니다.[ { "id": 1, // ..

export default function SidebarPage({ $target, initalState }) { this.state = initalState const $page = document.createElement('div') $page.innerHTML = 'sidebar' $target.appendChild($page)} 저번 시간에 이어서 상태를  this.state = initalState 로 만들어서 사용합니다. 이를 통해 컴포넌트 내부에서 상태를 일관되게 관리할 수 있습니다. map함수를 통해 state의 제목과 번호를 을 추출해서 를 통해 화면에 띄우겠습니다.export default function SidebarPage({ $target, initalStat..

오늘은 노션 클론 코딩을 하면서 자바스크립트의 crud를 이용해서 만들어보는 과정을 해보겠습니다.순수하게 바닐라 자바스크립트를 통해서 개발하기 때문에 확실하게 도움이 많이 될것 같아서 블로그를 작성하면서 만들어보겠습니다. 우선 만들기 전에 기본 세팅을 하는 과정을 하겠습니다.vscode를 실행하고 index.html파일과 src폴더를 만들고 그안에 main.js파일을 만들고styles 폴더안에 style파일을 만들고 index.html 파일에 경로를 설정하는 과정을 하겠습니다.또한 확장 프로그램중에 prettier를 설치하고 .prettierrc파일을 만들어주고 이렇게 설정을 하면 기본 설정은 된것 같습니다.  확장 프로그램중에 Live Server은 설치하면 Go Live를 클릭하면 바로 서버를 실행하..