Next.js4 [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. [Next.js] 서버기능 만들려면 전체 폴더 위치에다가 pages폴더 만들고 그 안에 api폴더 만들고 그 안에 test.js같은 파일 만들면 된다. 이런식으로 만들자!! 일단 get요청을 테스트 해보자 export default function handler() { console.log(123); } 코드를 이렇게 입력하고 인터넷주소창에 localhost:3000/api/test 이렇게 입력해보자! 몹시 성공적 export default function handler(req, res) { console.log(123); return res.status(200).json("안녕"); } 이렇게하면 응답까지 해준다!!!! post 서버기능 만들려면 form을 이용하면 된다!!! export default function Write() { .. 2024. 2. 20. [Next.js] useRouter 페이지 이동하는 방법으로 Link말고 useRouter를 쓰는방법도 있다 useRouter는 client component에서 사용할수있다. import { useRouter } from "next/navigation"; let router = useRouter(); 리액트에서 navigate쓰던거랑 방법이 비슷한것 같다. "use client"; import { useRouter } from "next/navigation"; export default function DetailLink() { let router = useRouter(); return ( { router.push("/list"); }} > 버튼 ); } router.back() : 뒤로가기 router.forward() : 앞으로가기 .. 2024. 2. 20. 이전 1 다음
