우당탕탕 기술블로그

✏️ 문제 상황 회원정보 수정 페이지 내에서 프로필에 고화질 이미지를 등록하고 수정을 서버에 요청한다면 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..

✏️ 문제 상황 프로젝트를 시작하면서 초기 파일설정을 한 GitLab 레포지토리를 remote 후 npm i 를 하려고 하는데 node-sass 부분부터 에러가 나더니 node_modules를 제대로 설치할 수 없는 상황이었다. 🧐 문제 원인 Windows 환경이고 Node.js 버전이 18이라 node-sass 버전이 8 이상으로 설치할 있는데 현재 package.json을 보니 node-sass가 7 버전이었다. 😊 해결 방안 node-sass 버전을 높이는 방법도 있겠지만, node-sass 패키지를 설치하기 보다는 sass 패키지를 설치하여 패키지를 변경했다. sass 패키지는 node-sass를 흡수한 패키지로 지속적으로 업데이트가 되는 패키지 이므로 sass 패키지 설치를 더 권장한다고 한다...

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

✏️ 문제 상황 회원정보를 수정하는 버튼을 클릭하면 NOT FOUND 404 에러 페이지로 이동하게 된다. 🧐 문제 원인 서버에서는 에러가 없다고 하셨는데 분명 올바른 url로 post 요청을 보냈으나 404 에러를 보게 되었다. 알고보니 form을 전송할 서버 쪽 스크립트 파일을 지정하는 action 속성을 따로 지정하는 걸 누락했다. 평소에 form 하나에 submit type 하나만 지정하게 되니 action 속성을 추가하는 게 익숙치 않았다.. /user-mypage/user-mypage.js const isAllValid = checkValid(); if (isAllValid && confirm("회원 정보를 수정 하시겠습니까?")) { try { const response = await fet..

✏️ 문제 상황 HTML 코드에서 input type이 password 일 때, password가 입력되었으나 표시되지 않았다. 🧐 문제 원인 구현하려는 웹 페이지의 font-family가 나눔스퀘어로 설정되었고, 나눔스퀘어 글꼴에서는 password type일 때 표시하는 (●) 기호가 없어서 표기되지 않았다. 😊 해결 방안 비밀번호를 입력했을 때와 입력 전에 보여지는 글꼴을 다르게 설정한다. input[type=password] { font-family:"나눔스퀘어를 제외한 글꼴", sans-serif !important; } input[type=password]::placeholder { font-family: "NanumSquare"; } input[type=password] 는 CSS 선택자, ..