wa_ter_ve

📌 카카오 로그인 ✅ 로그인 흐름① 사용자가 '카카오 로그인' 버튼 클릭 ② 카카오 로그인 페이지로 이동 (인가 코드 받기)③ 카카오에서 redirect URI로 code 전달④ 프론트가 code를 받아서 → 백엔드로 전달 (API 호출)⑤ 백엔드가 토큰 요청 → 사용자 정보 받아서 회원가입 처리 📍 page > KakaoCallback.jsx 생성 KakaoCallback 함수 작성 {- 백엔드에 코드 전달- 토큰 저장- 로그인 성공 시, 메인페이지로 이동} 📍 App.jsx 라우터 수정} /> [Login 페이지] ↓ (handleKakaoLogin 실행)[Kakao 로그인 페이지로 이동] ↓ (로그인 후 Redirect)[http://localhost:5173/oauth/kaka..

🔎 key={idx}와 key={place.id} 차이점?☆ key={idx} (배열 인덱스 사용)→ 배열의 각 요소를 반복할 때 인덱스를 key로 사용하는 경우 {[...Array(5)].map((_, idx) => ( )} ☆ key={place.id} (고유한 ID 사용) → place.id는 각 아이템에 고유하게 할당된 ID로, 이 값은 데이터베이스나 API에서 제공되는 유일한 식별자 🔎 하단 스크롤바 안 보이게 하는 법 📍tailwind.config.jsimport plugin from "tailwind-scrollbar-hide";... plugins: [plugin],}; 📍Mainpage.jsx"scrollbar-hide" 추가...... 💭 추가 지식Tailwind ..

메인페이지에서 만들어 놓은 사이드바 UI를 가져와 사용하려고 했으나, 사이드바의 ✈️(mainModal),❤️(bookmarkModal) 버튼을 누르면 메인페이지의 지도 기반으로 모달이 작동되어야 함.따라서 기존대로 페이지 이동없이 사이드바 기능을 적용하면 문제가 생김.또한, 사이드바 코드가 다른 페이지에서도 쓰이려면, toggleMainModal, toggleBookmarkModal 사용 불가능 👉 버튼 누를 때 URL을 메인페이지로 이동시키면서, 쿼리나 경로를 통해 어떤 모달 열지 알려주는 방식으로 해결해보기 / → 메인페이지 기본/?modal=main → 메인페이지 + 장소 검색 모달 열기/?modal=bookmark → 메인페이지 + 찜 모달 열기/?modal=notification → 메인페이..

lucide-react icons 설치➡️ https://lucide.dev/$ npm install lucide-react jsx 파일에 import 해서 사용.import { '사용할 아이콘' } from "lucide-react"; 토글 1개 → 2개...const [isModalOpen, setIsModalOpen] = useState(false);... setIsModalOpen(false)} />⬇️⬇️⬇️...const [isMainModalOpen, setIsMainModalOpen] = useState(false);const [isBookmarkModalOpen, setIsBookmarkModalOpen] = useState(false);... setIsMainModalOpen(fal..

🚩 ‘활동 기록’ 글자 아래 점선과의 간격 늘리기→ mt 조절 해봤지만, 적용이 안 됨.지금은 border가 h2 자체에 있어서 글자와 선 사이에 여백이 안 생기게 되어 있음🚀 해결 방안pb(padding-bottom) 를 조절해 주면 됨! 🚩 프로필 부분이랑 활동기록 부분 사이에 여백을 조금 더 늘리기 ✅ 방법 1: pl-10 → 더 큰 값으로활동기록 부분쪽 여백을 늘리고 싶으면:↓pl-16 = 4rem = 64px(원래는 2.5rem = 40px이었음 ✅ 방법 2: 프로필 섹션에 오른쪽 마진 추가↓mr-6 = 1.5rem = 24pxleft-5와 함께 쓰면 더 자연스럽게 간격 조절 가능 max-w-screen-xl: 화면의 최대 너비 설정 (화면이 너무 좁아지면 main 콘텐츠가 더 이상 줄..

✅ 방법: 로컬 전체 초기화 후 다시 커밋깃에 파일들을 업로드 한 게 기록이 다 남는 게 지저분해서 깔끔하게 다시 올리고 싶을 때(이전 커밋 다 날리고 새로운 히스토리 생성)  1️⃣ Git 기록 초기화 $ rm -rf .git2️⃣ 다시 Git 초기화 $ git init3️⃣ 원격 레포 연결 $ git remote add origin https://github.com/~~4️⃣ 파일 추가 및 커밋 $ git add . $ git commit -m "커밋  메시지"5️⃣ 강제 푸시 (이전 기록 삭제) $ git push -f origin main

📌 카카오맵 API 불러오기리액트 카카오맵 패키지 설치$ npm install react-kakao-maps-sd public > index.html카카오 api 스크립트 추가 다운 받은 패키지 import 코드 추가jsx에서 사용법// MainMap.jsximport { Map, MapMarker } from "react-kakao-maps-sdk";// Mainpage.jsximport MainMap from "../components/MainMap";...... 🔐 YOUR_APP_KEY 부분 ← 카카오 개발자 콘솔에서 발급 받은 JavaScript 키로 변경https://developers.kakao.com/카카오 계정 로그인내 어플리케이션 추가 → 생성한 앱 상단에 앱 키 탭 클릭 → Jav..

📌Tailwind CSS 기본 문법 정리 기본 레이아웃 클래스flex : Flexbox 컨테이너화items-center : 세로축 중앙 정렬justify-center : 가로축 중앙 정렬min-h-screen : 높이를 화면 전체(100vh)로 설정w-full : 너비 100%max-w-md : 최대 너비 제한 (md = 28rem = 448px)mx-auto : 좌우 마진을 auto로 → 가운데 정렬할 때 자주 사용p-10 : padding 2.5rem (40px)🧱Margin (바깥 여백)m : 네 방향 모두 마진mt, mb, ml, mr : 위, 아래, 왼쪽, 오른쪽 마진mx : 좌우 마진my : 상하 마진mt-0margin-top: 0pxmt-2margin-top: 0.5rem (8px)mb-..