각종 설치Issue & Solution & Enlightenment (46) 썸네일형 리스트형 [React] 의존성 다량 추가후 npx webpack serve명령어 입력시 컴파일 시간이 오래 걸리는 이유에 대하여 왜 의존성을 많이 추가했을때 npx webpack serve명령어 입력시 한참 걸렸을까? 내생각: socket과 관련된 여러가지 의존성도 wepback.config.ts의 babel(최신코드를 구식코드로 바꾸어주는 역할)관련 영역에 따로 설정이 필요할 것이다. 이 설정을 하지 않아서 npx webpack serve명령어를 입력해도 제대로 로딩되지 않았을 것이다. 실제로 매번 npx webpack serve를 입력해 주었을 때마다. 아래의 과정까지만 처리되고 그 아래 여러과정(그림2)은 나오질 않았다. GPT의 답:npx webpack serve 명령어를 실행할 때 컴파일 시간이 오래 걸리는 이유는 여러 가지가 있을 수 있습니다. 의존성을 많이 추가한 경우, 웹팩 설정 파일인 webpack.config... Request processing failed; nested exception is java.lang.NullPointerException: Cannot invoke "java.lang.Integer.intValue()" because the return value of "com.flexy.boardback.respository.resultSet.GetBoardResultSet.getBoardNumber()" is null ==>> 요청 처리에 실패했습니다. 중첩 예외는 java.lang.NullPointerException입니다. "com.flexy.boardback.respository.resultSet.GetBoardResultSet.getBoardNumber()"의 반환 값이 null이므로 "java.lang.Integer.intValue()"를 호출할 수 없습니다. 드디어 나도 그 악명높은 NullPointerExeption을 만나게 되었다. 문제를 해결하기 위해서 https://flexyduck.tistory.com/499 이 내용에 대한 복습부터 한다.간단하게 요약하면 JPA에서 네이티브 쿼리를 사용해야 하는 상황이다. 아래의 코드처럼 쿼리문에는 board_number라고 되어 있고 GetBoardResul.. FormData를 백단으로 전송하는데 있어서의 Unauthorized발생 에러. 그리고 FormData에 관하여. 내가 썻던 글: 제가 영상(42강)대로 fileUproadRequest, postBoardRequest API를 모두 작성해 주고 postman으로 게시글 제목, 게시글 내용, 이미지 파일을 post요청으로 했을때는 DB의 Board테이블과 Image테이블에 모두 post한 내용이 정상적으로 데이터가 쌓였습니다. 하지만 이상하게도 front화면에서 똑같이 내용을 입력하고 이미지 파일을 첨부하여 업로드 버튼을 클릭하니 이상하게도 게시글 제목, 내용은 정상적으로 board테이블에 데이터가 들어왔지만 image는 들어오지 않더라구요. 그리고 개발자 도구를 보니 401(Unauthorized)라는 오류가 뜬 것을 확인할 수 있었습니다. 그래서 구글링하다가 어찌어찌 axios의 post부분에 accessToken.. KimsBoard프로젝트중 프론트의 img태그의 src속성으로 상대경로 값을 주어도 액박이 나는 문제 해결책을 제시하는글: https://velog.io/@ingdol2/React-image-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0처음 문제 상황은 이러했다. 강의에서 이미지파일의 출처로 아래와 같이 인터넷 링크를 복붙하였다. 나는 이러한 것이 항상 인터넷이 연결되어야 한다는 제한사항때문에 꺼려졌다. 그래서 이미지를 그냥 내 폴더에 다운받은 후에 그 이미지 파일의 상대경로(혹은 절대경로)를 src속성의 값으로 주면 문제가 해결되겠거니 생각했다. 하지만 문제는 해결되지 않았다. 아직까지 정확히는 왜 그런지 모르겠다(빌드할시 경로가 달라져 css 모듈로 따로 불러와야 한다고 단톡방에서 조언을 들은 적이 있다). 하지만 위의 글대로 해당 파일을 impo.. 서버로 부터 Validation failed에러를 받았다(front와 Back단 연결시 매우중요!!!). 이 문제를 해결하면서 정말 많이 배웠다. JPA의 구현체인 Hibernate는 카멜로 선언된건 알아서 스네이크명명으로된 컬럼 매핑해 주어 위와 같은 오류가 발생할 수 있으므로 테이블 컬럼을 기본적으로 스네이크로 사용하는게 정신건강상 이롭다는 것!! 그리고 원래 문제에 대한 해결책은 아래와 같다. 전역변수 관리하는 프론트엔드 쪽의 라이브러리 사용시 주의점!!!!! 이것때문에 정말 몇시간을 그냥 날렸다... 나는 지금 ZustAnd라이브러리를 사용하고 있는데, 당연히 프론트 엔드쪽의 변수를 관리하는 것이므로 프론트 엔드파일안에 있는, 전역적으로 관리하는 변수의 이름에만 신경을 썼었다.... 하지만 이렇게 하면 안된다. 벡단에서 넘어오는 변수를 프론트쪽에서 관리하는 것이므로 그 전역변수의 이름은 벡단에서 사용하던 이름이 그대로 전달되는 것이다. 그래서 벡단과 다른 이름이지만 의미는 같은 그 변수명을 사용하면 당연히 에러가 나지 않지만 해당값이 없다고 읽히는 것이다... 그 이유는 바로바로... 따라서!!! 즉!! 해결책은 백단의 DTO객체의 맴버변수 이름과 프론트에서 전역적으로 관리하는 변수의 이름을 같게 해주어야 한다!!! Target container is not a DOM element. 오류의 LIFO구조에 익숙해야 한다. 오류만 놓고 보면 정확히 " 대상 컨테이너가 DOM 요소가 아닙니다. " 라는 말이다. 대상이라니 이 무슨 얼토당토 않은 말인가? 대상이라고 하면 내가 지정해준 무언가이다. 그래서 오류코드로 보았을때 명확히 첫번째 줄에 나오지 않는것이다. 스텍 구조에 익숙하다고 생각되는 나는 오류의 첫번째 줄이 hyojinfront/./node_modules/react-dom/cjs/react-dom.development.js:26086:13 와 같이 얼토당토 않은 말이니 당연히 당황한다. 이때 오류의 LIFO사고에 익숙하다면 바로 다음의 에러를 봐야 한다. hyojinfront/./client.tsx:14:50 client.tsx에 문제가 있는 것이다.이 코드에서 대상이 될.. File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.jsYou may need an additional loader to handle the result of these loaders. 파일이 다음 로더로 처리되었습니다. * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js이러한 로더의 결과를 처리하려면 추가 로더가 필요할 수 있습니다. 에러에는 아래와 같은 친절하게 BrowserRouter이 어떤 역할을 하는지 설명하지 않는다.즉 경로에 따른 라우팅, 렌더링, 로딩해주는 것이 BrowserRouter의 역할은 것이다. 근데 에러메시지를 보면 로딩하는데 로더가 추가로 필요할 수 있다는 것이다. 즉, @pmmmwh 로더만으로는 부족할 수 있다는 것!!!해결: 기존에 문제가 있던 client.jsx파일의 확장자를 tsx로 바꾸어 주었고 관련라이브러리를 추가해 주었다(import { render } from 'react.. 이전 1 2 3 4 ··· 6 다음
