전체 글 75

DOGO PROJECT_005

### 주요 특징 1. **Props 사용**:    - `role` prop을 받아서 사용자의 역할에 따라 다른 메뉴를 표시합니다. `role`은 `'business'` 또는 `'user'` 중 하나입니다. 2. **Router 사용**:    - `next/router`를 사용하여 페이지 내비게이션을 처리합니다. 각 메뉴 항목을 클릭하면 해당 페이지로 이동합니다. 3. **메뉴 배열**:    - `businessMenu`와 `userMenu` 두 개의 배열을 정의하여, 각 역할에 따른 메뉴를 관리합니다.    - `businessMenu`는 호텔 관리, 정책 관리, 객실 관리, 예약 관리, 문의 관리 등이 포함됩니다.    - `userMenu`는 내 정보, 예약 내역 등이 포함됩니다. 4. **동..

프론트엔드 2025.01.08

DoGo PJ _ 002

페이지 구성 회의프로젝트의 페이지별 구성과 각 페이지에 포함될 주요 기능📌 Main 페이지카테고리, 테마, 인기, 최근: 사용자 관심도에 맞춘 콘텐츠 제공.로그인: 로그인/회원가입 접근 경로 제공.검색: 키워드 기반 검색 기능.Navigator: 주요 페이지로 이동하는 네비게이션 UI.광고: 배너 광고 영역.📌 카테고리 상세카테고리 클릭 시 관련 콘텐츠 상세보기.정렬 옵션 제공: 이름, 가격, 지역별 정렬 가능.콘텐츠 필터링 기능.📌 게시물 상세게시물 내용: 상세한 텍스트 및 이미지 제공.댓글 및 좋아요 기능.공유 버튼: URL 복사 또는 SNS 공유 기능.📌 객실 상세 (모달)상세 설명: 가격, 위치, 옵션 등의 객실 정보 제공.리뷰 및 사진 갤러리.예약 기능: 객실 선택 후 예약 가능.📌 로..

프론트엔드 2025.01.02

Trouble Shooting

아니 잘되던 코드가 갑자기 안되다니... 이게 말이야 방구야?라고 생각하고 또 다시 쓴 코드들을무한으로 ctr+Z ...그래도 그래도오류를 잡지 못했는데..???????????????????????????????????????????? 내 코드들은 진짜 해만 지면 안되는건가..???? -----------------------------------------> 진짜 갑자기 안되는...데...?    TS(TypeScript)에서 폴더구조는 중요한데내 Font 폴더는 Public 안에 있었는데, App 폴더 안으로 들어가야한다고 했다...끄..ㅌ...이게..진정..끄 ㅌ 주말동안 코딩을 못했는데 저딴게 해결방안....Next의 폴더구조는 됫다가 안됫다가 하는거같다.맥북을 살까 싶기도하고? 다시 한번 꼼꼼히..

프론트엔드 2024.12.30

2024.12.27

Trouble Shooting  Q. 다크 모드를 적용 했을떄, 왜 헤더에 있는 글씨가 안보이는 걸까? 백그라운드 비디오는 왜 어두워지는거지? →header와 Background에 {theme use} 사용해보기→ 수정중에 또 다른 에러 발생 Q. 맥시멈 콜? 왜 yarn dev가 안될까? 에러코드 : ⨯ RangeError: Maximum call stack size exceeded at Object.hasOwnProperty () digest: "2662428016" GET / 500 in 2033ms 여기서 잠깐 500 Error 란?보통 위와 같은 화면을 보여주면서 원하는 문서로 넘어가지 않는 현상.사이트 자체의 에러로 원인은 다음과 같다.서버 사용량의 폭주로 인해 서비스가 일시적으로 중단된 것 ..

프론트엔드 2024.12.27

2024.12.26

Trouble Shooting`$ npm run dev > my-app@0.1.0 dev > next dev --no-turbo /c/Program Files/nodejs/npm: line 65:  1481 Segmentation fault      "$NODE_EXE" "$NPM_CLI_JS" "$@"``$ next dev error Command failed with exit code 3221225477. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. Segmentation fault ` 이건 뭐길래내가 아예 프로젝트를 할 수 없게 만드는 걸까?``--------------------> 해결방법 ..

프론트엔드 2024.12.26

2024.12.24

1. 프로젝트 소개이 글에서는 Next.js, React Query, Riot Games API를 활용해 리그 오브 레전드의 챔피언 로테이션 페이지를 구현하고 배포 환경에서 발생한 문제를 해결하는 과정을 공유합니다.2. 주요 기술 및 구현 목표사용된 기술Next.js 13: 최신 React 기능과 SSR/ISR 지원.React Query: 클라이언트 상태 및 API 데이터 관리.Riot Games API: 로테이션 데이터 및 챔피언 정보를 가져오기 위한 API.TypeScript: 데이터 구조를 명확히 정의하여 안정성 확보.Tailwind CSS: 빠르고 유연한 스타일링.구현 목표Riot API를 통해 챔피언 로테이션 데이터를 가져와 UI에 표시.에러 처리, 로딩 상태 관리, 다크 모드 지원.배포 환경에..

프론트엔드 2024.12.24