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