bloomCode

Next 팀 프로젝트 협업 중  Naver 소셜 로그인 구현 부분에서next-auth의 NaverProvider에서 오류가 발생하였다. [auth][cause]: OperationProcessingError: "response" body "expires_in" property must be a positive numberNaverProvider 부분에서 response로 가져오는 expires_in의 타입에 문제가 있어 보였다. 해당 문제를 깃허브와 구글링을 통해 찾아보다가 제일 정리가 잘 되어있는 블로그를 발견함!참고 블로그 :https://jacob.kim/blog/next-auth-expires-in/ko해당 블로그를 보니 네이버 측에서 OAuth 2.0 스펙을 준수하지 않고, expires_in변..

getGroupMemberFetch함수는 api 요청을 통해 가져온 결과를 바로 setState를 통해 상태를 업데이트한다 해당 함수를 useEffect내에서 함수 호출을 통해 사용하니 무한렌더링이 발생해 터미널이 요동치기 시작했다. 일단 문제가 발생하는 순서의 원인은 이렇다. getGroupMemberFetch 함수 내에서 setUserGroups를 호출하여 userGroups 상태를 업데이트. userGroups가 의존성 배열에 포함되어 있기 때문에 상태가 업데이트되면 useEffect가 다시 실행. 다시 실행된 useEffect에서 getGroupMemberFetch 함수를 호출하게 되고, 이로 인해 다시 setUserGroups가 호출되어 상태가 업데이트. 상태가 업데이트되면 다시 useEffec..

React 프로젝트에서 잘 실행되었던 mongoDB 연결이 갑자기 오류가 발생했다. chatGPT 달려가 오류 해결 방안 좀 알려 달라 했지만 대충 해드렸습니다를 시전했다.. 그래도 힌트로 DNS 오류라는 것을 명시해 주어서 mongoDB 쪽 권한 문제나내 네트워크 문제라는 것을 인지 할 수 있었다. 구글링을 통해 바로 해결! 와이파이 고급설정에서 8.8.8.8 DNS 서버를 입력해 주면 해결할 수 있었다. https://stackoverflow.com/questions/54484673/error-querysrv-enodata-mongodb-tcp-blog-cluster-0hb5z-mongodb-n et-at-queryreq

강의를 들으며 jest로 테스트코드를 작성중 SyntaxError: C:\Users\jh\Desktop\dutchpay-app\src\components\CreateGroup.spec.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (7:12): 라는 오류가 발생했다. const renderComponent = () => { //render 함수('렌더링할컴포넌트') render() const input = screen.getByPlaceholderText('2022 제주도 여행'); const saveButton = screen.getByText('저장'); const errorMessage = screen.queryByTe..

현재 next 13 버전으로 개인 프로젝트를 진행 중이다. postList 들 중 하나의 post를 누르면 post의 detail페이지로 이동하게끔 구현하는 도중 detail페이지에서 해당 data를 어떻게 가져올까 하다. postList에서 props를 통해 가져오는 방식으로 구현하기 위에 link태그 안에 props를 넣을 수 있을까 했는데 넣을 수 없다는 오류가 발생했다. 그래서 link 태그안에 quey속성을 이용해서 데이터를 전달하고 받는 쪽에서는 next/louter를 사용해서 받을 수 있다고 하여 시도해 보았지만 13 버전부터 next/louter가 next/navigation으로 업데이트가 된 것 같았다. (13버전에서는 next/router 가 사라지고? next/navigation을 사..

이미지를 저장하기 위해 클라이언트에서 formdata에 데이터들을 넣어주었다. 서버에서 formdata를 확인하고 postgreSQL 데이터베이스에 저장하기 위해 multer 라이브러리를 사용하였다. 공식 사이트 https://github.com/expressjs/multer/blob/master/doc/README-ko.md any속성을 사용하게 되면 아무런 제약 없이 모든 파일을 허용한다는 것인데 나중에 문제가 될 것 같았다;; (마치 나의 any스크립트처럼) multer라이브러리를 사용하였는데 이렇게 imageFile 하나와 여러 개의 string 데이터들은 어떻게 multer를 사용해서 구현해야 하는지 몰라서 몇 번의 시도 끝에 gpt의 도움으로 해결하였다. 이렇게 stroage와 destinat..

클라이언트에서 로그인한 후 쿠키에 token을 저장하고 token을 통해 서버에서 유저를 확인하기 위해 쿠키를 서버에 보내는 과정에서 서버에서 쿠키를 못 읽는 상황이 발생했다. 일단 쿠키를 안전하게 서버로 보내기 위해서는 axios에 withCredentials 설정을 true를 해줘야하며 서버에서도 설정을 해줘야 하는것으로 알고 있었다. 문제는 어떻게 하는지 모름 그러다가 문뜩 강의에서 서버쪽 쿠키설정을 했던게 생각이나서 찾아보니 cookie-parser 라이브러리를 통해 해결했던 문제였다. (정말 기억력 무지 막지하다);; express를 통해 cookieparser사용하겠다고 해주면 끝! 이제 잘들어오는 것 같다! cookie-parser 깃헙 주소 https://github.com/expressj..

평소와 같이 코드에 수정내용 git add . 와 git commit을 시도했는데 다음과 같은 에러가 발생했다. fatal: cannot lock ref 'HEAD': unable to resolve reference 'refs/heads/main': reference broken 암튼 HEAD broken이라길래 머리에 문제가 생긴 것 같았다.;; git log 찍어보니 fatal: your current branch appears to be broken 해당 에러도 발생 검색을 통해 여러 방법을 시도해봤는데 해결되지 않았다.. https://burning-camp.tistory.com/20 https://www.reddit.com/r/git/comments/lgovpv/how_to_deal_with_..

next.js 강의를 듣다 페이지를 이동시키기 위해 useRouter를 사용하였다 그러다 갑자기 error node_modules\next\dist\client\router.js (146:14) @ useRouter -error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted 에러가 발생하였다 일단 강의 해결방법이 게시판에 없어 gpt에게 곧장 물어보았다. 일단 오타확인하고 아니면 다시 설치해 봐 그래도 안되면 캐시 삭제 하라는 건데; 보통 이런 경우는 자기도 모른다는 결론;; 구글링을 해보니 https://nextjs.org/docs/messages/next-router-not-mount..

CSS 스크롤 스냅 프로젝트에서 유튜브 쇼츠 형식의 스크롤로 게시글을 보여줘야 하는 부분이 있었다. 유튜브에서는 CSS Scroll-Snap 기술을 사용한 것 같아 도입해 보았다 CSS 스크롤 스냅은 스냅 위치로 이동 및 스크롤 동작을 제어하는 ​​기능이 포함된 CSS 모듈이며.Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있다. 스크롤링은 사용자와 웹 콘텐츠 간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나주요 콘텐츠의 일부만 보이기도 한다. 하지만 미리 설정한 위치로 이동한다면 자연스러운 스크롤 움직임과 함께 사용자 경험은 더욱 향상될 수 있으며. CSS Scroll snap 모듈을 사용하면 스크롤 동작을 정의하기 위한..