바보일기15

• Failed to serialize user into session passport-local 로그인을 구현하고 나서.. jwt로 유저인증을 처리하려고 했는데 계속해서 Failed to serialize user into session 에러가 났다. session:false를 줬는데도 자꾸만 에러가 나서 (에러나는 코드) router.post("/login", function (req, res, next) { passport.authenticate( "local", //JWT를 사용할 것이므로, 세션을 사용하지 않는다. { session: false }, 아 이럴때는 현자들의 코드를 보자 싶어 깃허브 쇼핑을 갔다가.. req.login을 할 때 false를 주는 것을 발견 return req.login(user, { session: false }, (loginError).. 바보일기 2023. 1. 23.

• 

  배포 중 axios 의 CORS 오류 Axios와 Express의 cors에서 POST 요청이 충돌하고 있다. axios설정과 서버의 index.js에서 cors 설정을 모두 바꾸어 주어야 한다.. 리액트에서 AXIOS 요청을 보낼 때 크리덴셜을 true로 하고, 백엔드를 설정했는데 그때마다 다른 오류를 만났다 ㅠㅠ 구글링한 결과를 따라 아래 코드를 사용하였더니, 와일드카드 에러가 남았다. app.use( cors({ origin: "*", // 출처 허용 옵션 credential: "true", // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근 }) ); true로 바꾸면 된다는 말이 있어서 해보았는데 해결이 되지 않음.. app.use( cors({ origin: true, credential: true, }) ); true를 문자열.. 바보일기 2023. 1. 21.

• 

  [netlify] - 새로고침 에러 React앱을 배포하고 난 후, 호스팅된 페이지에서 메인 페이지가 아닌 /contact 등의 하위 페이지에서 새로고침을 하면 404 에러가 뜨는 것을 발견했다. Router 설정상 리액트의 첫 페이지 url은 '/' 이다. 이곳에서 index.html을 읽기 때문에, '/' 의 페이지가 index.html로 지정되어 있는 것이나 마찬가지다. 그러나 라우팅된 페이지로 이동했을 경우 각 url에 맞는 별도의 파일이 존재하는것이 아니기 때문에, 404 에러를 띄운다. (리액트는 index.html 하나로만 동작하는 SPA이므로..) 따라서 어떤 경로로 접속하든 index.html을 보내주세요~ 라는 코드를 추가해야 한다. public 폴더에 _redirects 라는 이름의 파일을 생성한다. 확장자는 없다. 그.. 바보일기 2023. 1. 15.

• [React] Cannot read properties of undefined / useState의 값이 불러오기 전에 렌더링됨 1. 옵셔널 체이닝 (?연산자) 2. && 연산자 3. if문 을 써도 Cannot read properties of undefined 오류가 해결되지 않는 경우가 있다... 3개를 다 써도 안되어서 삽질하던 와중에 발견한 방법. useState의 초기값을 null로 주면 말끔히 해결된다. useState([]) 도 안되고, useState('')도 안된다. 무조건 NULL이어야 함. useState(null); 바보일기 2023. 1. 10.

• 

  The bucket does not allow ACLs Node.js 코드를 통해 버킷에 '쓰기' 를 실행하려 했는데, 버킷의 ACL 권한을 설정해주지 않아서 발생한 문제. acl 권한을 허용해주면 된다. 바보일기 2023. 1. 2.

• 

  TypeError: this.client.send is not a function aws Node.js 포스트를 쓰기 위해 테스트 진행 중 만난 에러. aws-sdk와 s3 버전이 맞지 않으면 발생한다. npm install multer-s3@^2 --save 로 버전을 맞추면 해결된다. 바보일기 2023. 1. 2.

• 

  You should call navigate() in a React.useEffect(), not when your component is first rendered. 문제 상황 isAuth를 사용해, 유저가 로그인하지 않은 경우에는 게시물 작성란에 들어가지 못하도록 막으려다 아래 경고를 만났다. You should call navigate() in a React.useEffect(), not when your component is first rendered. 해결 방법 useEffect안에 선언해주라는 뜻이다. 이렇게 해 주면 된다. useEffect(()=>{ if (!isAuth) { navigate('/') } }) 바보일기 2022. 12. 14.

• 

  [node.js Express] code: "LIMIT_UNEXPECTED_FILE" name: "MulterError" message: "Unexpected field" 문제 상황 프론트인 리액트에서 img url을 추출해, base64 파일을 Blop으로 변환한 뒤, 다시 FormData 형식으로 백엔드의 multer에 보내주었다가 만나게 된 에러이다. 파일 크기가 컸다기에는 자그마한 이미지 파일이었기 때문에 서치를 했더니.. 원인 파악 multer 패키지는 input 태그로 파일을 받았을 경우에는 name 을, FormData 객체로 받았을 경우에는 key 값을 통해 업로드된 파일을 식별한다. 이 값을 multer.single("key값") 의 "key값" 에 제대로 넣어주어야 하는데, 그렇지 않아서 발생한 문제이다. 해결 방법 React에서 formData.append(첫번째 인자, file) 에서 "첫번째 인자" 값과, Express의 multer.single(인.. 바보일기 2022. 12. 13.

• 

  throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) / TypeError: Router.use() requires a middleware function but got a Object throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) TypeError: Router.use() requires a middleware function but got a Object 문제 상황, 원인 파악 게시글 작성 router파일을 app.user로 불러오자 뜬 에러. 미들웨어가 없다는둥 휘황찬란한 에러이지만 단순하게 export 해주지 않아서 발생한 문제이다. 해결 방법 바보일기 2022. 12. 5.

• 

  Requtes failed whth status code 504 m AxiosError , ERR_BAD_RESPONSE 문제 상황 node.js Express 서버단에서 router를 사용해 api 요청 라우터들을 효율적으로 관리하려고 파일을 나누자, 프론트에서 보낸 axios 요청을 제대로 받아오지 못하는 문제가 생겼다. 원인 파악 수없이 많은 okky와 스택오버플로우를 참고했는데.. 딱히 아무것도 도움이 되지 않았다;.. 이번에는 오타 문제도 없고, axios버전 문제도 아니었지만 혹시나 싶어서 client에서 npm install axios --save를 해 버전도 업데이트 해 보았지만 그대로였음.. 해결 방법 server.js에서 라우터 미들웨어를 가져와 사용하는 요청 문구를 상단 중반부쯤에 두었는데, 혹시나 하여 맨 아래로 옮기자.. 말끔하게 해결되었다. app.use 라우터 문장은 아래쪽에 있는 편이 나은 듯 .. 바보일기 2022. 12. 1.

• 

  Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 로그인에 성공한 후, 로그인 한 아이디 정보를 Redux에 저장하려고 리덕스 훅을 사용하였더니 다음과 같은 오류가 일어났다. Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of Rea.. 바보일기 2022. 11. 27.

• 백엔드 api 작성 괄호 문제 상황 내 좋아요 리스트를 받아오는것까지는 성공했는데 이상하게.. 메인화면으로 돌아가서 뭔가를 굳이 새로 좋아요를 해야만 리스트가 성공적으로 받아와졌다. 새로고침 해도 db 불러오는 것 뿐이니 멀쩡하게 되어야 했는데.. 원인 파악 '좋아요 버튼을 눌러야 -> db를 불러올 수 있음' 이라는 이상 현상에 따라 혹시 좋아요 버튼을 눌러야만 모든 api가 호출되도록 하는 이상현상이 아닐까 싶었다... 이런 순차적 종속이 일어나려면 괄호 실수밖에는 없어서 내가 괄호 안에 route를 집어넣은게 아닌지 봤더니 정말로.. 좋아요 버튼을 눌렀을 때 반응하는 api 안에 rotue들을 작성해서 일어난 문제였다. 해결 방법 냉큼 괄호정리 해서 빠져나오게 해주니 해결됨 하루에 네 번 바보되기 성공 하... 바보일기 2022. 11. 12.