본문 바로가기

개발130

react setInterval에서 state 업데이트 안됨 에러 내용 주기적으로 업데이트해야 하는 화면이 있을 때, setInterval을 활용하게 됩니다. 그러나 이러한 setInterval에서는 state 업데이트가 되지 않습니다. 이로 인해 state로 인한 주기 종료(clearInterval)을 할 수 없습니다. 에러 원인 이는 클로저로 인함입니다. state가 업데이트 되더라고 setInterval을 호출한 시점에서의 변수 환경이 클로저의 형태로 함수에 종속되기 때문에 setInterval에서는 state의 변화를 감지할 수 없습니다. 해결 방법 state를 직접 사용하지 않고 화면의 특정 요소의 값이나 그 요소 자체의 유무를 사용하도록 하면 됩니다. 수정 전 코드 useEffect(() => { let intervalId; intervalId = se.. 2023. 2. 17.
C/C++ 컴파일 및 실행 (여러 파일, 헤더파일 포함) 설명 C/C++에서 소스코드를 컴파일(compile)하고 실행(execute)하는 방법에 대하여 설명합니다. 특히 여러 파일과 헤더 파일이 있는 경우에 대하여 다룹니다. 방법 우선, 현재 디렉토리에 다음과 같은 파일들을 만듭니다, main.c #include #include "foo.h" int main(void){ int y = foo(100); printf("%d",y); return 0; } foo.c #include "foo.h" int foo(int x){ return x + 5; } foo.h int foo(int x); 그리고 컴파일 후 실행 합니다. gcc main.c foo.c -o testc testc .h로 끝나는 헤더파일의 경우 같은 디렉터리 내에 존재해야 합니다. 없다면 main... 2023. 2. 17.
react TextField setState 이후 바뀌지 않을 때 (재렌더링 안됨) 에러 내용 react의 material ui의 TextField에서 setState를 해도 관련된 요소가 변경되지 않습니다. 에러 원인 컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다. -react 공식 홈페이지- react는 setState로 인해 요소를 업데이트를 해야 할 때 성능최적화를 위해 virtual DOM을 사용합니다. 이는 state가 바뀐 전과 후의 요소를 비교하여 다른 부분을 부분적으로 제렌더링 합니다. 그런데 이러한 "비교"할 때 그리 엄격하게 비교하지 않습니다. state를 직접적인 텍스트로 사용하거나 map을 .. 2023. 2. 15.
은(는) 위험할 수 있으므로 다운로드 하지 않습니다. 오류 해결 에러 내용 파일을 다운로드하는데 다음과 같이 오류가 나타난다. 에러 원인 구글 크롬 정책상 외부 사이트에서 직접적으로 파일을 다운로드하는 것은 경고를 보낸다 해결 방법 blob으로 바꿔서 내부 오브젝트 url을 만든다 아래는 react로 이를 구현한 코드이다. 핵심은 file download 링크에서 response을 받고 blob으로 변환한 오브젝트를 내부 URL로 다운로드할 수 있도록 변경하는 것이다. const AttachmentsIcon = ({ attachments }) => { if (attachments === undefined || attachments.length === 0) { return ; } else { async function handleFileDownload() { for a.. 2023. 2. 13.
setheader 안됨 : fetch 후 reponse에 header가 없을 때 에러 내용 서버에서 response에 헤더를 분명 설정 및 추가하였는데 getHeader 했을 때 response에는 없는 경우입니다. setHeader addHeader headers.set 등 어떤 header 조작도 안됩니다. 에러 원인 cors 정책 때문입니다. (보안상의 이유) 표준 헤드가 아닌 경우 일반적인 getHeader, headers.get 등으로 볼 수 없도록 제한하여 놓았습니다. 헤더를 문자열로 변환시켜 raw header 형태로 보면 찾을 수 있지만 너무 번거롭습니다. 해결 방법 표준 헤드 중 쓰지 않는 것을 넣으면 됩니다. 보통 Pragma는 사용하지 않으니 Pragma를 key로 원하는 value를 사용하면 됩니다. 참고 자료 Reading response headers wit.. 2023. 2. 13.
material ui TextField disabled 색 바꾸기 설명 material ui TextField가 disabled일 때 회색이 되는데 이때 색을 바꾸는 방법입니다. 해결방법 TextField를 다음과 같이 수정합니다. 그 외 다른 Component Style Custom TextField 외에도 다양한 Component를 custom 할 수 있습니다. TextField처럼 특정 Props를 통해 custom 할 수 있지만, 모든 Component가 위와 같은 방식으로 custom이 가능하지는 않습니다. 자세한 custom 방법은 아래의 material ui 홈페이지에 기술되어 있습니다. How to customize - Material UI Learn how to customize Material UI components by taking advantag.. 2023. 1. 27.