교육후 개인공부61 [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. [React] useCallback useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다. useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 하는 것이다. function Component() { const calculate = (num) => { return num + 1; } return {value} } export default Component; calculate 함수를 메모이제이션 하려면 useCallback으로 calculate 함수를 감싸주면 된다. 그리고 calculate 함수가 다시 필요할 때마다 함수를 새로 생성하는 것이 아닌 필요할 때마다 메모리에서 가져와서 재사용하는 것이다. function Component(){ const calculate = useCall.. 2024. 3. 19. [React] useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이 있다. 먼저 useMemo 대해서 파헤쳐보자. 불필요한 리렌더링을 줄여서 성능을 최적화한다 Memo는 memorized를 의미하는데, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다. 동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 맨 처음 값을 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다. 간단히 말해서 자주 필요한 값을 맨 처음 계산할 때 캐싱 해놓아서 그 값이 필요할 때마다 다시 계산을 하는 것이 아니라 캐시에서 꺼내서 사용하는 것이다. 함수형 컴포넌트는 함수다. 함수형 컴포넌트가 렌더링이 된다는 것은 그 함수가 호출된다는 것이고 그때 함수 내부에 정.. 2024. 3. 19. 이전 1 2 3 4 5 6 7 ··· 16 다음