트러블슈팅 (5) 썸네일형 리스트형 [ TypeScript ] "No overload matches this call" Props의 타입을 지정해주고, 아래와 같이 그 prop을 또 다시 스타일드컴포넌트의 컴포넌트로 넘겨주었다. 근데 다음과 같이 "No overload matches this call" 라는 오류가 발생하였다. overloaded function란 뭘까? 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 한다. 그러니까 결론은 overloaded function 내에서 지정한 매개변수의 타입과 실제 함수에 전달된 인자의 타입이 일치하지 않으면 발생하는 에러이다. 그러니까 위와 같은 오류가 발생하면 앞에서 지정한 타입과 실제 전달되는 인자의 타입을 잘 살펴보자. 필자와 같은 경우는 아래 이미지처럼 스타일드컴포넌트 코드에서 타입을 지정해주지 않아서 위와 같은 오류가 떳던 것이였다. 그러니까, 다시 p.. [ TypeScript ] import로 이미지 불러올 때 현재 기존 리액트프로젝트를 자바스크립트에서 타입스크립트로 바꾸는 작업을 진행하던 도중에, 이미지 파일을 불러올 수 없다는 오류가 발생하였다. 이미지도 따로 타입을 선언해주란 말인가..? 란 생각이 첫 번째로 들었다. 아래 이미지 속의 에러메시지를 해석해보자. 뭐 대충 모듈이나 선언된 형식을 찾을 수 없다는 얘기인 것 같다. 그래서 구글링을 해보았는 데, 명확한 해법이 나와있었다. 해법이 담긴 링크는 여기다. https://www.carlrippon.com/using-images-react-typescript-with-webpack5/ Using images in React and TypeScript with Webpack 5 How to configure Webpack 5 so that images ca.. socket.io 서버 부하 이슈 소켓연결 후, 채팅을 초당 5회정도로 도배를 해보았다. 근데, 아래와 같이 소켓연결이 끊어짐과 동시에 다른 get요청이나 post요청도 일시적으로 막히는 현상이 일어났다. 아무래도 기존의 방식과는 다르게, 실시간으로 이루어지기 때문에 서버에 부하가 걸려 일어나는 현상이라 생각했다. 그래서 구글링을 하여, nginx에서 upstream을 설정하라는 게시글을 보게 되었다. upstream은 무엇일까? 위에서 Upstream서버는 가장 오른쪽 PHP-FPM이 설치된 서버이다. Upstream 서버는 다른 말로 Origin 서버라고도 부른다. 여러대의 컴퓨터가 순차적으로 어떤 일을 처리할 때 어떤 서비스를 받는 서버를 의미한다. 하여튼 , 아래 코드와 같이 설정을 해주니 서버의 부하가 조금 줄어들었다. upst.. Socket.io 연결이 안될 때, 확인해봐야 할 것 (소켓 중복, Cors) 아래는 평소 node.js에서 cors를 해결하는 방식이다. app.use(cors(corsOptions)); 하지만, Node 라이브러리 중 "Cors"라이브러리는 Socket.io에서 발생한 Cors를 해결할 수 없다. (Server-Side) 그래서 아래와 같이, Socket.io 코드로 명시적으로 작성해주어야 한다. var socket = io.connect(`채팅서버 주소`,{ cors: { origin: '*' } }); (Client-Side) 혹시나 다른 컴포넌트에서 소켓이 쓰이고 있지는 않은 지, 확인해보자. 필자 같은 경우에는, 서버단에서 Cors문제는 해결이 됬는데, 채팅이 안되거나 2분 뒤에 도착하는 상황이 벌어졌었다. 파일 하나하나를 뒤져보니, 초반에 소켓을 연결하려고 미리 만들어.. Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]' at Array.sort (<anonymous>) state값을 컴포넌트로 가져와서 정렬해서 사용하고싶었는데, 위와 같은 오류가 발생하였다. 원본배열이 깊은 복사가 아닌, 얕은 복사일 때 이러한 오류가 나타난다고 한다. (배열이 고정된 상태이기 때문이라고함) 그래서 위와 같이, 스프레드 연산자를 이용해서 깊은 복사를 해준 뒤, 정렬하니 잘 작동하였다! 아까 위에서 배열이 고정되어있어 복사를 해주어야 한다고 했는데, 그에 대한 구체적인 답변은 아래 스택오버플로우를 참고하자. https://stackoverflow.com/questions/53420055/error-while-sorting-array-of-objects-cannot-assign-to-read-only-property-2-of/53420326 이전 1 다음
