Next14 App Router react-quill 사용 (build 시 prerendered error 해결)
·
💻 개발 일지/React
react-quill 이란?- html editor를 활용할 . 수있는 라이브러리- 러닝커브가 낮아 많이 사용- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 react-quill 사용방법1. react-quill 설치yarn add react-quill 2. 코드 작성//Next13import ReactQuill from "react-quill";import "react-quill/dist/quill.snow.css";const Editor = () => { const Quill = ReactQuill.Quill;..
Next 로그인 (google provider 백엔드 구현 및 session에 사용자 정보 저장) (feat. next14 app-router)
·
💻 개발 일지/Next
Project Explanation- 2024.07.02 - [next] - Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)에서 구현했던 NextAuth Google Provider를 백엔드로 이동- 코드 수정된 부분만 남겨놓겠습니다 backend 좀 더 공부하고 링크 첨부 예정 Project Folder더보기📦app ┣ 📂api ┃ ┗ 📂auth ┃ ┃ ┗ 📂[...nextauth] ┃ ┃ ┃ ┗ 📜route.ts ┣ 📂login ┃ ┣ 📂googleLogin ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜page.tsx ┣ 📜layout.tsx ┗ 📜page.tsx📦lib ┗ 📜axios.ts📦providers ┗ 📜Sessi..
Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)
·
💻 개발 일지/Next
Project Setting더보기Would you like to use TypeScript? YesWould you like to use Tailwind CSS? YesWould you like to use App Router? (recommended) YesProject Folder더보기📦app┣ 📂api┃ ┗ 📂auth┃ ┃ ┗ 📂[...nextauth]┃ ┃ ┃ ┗ 📜route.ts┣ 📂login┃ ┗ 📜page.tsx┣ 📜layout.tsx┗ 📜page.tsx📦lib┗ 📜axios.ts📦providers┗ 📜SessionProvider.tsx📦src┣ 📂server┃ ┣ 📂services┃ ┃ ┗ 📜userService.ts┃ ┗ 📜auth.ts┗ 📂types┗ ..
api 파일 분리 시 axios의 응답이 console에 안나오는 경우
·
💻 개발 일지/JavaScript
문제상황 분리된 API 파일(StorePostApi.js)에서는 response 로그를 남길 경우 나오지만 react파일(StorePage.js)에서 res 값을 찍을 경우 나오지 않음 // StorePage.js API호출 부분 StorePostApi(data) .then(res =>{ console.log("res",res) if(res){ setUserCheck(true); setTimeout(() => { navigate('/signup/stores/pos'); }, 500); } else{ throw new Error("토큰이 없습니다") } }) .catch(err=>{ console.error('API 호출 또는 토큰 발급 실패:',err) }) 방법 (해결) StorePostApi 함수에서..
React - Recoil 사용 중 놓쳤던 특징
·
💻 개발 일지/React
더보기 Recoil 특징 - 해당 상태를 구독하는 구성요소를 가진 함수가 리렌더링된다. 문제상황 회원가입 후 Recoil을 사용하여 회원의 유무를 판단하고 PrivateRoute와 PublicRoute에서 useRecoilState를 사용했더니 다음 페이지로 넘어가야 되는 부분이 렌더링 되고 나서 PrivateRoute와 PublicRoute가 또 실행되어 원하지 않는 페이지로 이동 과정 1. PublicRoute 와 PrivateRoute 에서 UserStateCheck Recoil 변수를 사용 x => token 값의 유무로 판단 // PublicRoute.js const userCheck = useRecoilValue(UserCheckState) return userCheck ? element : ..
git file 하나만 되돌리기
·
💻 개발 일지/Git
문제상황 오류 수정 중 해결하지 못하고 최초 코드로 돌아가고 싶었다. git pull 을 했지만 최초코드로 돌아가지 못했음 그대로 유지 되었음을 확인 해결 git checkout -- 파일 경로 파일 색상이 변경되고 origin에 있는 코드를 가져왔음
Axios - http -> https 변경 시 오류
·
💻 개발 일지/React
문제상황 SSL 인증서를 붙혀서 통신 URI가 `https://api.salesync.site`로 변경됨 해당하는 URI에 맞춰 JS 요청 엔드포인트 변경 ./src/api/BaseUrl.js 변경 전 const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL; 변경 후 const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL; 오류 배포시 통신 오류가 뜨고 데이터를 조회할 수 없음 분명 `https`로 변경했으나 `http`로 통신이 감 # 해결시도1 😀참조 : [https://velog.io/@shin..
AWS - Terraform
·
💻 개발 일지/AWS
목표 이전에 aws로 배포했던 웹 어플리케이션을 테라폼을 사용하여 인프라를 효율적으로 프로비저닝 참고 https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask 해결 철자 확인! **ERROR Error: creating S3 Bucket (fs-front-bucket) ACL: operation error S3: PutBucketAcl, https response error StatusCode: 403, RequestID: Q4PQR0K6M9SDRYHT, HostID: Sq7CAn32Jz3MrjxBVjabNIE2vKpPzxbDC+iJeV82/vdShgL3f6Xhxrc74BAWn61ecP6H/xRpc+SrROkwGIQMPg==, api error AccessDenie..