캡스톤 설계 [건물별 소통 플랫폼 BBC]/개발 진행 썸네일형 리스트형 Next13 redux-persist 및 인증되었는지 체크 로그인을 완료하여 홈 화면으로 라우팅을 시켰다. 라우팅 혹은 브라우저 새로고침시 이상하게 자꾸 isAuth가 다시 false로 돌아온것이었다. 처음에는 redux 사용에 미숙해 코딩적인 실수 인줄 알고 삽질을 꽤나 했지만 알고보니 redux의 상태는 브라우저가 새로고침도면 초기화 되는 사실을 알게 되었다. 그래서 새로고침시에도 redux의 상태를 유지하게 해주는 redux-persist를 사용하게 되었다. . . . 우선 전면적으로 redux의 store를 뜯어 고쳤다. npm i --save-dev @types/redux-persist store를 뜯어 고치는 김에 reduce도 combinedreducer를 사용해서 차후 여러가지 reducer로 쪼깨게 될 경우를 대비하였다. 그리고 미들웨어를 추가해.. 더보기 모든 요청의 header에 토큰 넣기 위와 같이 axios 인스턴스에 인터셉터를 붙여 모든 요청이전에 header에 토큰을 실어서 가게 된다. 오른쪽 사진과 같이 모든 요청에 Authorizaion이라는 키값에 토큰이 잘 실려 요청이 가는것을 확인할 수 있다. 더보기 로그인 기능구현 어우 오늘도 하루 개갈아 넣었따... 이번 Next13에서 redux 를 도입하면서 삽질을 정말 많이 하게 되었다.. 좋은 양분으로 자라길.. 우선 로그인 기능 구현 이전에 각각의 입력에 유효성 체크와 에러 알림 세팅을 하였다. 그리고 redux를 붙였다. 이미 구성해 놓은 백엔드단 api에 맞혀 작성 했으며 요청후 응답으로 토큰이 오는걸 받아 로컬스토리지에 저장하였다. 그리고 로그인에 성공하여 토큰을 받아오면 isAuth를 true로 바꾸어 준다. 위와 같이 로그인 이전에는 로컬스토리지에 아무것도 없지만 로그인을 하면 로컬스토리지에 잘 저장됨을 확인 또한 redux로 관리중인 상태에서도 초기에는 isAuth가 false이지만 로그인을 하여 토큰을 발급 받으면 isAuth가 true로 바뀐다. 더보기 axios 인스턴스 생성 이제 왼쪽과 같은 fullname이 아닌 오른쪽과 같이 짧게 백엔드 api를 호출할 수 있다. 물론 위와같은 짧은 코드 뿐만 아니라 차후 모든 요청에 jwt 토큰을 헤더에 넣기 위해서 만들었따..! 더보기 성공이나 실패를 알리는 알람 react-toastify 적용 npm install react-toastify Next13 이후 app directpry로 변경된이후 이전 토이 프로젝트에서 사용했던 라이러브리를 적용에 어려움이 많다. 평소 새로운 라이브러리와 에러 사항을 gpt나 bard를 사용했지만 최근 기술에 대해서는 답변이 엉망으로 나왔다. 그래서 구글링을 하던중 react-toastify를 만든 팀에서 운영중인 github 이슈 란에서 이번 라이브러리 도입에 대한 문제를 해결할 수 있었다. https://github.com/fkhadra/react-toastify/issues/963 더보기 유효성 체크를 위한 react-hook-form react-Hook-Form npm install react-hook-form 각 속성마다 register 함수를 붙여 유효성 체크를 해준다. 또한 유효성 체크에서 걸린 경우 하단에 빨간 관련 에러 문구가 나온다. 더보기 Next13 및redux-toolkit 세팅으로 인한 변경사항 우선 간단하게 Next13에 Redux-toolkit을 붙이기 위해 RegisterPage 컴포넌트의 로직을 꽤나 바꾸었었다. . 우선 첫번째로 커스텀 Hook인 InputGrop를 사용하지 않고 개발을 진행할 것이다. 그 이유로 아직 한 컴포넌트당 200줄이 넘어가는 파일이 없기도 하고 프론트 개발이 미숙해 새로운 기술을 금방 금방 커스텀하는것에서 시간상의 문제를 느꼈다. . . . 그로인해 InputGroup을 대신 기본 html 태그인 input의 속성들을 최대한 활용해서 코딩을 진행..! + 아래와 같이 section 태그로 입력한 값도 제출되도록 추가 우선 현재의 UI 이다. 학교 이름을 포함한 회원가입 로직도 잘 작동하여 데이터베이스에 저장됨을 확인 더보기 next13-redux-toolkit,redux-wrapper 세팅 및 회원가입 기능 구현 어우 next13으로 업데이트 된 이후 app directory에서 redux-toolkit을 어떻게 끼워야 하는지 next와 redux 두곳 모두의 공식문서에 없어서 이틀을 꼬박 삽질하며 한참을 구글링 했다... 공식문서에는 언제 업데이트 될랑가.. https://codevoweb.com/setup-redux-toolkit-in-nextjs-13-app-directory/ 기본적으로 위 링크의 정리 자료를 보고 참조 하였다. src폴더 하위에 app폴더와 redux폴더를 두었으며 리듀서 및 thunk함수와 스토어는 redux폴더에서 관리할것이다. 1. Redux-toolkit 설치 npm install @reduxjs/toolkit react-redux next-redux-wrapper npm i ax.. 더보기 이전 1 ··· 5 6 7 8 9 10 11 12 다음
