기타
1.react-query-devtools
react query와 함께 제공되는 전용 개발도구로 react query의 모든 내부작업을 시각화하는 데 도움이 되며 문제가 발생할 경우 디버깅 시간을 절약할 수 있다.📍 설치아래 이런 식으로 창이 뜨며 데이터를 한번에 확인 가능하다
2.Postman으로 서버 연결해서 회원가입 조회 로그인 탈퇴 / 게시글 작성 조회 삭제
https://github.com/mieum12/express-basic백엔드: Controller -> Service -> DAO(Repository)프론트엔드: Component -> Hook(State) -> API(HTTP)아이디, 비번을 Body에 J
3.Node.js에서 bcrypt 사용하기
Bcrypt로 비밀번호 암호화 하기
4.useSelector 사용 시 undefined error 해결
💻 components > AppLayour.jsTypeError: Cannot read properties of undefined (reading 'user') 라는 에러메세지가 뜬다!!state를 콘솔로 찍으니 undefined가 떠서 다시 reducer 함수로
5.[인증 작동 원리 정리] 서버 기반 인증 방식(server-side sessions) vs 토큰 기반 인증 방식(authentication tokens)
모든 HTTP 요청은 독립적(stateless)이기 때문에 서버에 요청할 때마다 우리가 누군지 알려줘야한다. 이를 하는 방법 중 하나가 세션이다.사용자가 입력한 아이디와 비번이 맞다면 서버는 세션 DB에 유저 정보를 만든다. 해당 세션에는 유니크한 id가 있다. 그 i
6.Firebase Authentication을 활용한 사용자 관리하기
Firebase 프로젝트 생성먼저, Firebase Console에서 'Web'프로젝트를 생성src>firebase.tsx 파일 생성 후 Firebase Console에서 제공된 Firebase SDK를 복사해서 프로젝트에 추가Firebase Console에서 Fire
7.Mongo DB error: MongoServerSelectionError
요청을 보내면 이렇게 500번 서버에러가 터졌다.이럴 땐 다른 곳에서 몽고디비를 사용했는지 고려해보자.현재 사용중인 새로운 IP만 MongoDB 환경에 추가해주면 해결된다.몽고디비 페이지에 가면 새로운 IP를 추가하라는 메세지가 자동으로 뜬다.그러면 새로 추가하기 누르
8.useSession vs getSession
useSession을 사용하면 즉시 해당 세션과 로딩을 가져오고 세션 데이터가 가져와지면 세션과 로딩을 전부 변경할 . 수있다. 로그아웃해서 세션이 없다면 세션은 변경되지 않는다. 또 로딩도 변경되지 않고 유지된다.getSession은 새 요청을 보내서 최근 세션 데이
9.[미해결🥲] [next-auth] CLIENT_FETCH_ERROR...
넥스트를 사용한 프로젝트를 하던 중 이러한 CLIENT_FETCH_ERROR 에러를 만났다.클라이언트 부분에서는 session이 존재했지만, api route에서는 session을 찾을 수 없었다.넥스트 공식 문서에서는 에러의 이유가 여러가지 있다고 흐리멍텅하게 말해서
10.[Next.js] getStaticProps vs getServerSideProps
next가 사전 랜더링 시 해당 함수를 실핼하게 된다컴포넌트 함수를 호출하기 전에 getStaticProps을 먼저 호출하게 된다비동기식으로 설정할 수 있어서 유용하다넥스트가 해당 프로미스의 수향을 기다린다는 점이 중요✨ 즉 데이터가 로딩될때까지 기다렸다가 이 컴포넌트