각종 설치Issue & Solution & Enlightenment (46) 썸네일형 리스트형 메인 화면의 Cannot GET / 에러 결과부터 말하자면 웹팩설정파일인 webpack.config.js와 index.html파일이 같은 디렉토리 아래 있지 않아서 생긴 문제였다. 즉, npx webpack serve라는 명령어를 터미널에 입력하면 webpack.config.js파일부터 찾아서 실행하고 그 다음에 index.html파일을 찾는다. 여기서 index.html을 기본적으로는 webpack.config.js과 같은 디렉토리에서 찾는다. 찾아보고 없으면 에러를 위와 같은 에러를 발생시키는 것이다.(그리고 webpack.config.js 파일에서는 index.html파일이나 index.html에서 언급된 파일을 어느 디렉토리에서 찾을지 마저 설정해 줄수 있는 기능이 있다. webpack공식문서 참고하면 나온다. 물론 검색어는 잘 설정해서.. react_WEBPACK_IMPORTTTED_MODULE_0_.useContext(...) 에러 메인 화면에 나온 에러를 구글링해도 원인을 찾을 수 없었다. 한동안 이것때문에 시간을 보냈다. 그런데 다 필요없고 그냥 504라는 것만 보고 서버측에 문제가 있다는 것을 인지하는 것이 가장 중요하다. 오랜만에 손대는 프로젝트이다 보니 단지 서버의 영향 없이 프론트만 가지고 돌아가는 프로그램으로 오해하고 프론트만 가지고 낑낑 거리다보면 해결될 줄 알았다. 내가 임시로 만들어놓은 8085번 포트의 서버를 켜고 해보니 문제가 그냥 순식간에 해결되었다. post http://localhost:3000/()%20=%3E%20%60$%7BDOMAIN%7D/api/v1%60/auth/sign-up API관련 이슈로 아래 코드와 같이 회원가입을(Sign up) 할때 axios를 사용해서 경로를 아래와 같이 나름 정확하게 전달해 주었다. 그런데도 개발자 도구에는 아래 그림과 같이 엉뚱한 경로로 POST되었다고 나타나면서 404NOT FOUND 에러를 발생시켰다. 코드에서 보는것과 같이 경로를 정확하게 주었는데도 이와 같은 에러가 나타나는 이유가 무엇일까?서버 포트가 4000번인데 3000번 오류 난 것도 의아했다.답: 정확히 서버(4000)로 post를 날리는데 3000번이라고 오류가 난다? 이렇게 되면 그냥 프론트측 코드에서 뭔가 문제가 있는 것이라고 보면 된다(중요). 그러니 3000번 이라고 뜨는 것이다. 실제로 함수인데도 ( ) 를 빼먹어서 발생한 오류였다.API_DOMAIN을 API_DO.. java.lang.IllegalArgumentException: base64-encoded secret key cannot be null or empty. Kimsboard 프로젝트 중에 위와 같은 에러가 발생하였다. 문제의 원인은 깃헙에 올릴때 보안을 위해 각종 비밀키를 applilcation.properties파일에 보관을 하는데, 이 파일에 보관된 값을 @Value 어노테이션을 사용하여 필요한 곳에 불러오게 되는데 불러온 값이 null이 되어 있다는 것이다. 아래의 글로부터 많은 도움을 받았다.https://green-bin.tistory.com/53나 같은 경우도 글에서 설명하는 것과 같이 외부에서 해당 클래스를 new를 이용해 생성해서 문제였다. 이후 문제의 코드를 아래와 같이 변경하였더니 문제가 해결되었다. java.sql.SQLException: Access denied for user 'dhflekddy'@'localhost' (using password: YES) 정말 흔하디 흔한, 구글링하면 자료가 넘쳐나는 그런 에러다. 그런데 내 문제해결에는 전부 관련없는 글들 뿐이었다. 왜 웹에서는 단서를 찾을 수 없었나? 단순한 오타가 그 원인이었다. dhflekddy는 내게도 너무 익숙한 아이디 지만 cmd로 mysql에 아래와 같이 들어가보아도 dhflekddy라는 user는 내가 만든적이 없었다. 이렇게 뜬금없지만 매우 익숙한 dhflekddy라는 것은 사실 DB와는 관련없는 내 컴퓨터의 관리자 이름일 것이다.... =========================================================================================위와 별개로 하나더 언급하자면 이번에 프로젝트를 하면서 처음으로 intelliJ가 아닌 VSCo.. expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 리엑트 사용중 위와 같은 에러 메시지가 떳다. 원인중 하나 일수 있는게 import한 문서에서 어떠한 라이브러리가 필요한데 그 라이브러리가 없을때 이러한 에러가 떳다. 나같은 경우 그 라이브러리는 내가 만든 것이었다. React 프로젝트중 발생한 Network에러 cors에러라고 뜨지 않아도 단순히 network 오류여도 cors에러일수 있다. 정말 이렇게 어떠한 에러에서 뱉어내는 에러 메시지에 생뚱 맞은 해결책이 연결되어 있다... 방법은 없다. 구글링을 하는 것밖에. 오류메시지를 그대로 적고 그 오류에 어떠한 해결책이 있는가를 검색하는 방법뿐이 없다. (오류 메시지에는 cors에 관한 언급이 전혀 없었다. 하지만 나는 그 오류가 무엇 때문에 생긴것인지 모르므로 모든 가능성을 열어두어야 하고 모든 가능성을 열어두면 오류 해결에 많은 시간이 걸리니 구글링이 답이라는 것이다) 해결책: cors관련 라이브러리를 서버에 설치해 주었다. https://www.npmjs.com/package/cors CORS 에러는 무엇이고 어떻게 해결하는가 참고: https://evan-moon.github.io/2020/05/21/about-cors/ https://beomy.github.io/tech/browser/cors/ https://xiubindev.tistory.com/115 실질적 해결 영상: 7:40초 가량 https://www.youtube.com/watch?v=d6suykcsNeY&t=257s 요약: Cross-Origin Resource Sharing의 줄임말로, 한국어로는 교차-출처 리소스 공유라고 한다. 교차 출처가 무엇이냐, 쉽게 말해 다른 출처라고 말할 수 있다. CORS 에러가 어려운 이유 중 큰 이유가 CORS 에러를 실질적으로 겪는 곳은 프론트엔드이지만 해결해야하는 쪽은 백엔드이기 때문이다. (출처(Resource)는 Pr.. 이전 1 2 3 4 5 6 다음
