우선 메인 화면 구성도를 보겠습니다.맨 위에있는 헤더바와 메인 오른쪽에있는 박스들은 라우터 기능을 통해 네비게이션기능을 수행하게하였습니다. 또 헤더바에있는 로그인 버튼을 통해 로그인과 회원가입을 실행할 수 있습니다.세션 기능을 통해 구현을 하였고 로그인을 해야지만 리뷰 커뮤니티 등을 이용할 수 있게 하였습니다.로그인을 하면 세션을 제공받게 되고 로그아웃을 하면 세션을 파기되는 구조로 되어있습니다. 다음은 식당 보기 화면을 살펴 보도록 하겠습니다.화며에 보이는 것처럼 왼쪽 식당 카드들을 볼 수 있는데 식당 카드를 클릭하면세부 정보 보기, 리뷰 작성하기, 지도로 이동하기 기능을 수행할 수 있습니다. 또한 오른쪽에있는 위치갱신을 하게되면지도에 현재 위치에 마크가 생기고 식당 마크를 클릭하게 되면 길찾기 기능을..

이번에는 대학교 캡스톤 수업때 만든 맛집 정보 사이트를 정리해 보았습니다.만들 맛집 정보 사이트는 사용자가 맛집지도를 통해 식당들을 탐색할 수 있고, 식당의 리뷰를 작성 탐색할 수 있으며, 설문조사를 통해 필터링을 통한 개개인의 입맛에 맞는 식당을 볼 수 있습니다.대충 소개 하자면 이러한 기능들을 만들것이며 요구사항을 대략 적어보았습니다. 추후의 기능에 대해서는 나중에 적어보겠습니다. 프로젝트 전체 구성도는 다음과 같습니다.  프론트엔드 개발 도구는 React를 이용할것이면 리액트vite를 이용해 보겠습니다.백엔드 개발 도구는 node.js express를 통해서 개발을 하였습니다.데이터 베이스는 Postgresql을 통해서 개발하였습니다.또한 백엔드 배포는 fly.io를 통해서 배포를 하였고프론트는 v..

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, // ..

우선 components폴더에 NewBtn.js 파일을 하나 만들어서  SidebarPage에서 생성해주도록 하겠습니다. 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 += ` ..