교육후 개인공부/React18 [Next.js] 리덕스와 장바구니기능 쇼핑몰사이트 거의 마무리된것 같다. 장바구니 기능 구현완료다!!!! store.js import { createSlice, configureStore } from "@reduxjs/toolkit"; const initialState = { value: { email: "snrnsi", pw: "123", }, }; const LoginState = createSlice({ name: "login", initialState, reducers: { //로그인한 유저 변경되는게 들어가야한다. setLogin: (state, action) => { state.user = action.payload; }, setLogout: state => { state.email = null; state.pw = null; }.. 2024. 4. 12. [React] Suspense React.Suspense Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 react에 내장되어 있는 기능이다. const SomeComponent = React.lazy(() => import('./SomeComponent')); lazy를 통해 import 하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 로딩되는 시간동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 바로 Suspense이다. data fetching 과정이 이루어지고 컴포넌트가 마운트 되도록 하고 그 시간동안 로딩 화면을 보여주도록 Suspense를 활용할수 있다. Suspense component에.. 2024. 4. 3. [Next.js] 리덕스와 자체 로그인연결 1. 일단 store를 만들었다 redux/store.js import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit"; const initialState = { value: { email: "snrnsi", pw: "123", }, }; const LoginState = createSlice({ name: "login", initialState, reducers: { //로그인한 유저 변경되는게 들어가야한다. setLogin: (state, action) => { state.user = action.payload; }, setLogout: state => { state.email = null; state.pw = null; .. 2024. 4. 3. [Next.js] Oauth와 자체 로그인 같이 구현 자체 로그인구현하는데 몇일이 걸린지 모르겠다..... 그래서 결국 해낸거같아서 내자신에게 아주 칭찬해!!!!!!!!!!!!!! 몽고DB를 연결해서 구현했는데. 왜 계속 console.log(요청.body)하면 아무것도 안잡히지 하면서 많이 찾아보고 했는데 원인을 알았다. 가장 큰 이유는 axios를 이용해서 post로 데이터를 보내줄때 body를 제대로 안보내줬던것 같다. 이게 가장 큰 문제였던 것으로 예상된다. 그래서 axios .post("/api/auth/login", body) //.then(res => console.log(res.data)) .then(res => { setEmail(res.data.email), setPw(res.data.pw), alert("로그인성공"), router.pu.. 2024. 3. 23. 이전 1 2 3 4 5 다음