캡스톤 설계 [건물별 소통 플랫폼 BBC] 썸네일형 리스트형 프론트 게시글 작성 UI 기능 구현에 앞서 기본적인 기능을 작성할 수 있는 태그들만 사용해서 글 작성 UI를 만들어보자. import Link from "next/link"; import React from "react"; // TODO 더보기 Home 페이지 UI 및 네비게이팅 "use client"; import { authUser } from "@/redux/features/userSlice"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; export default function Home() { const dispatch = useDispatch(); const isAuth = useSelector((state) => state.persistedReducer.user.isAuth); // 전체 state 를 가져오기 co.. 더보기 프론트엔드 백엔드 vscode 상단바 색 입혀서 구분하기 1. vscode 설정의 작업 영역 들어가기 2. 워크 벤치의 모양 들어가기 3. color Customization 의 setting.json 클릭 4.workbench.colorCustomizations 키값에 자신이 원하는 색상 넣기 최종적으로 백엔드와 프론트엔드에 각각 다른 색상을 입혔다..! 더보기 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 더보기 이전 1 ··· 5 6 7 8 9 10 11 ··· 15 다음
