목록전체 글 (172)

Daily Front_Minhhk

[axios] React 장바구니 기능구현 / CRUD

1. 장바구니 CREATE (post) 백엔드 분이 생성하신 장바구니 명세서에 따라 현 프로젝트에선 리액트 쿠키를 이용해서 로그인 한 구매자만 장바구니 담기를 하기 위해 헤더에 Authorization: cookies.accessToken 을 넣어주고 보낸다. /carts/products/(각각의 상품의 아이디 값) 을 useParams 를 이용하여 아이디를 설정해줬다. const productId = useParams().productId; ++ ( 구매자만 장바구니에 담을 수 있도록 하기 위해 로그인 할 때 받는 롤 값을 redux를 이용하여 store 에 저장한 뒤 SELLER 나 ADMIN 일 땐 담지 못하도록 설정 ) ProductInfo.jsx // axios.post 를 이용하여 장바구니db..
Project 2023. 4. 2. 14:19
[React]react-router-dom/ useNavigate() 값 전달 && useLocation() 값 가져오기

1. 값을 전달 할 페이지에서 useNavigate()를 import 해온다. import { useNavigate } from "react-router-dom" 2. 값을 보낼 컴포넌트 안에 지정해준다. const navigate = useNavigate(); 그리고 첫번째 app.js 에 route 된 페이지 파라미터, 두번째 {state : 값 } 형태로 보내준다. onClick={ } 함수 만들어서 하거나, 현재 프로젝트에서는 axios 로 post로 값을 보내면서, 다음 페이지에 전달하기 위해 사용 했다. navigate("/보낼페이지" , {state : { key : value , key : value ...}}) ex) 보낼 페이지 pay/btnGtp.jsx navigate("/payCom..
Project 2023. 4. 2. 13:00
Redux 데이터 초기화로 인한 해결하기 [redux-persist @reduxjs/toolkit]

로그인을 하여 토큰을 받아 오는 것을 확인 하였고, redux를 이용하여 axios로 post 할 때 dispatch 해주어 isLogin 상태를 true 로 만들어 주었다. dispatch({ type: "USER_ISLOGIN" }); 아래는 redux 파일이다 src/Redux/index.js import { combineReducers } from 'redux'; import userReducer from "./userReducer"; const rootReducer = combineReducers({ // 쓰실 리듀서 페이지 만드셔서 key 랑 값 하시면 될 거 같아요 user: userReducer, }); export default rootReducer; src/Redux/userRedux...
Project 2023. 3. 26. 16:29
[JAVA] 오버라이딩

class Parent{ public Parent( ){ System.out.println("부모 생성자"); } public void fn( ){ System.out.println("오버라이딩 - 부모 클래스의 fn 메서드"); } } class Child extends Parent{ public Child( ){ System.out.println("자식 생성자"); } public void fn( ){ System.out.println("오버라이딩 - 자식 클래스의 fn 메서드"); } } public class Soojebi{ public static void main(String args[]){ Child c = new Child(); // ① c.fn(); // ② } } [출처] 생성자 vs ..
정보처리기사/데일리 2023. 3. 25. 23:49
[몇분만 투자하자~] react-slick 사용하기(리액트 슬라이드,캐러셀)

메인페이지의 캐러셀 구성을 위하여 react-bootstrap 을 적용 해보았지만,, 기존 css 와 전체적으로 다 충돌이 일어났다ㅠ 그래서 찾아 보던 중 💡 react-slick 을 발견했다!! 1. 우선 두가지 패키지를 설치를 해주자!! npm install react-slick npm install slick-carousel 그리고 최상단에 import! // 캐러셀 적용 컴포넌트 import Slider from "react-slick"; // 캐러셀 적용 css 이것도 꼭 import! import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 2. 제일 기본으로 제공하는 캐러셀 예시에서 div 대..
Project 2023. 3. 21. 13:52
react-cookie 를 활용한 로그인,로그아웃(json-server-auth로 test)

로그인 → 우선 리액트-쿠키를 설치 npm i react-cookie 그리고 app.js 나 index.js 에서 CookiesProvider 로 감싸준다. import { CookiesProvider } from 'react-cookie'; export default function Root() { return ( ); } 로그인 폼에다가 셋팅 *import* { useCookies } *from* "react-cookie"; export default function LoginForm() { const [cookies, setCookie, removeCookie] = useCookies(['accessToken']); ... } cookies : 쿠키 가져오는 것 setCookie : 말그대로 쿠키 ..
Project 2023. 3. 16. 14:18
이전 Prev 1 ··· 10 11 12 13 14 15 16 ··· 29 Next 다음