PWA_PROJECT

PWA(Progressive Web Apps) 웹 사이트를 네이티브 앱 처럼 이용할 수 있도록 하는 구조 및 기술이다. 웹 기술만을 활용하여 보다 유연하고 네이티브 앱과 유사한 웹 앱을 만드는 개념 Google에서 처음 도입 네이티브 앱이란 App Store, Goo

vscode에서 git연결하기 ☑️ gitlab 클론후 vscode 에서 프로젝트 열기 git clone -> Visual Studio Code HTTPS -저장 폴더 선택하기 -main은 쓰지않고, dev브랜치가 실질적인 메인 브랜치역할을함 vscode에서 터미널

✅ PWA의 세가지 요건 manifest.json service-worker.js HTTPS 도메인에서 제공 PWA를 하기 전에 간단하게 동작하는 미니쇼핑몰 앱을 만들어 보았다(드림코딩 참고함) https://ngrok.com/ ngrok 에서 임시 도메인을 만든

드림코딩-PWA 개념과 따라만들기 프로젝트를 따라하면서, 기능코딩까지 완료 되었는데, 마지막 PWA로 변환을 시키면 데스크톱 install버튼이 떠야하는데.. 3시간정도 안되서 계속 찾아보았다. Ready to use offline도 나오는데!!!!!!!!! insta

리뷰등록, 삭제까지 구현하였는데, 큰 실수가 있었다. 바로 업체를 admin페이지에서 딱 하나만 만든체 테스트했었던 것이다 ㅠㅠ 등록도 되고 삭제도 되는거 확인하고 신나서 아 리뷰갯수도 표시하는중이었는데, 그때 이상함을 느꼈다. 그제서야 모든 매장의 리뷰내용과 갯수

\-리뷰가 공백일 때 등록 또는 업데이트를 막고, "내용을 입력해주세요"라는 alert를 띄우는 로직을 추가handleAddReview와 handleUpdateReview 두군데에 공백체크, alert띄우는 내용을 추가한다. handleAddReviewif (!newR

저장버튼, 리뷰추가버튼 총 2개가 있다.현재 화면에 출력되는 모습저장버튼에서 배경을 파랑으로 인라인으로 써준것이 잘 적용된모습그러나 리뷰추가버튼에 variant="primary"는 지정이 안된모습핑크색으로 하고싶어서 Button 컴포넌트에서 variant = "prim

문제 : 리뷰갯수가 새로고침을 해줘야 반영이 된다. 리뷰(1) 개라고 표시 되어있는데, 만약 하나를 더 추가하면 (2)로 변경되어야 하지만, 새로고침을 하기 전까지는 수정된 갯수가 반영되지 않는 문제가있다. 1. ShopDetailNavigation 컴포넌트 수정

admin 리뷰관리 페이지에서 작성자, 매장명, 평점이 안나오고 내용만 나오는중. 내용외의 속성도 화면에 출력되도록 review에 속성 추가하고 화면에 출력해야 한다. +참고) 작성자는 아직 login 로직이 구현되기 전이므로 완료이후에 기능 추가할 예정 [id]

이제 망고가 남긴 댓글은 mango라고 보이고 cherry가 남긴 댓글은 cherry라고 표기가 된다. 이건 홈페이지

관리자페이지 리뷰관리에서 삭제권한 없애기 개발관점이 아니라 사업관점에서 보았을때, 매장에서 내가 남긴 리뷰를 마음대로 삭제한다면 그 매장뿐만 아니라 해당 플랫폼의 신뢰도가 낮아질것이다. 그래서 관리자페이지에 있던 삭제기능을 없애고 대신 삭제요청 으로 대체하여, 플랫폼

git stash를 오해함 git stash라는 명령어가 단순 저장 인줄 알았는데, 그게 아니라 현재 작업 중인 변경 사항이 임시로 저장되고, 작업 디렉토리가 이전 상태로 돌아가는것이었다. 그걸 모른채로 사용해서, 이전버전으로 코드가 변경되고 당황했다. 임시 저장된

처음에는 saveReview함수를 만들어두고, handleAddReview에서 그것을 불러서 사용하는 형식이었다. 기능적으로는 문제가 전혀없었는데, 총댓글수 데이터를 새로고침없이 불러오는 기능을 추가하다보니 기존 기능도 수정이 필요했다. 두개의 기능은 동일하다.

localStorage에 수정사항이 반영이 안되는 문제가 있는것 같으므로 이 부분 수정admin페이지 잘 작동하는지 테스트하던중에,리뷰 수정 후 저장하는 순간에는 화면이 바뀌는데, 새로고침하면 다시 수정전 화면으로 돌아오는 문제가 있었다. localStorage를 확인

const users = JSON.parse(localStorage.getItem("users") || "\[]");users.push(newUser);localStorage.setItem("users", JSON. stringify(users));: JavaScrip

페이지 들어갔을 때 처음 들어갔을 때 관리자 패널이 자동으로 열림\-> 닫혀져 있는 상태가 디폴트 값이 되도록 관련코드 찾아 수정export default function AdminLayout({ children }) { // isOpen 상태의 기본값을 false로

회원가입 -> 일반사용자 / 관리자 가입페이지 구분하기관리자 가입 요청 후 승인관리자로 가입하려면 관리자 승인이 필요하도록 한다.사용자가 관리자로 가입 요청을 하면, 관리자가 이를 검토하고 승인해야만 관리자로 전환된다.페이지를 새로 추가할까도 고민하다가, 다른 팀원이

SVG(Scalable Vector Graphics)는 벡터 기반의 이미지 포맷.이미지를 수학적인 좌표, 선, 도형으로 표현해서, 확대하거나 축소해도 깨지지 않고 선명하다.카카오, 네이버, 구글 로그인 기능은 추후에 구현하고, 그전에 UI만 수정하기로 하였다. 그런데

☑️admin/shops/Page.js☑️RegisterShopModal.js 매장 이미지 첨부파일 업로드와 디자이너 프로필 이미지 업로드는 수정완료둘 다 파일 첨부를 통해 이미지를 업로드하고, 브라우저에서 미리보기를 제공하는 로직을 사용한다.✔️파일 첨부 필드 사용:

이벤트 우측상단에 이벤트 기간중인지 확인 할 수있는 상태표시가 되어있는데, 방법은 두가지였고 각각의 장단점 및 특징을 알아보고 더 효율적인 방법을 택하였다.1.EventModal에서 status를 계산하여 저장:이벤트가 생성된 이후 상태가 변경되지 않아도 되는 경우.예

handleAddDesigner 에 코드추가함.. shops\[id]\reviews // 로컬스토리지에서 예약 내역 불러오기 // 현재 매장에서 예약했고, 예약 상태가 "예약 확정"인 경우 확인 지금까지, reservation 에 shopId가 없어서, 이 로

1장 등록 시:단일 이미지 URL 또는 파일을 저장.예: image: "image-url.jpg"여러 장 등록 시:이미지 URL 또는 파일의 배열을 저장.예: images: "image1-url.jpg", "image2-url.jpg", "image3-url.jpg"1

예약 관리 페이지에서 사용자가 예약을 취소할 수 있는 기능을 추가하여, 예약 상태를 "취소 요청"으로 변경하고 취소 사유를 입력받도록 구현해보았다. ☑️user 단에서 취소 요청하기 예약 상태에 "취소 요청"을 추가하여, 사용자가 취소 요청을 할 수 있도록 구현했다

회원가입 모달(SignUpModal) : 사용자정의 React 컴포넌트 **사용자가 입력한 정보를 기반으로 유효성 검사를 수행하고, 로컬 스토리지에 사용자 정보를 저장하는 기능 ** SignUpModal도 React에서 제공하는 기본 컴포넌트인가? 아니다. 사용자정의

대표로고가 없어서, 임시로 이미지 하나 만들어서 로고 자리에 img 추가해주었다. 그런데 문제가 img 아래에 홈이름이 출력되어서 img 오른쪽에 글자가 출력되도록 수정해주었다.수정한 방법은 태그와 텍스트를 가로로 정렬하기위해 Flexbox를 사용했다. classNam

버튼을 누르면 isOpen을 true로 바꿔 채팅창이 열림× 버튼 누르면 다시 닫힘클릭 시 FAQ 목록을 열거나 닫음질문 클릭 시 자동으로 메시지 입력 → 챗봇 응답 생성사용자가 메시지를 입력하면 메시지를 추가하고,0.8초 후에 봇 응답(botResponses)을 찾아

마이페이지 화면 수정 예약 내역 확인 부분 수정하기마이페이지에 내정보, 포인트, 예약 내역 세가지 정보가 나오는데, 예약내역 부분이 짤리는 문제 -> 이부분 수정하기 ✔️ max-w-3x1 에서 5x1 로 수정하여 width 크기 키우기 ✔️designerName 만

➡️Next.js -> Android(with Capacitor) 20버전 이상이어야 작동함APK 파일로 만들수 있는지 자료 조사 및 시도아직 성공을 못해서 내일 이어서 할 계획 => 일단보류✔️capacitor 설정1\. capacitor 설치npm install @

현재는 더미데이터가 출력되고 있음 -> 현재 로그인한 유저의 정보 (이름, 이메일, 연락처)가 출력되도록 수정하고, \-> '수정하기' 기능 추가하여서 유저 이름, 이메일, 연락처를 수정한 값이 localStorage에 다시 반영되도록 하기.기존코드에 예전에 만들어둔

더미데이터 tempInfo 와 userInfo 키가 있었는데, 그것을 없애고, 현재 로그인한 CurrentUser 키로 연결하고, CurrentUser의 내정보(이름,이메일,연락처) 가 바뀌면 users 키값도 바뀌도록 수정함조금 헤맸던 부분중에 하나가, SignUpM

\-1. shop.facilities 배열의 각 항목을 순회하며 span 태그로 감싸서 렌더링한다.\-2. 각 항목에 고유한 key를 부여하여 React가 효율적으로 렌더링을 관리할 수 있도록 한다.\-3. 마지막 항목이 아닌 경우, 항목 뒤에 공백(\\u00A0)을

\-> 이름 값은 나오는중\-> id 값 불러오기 \-> users 에서 가져오는 로직 만들기\-> useEffect 하나로 합치기이 부분이 출력되는 이유는 localStorage의 currentUser 객체에 id 값이 있기 때문이다.currentUser 상태 선언현

예약할때 예약자 성명, 연락처 칸 -> 삭제Unhandled Runtime ErrorError: localStorage is not definedNext.js(또는 React SSR 환경)에서 서버사이드 렌더링 시 localStorage를 사용할 수 없기 때문에 발생하

이 부분이 web 에선 잘 나오는데, 모바일에서 보면, 가로스크롤이 생겨서 사용자가 불편하다. 모바일로 볼때는 가로 스크롤을 없애고, 큰div 안에 예약내역이 간단히 나오도록 하고싶었다. 혹시 화면 사이즈에 따라서 테이블 스타일이 카드형으로 나올 수 있는지 방법을 찾아

🛠️ 기능 개선 개발기록 – 예약 취소 로직 개선 📌 기존 문제점 취소 사유 미노출 문제 마이페이지에서 사용자가 '취소하기' 버튼을 누를 경우, 취소 사유 입력 모달이 뜨지 않고, 바로 취소 요청 상태로 변경됨. 취소 요청 함수 중복 동일한 기능을 수행하는

이 프로젝트가 PWA로 구현하고 있던 거였는데, 혹시 관련한 제약 사항이 있을지 찾아보았다. PWA(Progressive Web App)로 개발되었다고 해서 백엔드를 붙는 데 제약이 되는 건 거의 없지만, 오프라인 기능과 서버 간 데이터 동기화, 인증 보안, 캐싱 정책

Hydration 이란? > Client에서 렌더링된 React 애플리케이션이 server에서 렌더링된 HTML과 일치하도록 동기화하는 과정이다. Hydration 오류는 이 두개가 각각 렌더링한 HTML이 불일치할때 발생한다. Hydration 에러 ngrok으로

Prisma Data Modeling 란? Prisma Data Modeling은 schema.prisma 파일에서 데이터베이스 구조를 코드로 정의하는 것. 👉 즉, 테이블(모델), 필드(컬럼), 관계 등을 코드로 설계하는 단계이다. 🔍 구성 요소 1. Mod

✅ 실전 개발 순서 예시 (Next.js + Prisma + MySQL 기준) | 순서 | 단계 | 설명 | | --- | ---------- | -------

프리즈마 컬럼update, add -db수정하기 개발 중이며 운영은 안 하는 상태일때 ✅ 수정 목표 (예시) user 테이블에 nickName 필드 추가 user 테이블의 password 필드를 pwd로 수정 1️⃣ schema.prisma 수정 model Us

MySQL Workbench에 테이블만 prisma로 만들어둔 상태에서, localStorage 대신 api코드로 수정해보았다. 해야할 것 MySQL user테이블에 더미데이터 insert 하기 localStorage의 user키값중 하나 참고하기 LoginMod

User 테이블의 id 수정여부 확인 id를 userNo 로 바꿔야하는지 한번 찾아보았는데, 국내 공공기업에서는 그렇게 쓰는 경우가 있지만, (id Int @id @default(autoincrement())) 가 가장 일반적인 패턴이며, Prisma, NextAu

관리자로 가입하기 매장주인(관리자)이 가입하는 방식은 일반 유저와는 다르게 운영자가 수동으로 가입 승인 처리를 해주는 것이 일반적이다.(배달의민족 입점사나 당근마켓 동네업체 등록, 네이버 스마트 스토어 입점시 이렇게 한다.) 하지만 지금 프로젝트에는 운영자는 추후에

role을 ADMIN으로 바꾸기 admin으로 가입했을때 role이 admin 으로 바뀌어야 하는데, USER로 저장되는(default)현상 -> ADMIN으로 나오도록 해결함 Prisma 에 enum 추가 enum Role 을 추가하고 USER 와 ADMIN 을 추

'회원가입이 완료되었습니다' 메세지 안뜸 회원가입이 되고 나면 db생성은 되는데, 메세지 출력하는 코드는 있는데, 그게 작동하지않는 문제가 있음. onClose(); 주석처리하기로 해결완료 이게 있어서, 가입완료 메세지가 나오기도 전에 닫혔던 것임. 로그인

Admin테이블이 필요한지? 권한에 대한 고민을 함. 지금은 user테이블에서 role컬럼을 추가하고, 회원가입시, USER/ADMIN을 구분하는 구조인데. 다른사람들이 한 프로젝트를 참고하니 ADMIN 테이블이 따로 있어서, 이처럼 해야하는지 사례들을 찾아보았다.