๋ชฉ๋กProject (9)
let's get IT with DAVINA ๐ป
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.

ํ๋ก์ ํธ๋ฅผ ํ๋ฉฐ css๋ก ๊ธฐ๋ณธ ํ์ ๋ค ์กํ๊ณ ๊ธฐ๋ฅ ๊ตฌํํด๋ณผ๋, ๋ฐฑ์ค๋ api๊ฐ ์์ฑ์ด ๋๋์๊ฑฐ๋ ๋ฏธ๋ฆฌ ๋ก์ปฌ์คํ ๋ฆฌ์ง์์ ํต์ test๋ฅผ ํด๋ณด๊ณ ์ถ์ ๋๊ฐ ์์๋ค.. terminal npm install json-server //์ฌ์ฉํ์ง ์๋ ํฌํธ๋ฒํธ๋ก ์ํ๋ ๋ก์ปฌ ์คํ ๋ฆฌ์ง ์์ฑ json-server --watch db.json --port 3002 db.json { "login" :[], "signup" : [] }

ํ๋ก์ ํธ๋ฅผ ํ๋ฉฐ ๋ชจ๋ฌ์ฐฝ์ ๋์ธ ๋, spacebar์ ๋๋ฅผ๋๋ง๋ค ์๊พธ ์คํฌ๋กค์ด ๋ฐ์ํ์ฌ ๋ถํธํด์ ๋ชจ๋ฌ์ฐฝ์ด ๋จ๋ฉด ์คํฌ๋กค ์์ฒด๊ฐ ์๋๊ฒ ๋ฐฉ์งํ๋๋ก ๊ตฌํํ๋ค. utils/useScrollPrevent.jsx ์ฌ๋ฌ ํ์ด์ง์ ์ฐ์ผ ์ ์๋ ๊ธฐ๋ฅ์ด๋ฏ๋ก util์ ๋ฐ๋ก ๋นผ์ฃผ์ import { useEffect } from "react"; const useScrollPrevent = () => { useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;`; return () => { const scrollY = document.body.style.to..

try { await axios({ method: "post", url: `/member/wishlists?hotelId=${id}`, headers: { Authorization: localStorage.getItem("accessToken"), }, }); await axios.post(`/member/wishlists?hotelId=${id}`, undefined, { headers: { Authorization: localStorage.getItem("accessToken"), }, }); } catch (error) { console.error(error); } ๐ซ Error Issue wishlist (ํํธ๋ฅผ ๋๋ฅด๋ฉด ์ฐ๊ธฐ๋ฅ) ์ฒ์์ await axios.post( /member/wishlist..

2023/2/2~2023/2/28 ๊น์ง ์ด ๋ช๋ฐ์ผ๊น? export const getDateDiff = (d1, d2) => { if (d1 !== null && d2 !== null) { const date1 = new Date(d1); const date2 = new Date(d2); const DateDiff = date1.getTime() - date2.getTime(); return Math.abs(DateDiff / (1000 * 60 * 60 * 24)); } }; //์ ์ฉ์? {getDateDiff(checkin, checkout)}๋ฐ

์ฑํค ๋ฐ๊ธฐ Kakao Developers ์ฐ์ ์นด์นด์ค ๊ฐ๋ฐ์ ์ฌ์ดํธ์ ์ ์ํด์ ์นด์นด์ค ๋ก๊ทธ์ธ์ ํ๋ค. ๋ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ด๊ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ถ๊ฐํ๊ธฐ๋ฅผ ๋๋ฅธ๋ค. ํ๋ซํผ ์ค์ ํ๊ธฐ๋ฅผ ๋๋ฅด๊ณ (๋๋ ์น์์ ์ฌ์ฉํ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ web ํ๋ซํผ ๋ฑ๋ก์ ์ ํํ๋ค) ๋๋ฉ์ธ ์ค์ ์ํด์ค๋ค. react๋ฅผ ์ฌ์ฉํด์ ์น์ ๊ตฌํํ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ http: // localhost:3000๋ ์ถ๊ฐํด์ฃผ์๋ค. HTML์ ์ ์ฉ pubilc/index.html head or body ์๋ฌด๋ฐ๋ ์๊ด X ๋๋ head์ ์ ์ฉํด์ฃผ์๋ค. KakaoMap.js ํ์ผ ์์ฑ import React, { useEffect } from "react"; import styled from "styled-components"; const MapContaine..

1 ? "disabled" : null} > โ Count๊ฐ 2๊ฐ ๋๋์๊ฐ๋ถํฐ ๋์ด์ ๋ฒํผ ํ์ฑํ๋์ง ์๊ฒ ๋ง๋ค๊ธฐ

ํธํ ์นดํ ๊ณ ๋ฆฌ list ํ๋ฉด์์ ์ข์์๋ ํธํ ์ด ์ฑ์์งํํธ๋ก ํ์ ํ์ โ BE์์ isLike ์ ๊ฐ์ํ๋๋ช ์ผ๋ก ๊ตฌ๋ถํด์ค์ผํจ ํธํ list ์กฐํํ๋ฉด์์ like๊ฐ ์ ์ญ์ผ๋ก ๊ด๋ฆฌ๋๊ฒ ๋๋ฉด ํธํ ๋ณ "์ข์์" ์ํ ํ์๊ฐ(ํ๊ฐ ๋๋ฅด๋ฉด ์ ์ฒด ์ํ๊ฐ ๋ค ๋ฐ๋๊ฒ ๋จ) ํ๋๋ฏ๋ก ๊ฐ๋ณ ์ํ๋ก ๊ด๋ฆฌ๊ฐ๋ฅํ๋๋ก ์์ ํด์ผํ๋ ์ํฉ ์์๋ฆฌ์คํธ ํ์ด์ง์์๋ ํธํ ํํธ ์ฑ์์ง์ํ๋ก ํ์ ๋ฉ์ธ ํ๋ก์ ํธ๋์ ์ํฉ โ BE์ isLike ๊ตฌ๋ถ์ด ์๋์ด ์์์ผ๋ฉฐ, โ wishlist์์ data์ ๋ณด๋ค์ด ์์์ โ ๋ฐ๋ผ์, ์ข์์๋ฅผ ๋๋ ๋์ง ์๋๋ ๋์ง๋ฅผ ํ๋จํ๋๊ฒ๋ณด๋ค ์์๋ฆฌ์คํธ์ ์๋ ํธํ ์ด ์ ์ฒด๋ฆฌ์คํธ์ ํธํ id๊ฐ๊ณผ ์ผ์นํ ๊ฒฝ์ฐ ์ข์์๊ฐ ๋์ด์๋ ์ํ & ์์๋ฆฌ์คํธ์ ์์ผ๋ฉด ์ข์์๊ฐ ์๋์ด์๋ ์ํ๋ก ๊ตฌ๋ถ 1. WishList data..