우당탕탕 기술블로그

✏️ 문제 상황 회원정보 수정 페이지 내에서 프로필에 고화질 이미지를 등록하고 수정을 서버에 요청한다면 413 Payload Too Large 에러 발생 여기서 HTTP 상태코드인 413 에러는 요청 엔터티가 서버에 의해 정의된 제한보다 크다는 것을 의미한다. 🧐 문제 원인 1MB 정도의 이미지 파일을 서버에 보낸다면 413 에러를 뱉어내서 수정을 할 수 없게 된다. const handleFileSelect = (e: ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = () => { setImageSrc(reader.result as string); }; ..

✏️ 문제 상황 useState 혹은 useRef를 사용해도 input 창에 텍스트를 빠르게 타이핑하면 깜빡임 현상이 발생했다. 🧐 문제 원인 타이핑할 때마다 폰트를 요청하고 있어서 발생한 문제였다. @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); *, body { font-family: 'Noto Sans KR', sans-serif; } 😊 해결 방안 src/assets/fonts 폴더를 만들어서 사용할 폰트(woff2, woff, otf)를 직접 다운받아서 적용했다. /* src/assets/font.module.scss */ @font-face { font-family: 'Noto Sans KR'; font-style: normal..

✏️ 문제 상황 함수형 컴포넌트를 이용해서 MBTI 테스트 웹사이트를 만들고 카카오 애드핏을 달아보기 위해 익숙했던 useEffect를 사용해서 컴포넌트가 마운팅되고 나서 동기적으로 광고 DOM 을 추가해서 띄울 것을 의도했다. 그치만 계속 에러가 나서 리렌더링이 될때마다 광고를 분명 하나만 달았는데 두 개, 세 개씩 늘어나게 되었다. 어떨 때는 className으로 지정한 adfit을 찾을 수 없다는 에러를 뱉어내기도 했다. ... useEffect(()=>{ let ins = document.createElement('ins'); let scr = document.createElement('script'); ins.className = 'kakao_ad_area'; ins.style = "displa..