용용it

문제 상황 import { ContainerBox } from "../../common/searchCharacter/ContainerBox"; const handleMouseLeave = () => { if (!clicked) { setSelectedItem(null); } }; return ( );}; containerBox 컴포넌트에 onMouseOut 이벤트를 넣어서 컴포넌트를 벗어나면setSelectedItem(null)로 초기화 시키는 작업을 하려고 했는데 전혀 적용이 안되는 문제가 생겼다.    해결 과정 제일 먼저 정공법인 console.log를 사용하여 함수 호출 여부를 확인한다.const handleMouseLeave = () => { conso..

html2canvas 이란? 특정 HTML 요소를 캡처후, 이미지로 변환하는 자바스크립트의 라이브러리이다.   언제 사용하면 좋냐면 예시를 먼저 보자.  블로그 주인장이 새로 도입한 기능인데,  저 이미지를 유저가 일일이 캡처할 필요 없이버튼 하나로 이미지로 저장할 수 있다.이런 경우 사용하면 좋을듯하다.  하지만 이 라이브러리를 사용하면서 문제가 생겼었는데, 윈도우의 크기, 쉽게 말하자면 pc와 mobile일 때의 윈도우의 크기가 다르기 때문에 윈도우 크기에 맞게 변해버린 HTML요소에 따라서 캡처가 되어버린다는 것이다.   해결 방법 제일 먼저 공식 웹사이트를 방문해서 사양을 보는 것이다. 참조https://html2canvas.hertzen.com/configuration OptionsExplore..

커뮤니티에 내가 만든 사이트를 홍보겸 피드백을 받기 위해 게시글을 작성했는데 다른 메이플스토리 api 사이트의 개발자 분이 메일로 친절하게 메이플스토리 이미지 에셋은 픽셀 아트이기 때문에 image-rendering 속성을 따로 넣어주지 않으면 흐릿흐릿하게 나오기 때문에 이를 해결하기 위해 태그 속성으로 image-rendering: pixelated 옵션을 알려주셨다!! 심지어 MDN 링크까지 같이 보내주셨다.(매우 감동..) 여태까지 개발하면서 이미지는 삽입만하면 되는 줄 알았다... 머리가 띵 해지는 순간이었다... 역시 다른 개발자들의 도움이 확실히 도움이 되는 것 같다!! 협업을 해야하는 이유 +1 태그에서 image-rendering: pixelated를 사용할 때, Rendered size(..

이미지를 백그라운드 이미지로 지정했는데 기본적으로 태그는 인라인 요소로 간주되기 때문에 인라인 요소는 텍스트와 같은 라인에 배치되며, 텍스트의 베이스라인을 기준으로 정렬되기 때문에여백이 생길 수 있다.  해결법  display: block 로 바꾸면 된다.   혹은  vertical-align: bottom;  속성을 사용해보자. 앞에서 말한 img태그는 인라인 요소로 간주되므로, 요소의 하단을 부모 요소의 기준선 아래로 맞춰준다. 즉, 요소가 포함된 라인 박스(line box)의 가장 아래쪽에 요소가 위치하도록 한다.  이는 이미지 하단의 여백이 제거되는 효과를 가져올 수 있다!!

Windows 기준! 새로운 프로젝트를 시작하고 git add .를 했는데 터미널에서 이러한 에러가 나왔다! 이게 뜬 이유는 사용하는 줄 바꿈 스타일이 때문에 발생한다고한다. 운영체제마다 다른 줄바꿈을 쓰기 때문에 Git 저장소에서 어떤 줄바꿈으로 해야할지 몰라서 나온다는... 빠른 해결법 Windows git config --global core.autocrlf true Mac git config --global core.autocrlf input global은 전역으로 설정한다는 뜻.

문제 상황 1.받아오는 api에서 phoneNumber이 하이픈이 없는 상태에서 데이터를 받는다. ex) 01000000000 2. 사용자에게 보이는 input 값은 하이픈이 있는 상태로 보여야한다. ex) 010-0000-0000 3. 단, api를 보낼 때는 하이픈이 없어야한다. 해결 방법 간단하다. 사용자가 보는 ui에는 하이픈이 포함되게, 보내는 데이터는 하이픈 없이 전송하면 된다. 우선 받아오는 api에서 하이픈이 없는 것을 확인하고, 요렇게 하이픈 있는 상태로 렌더링 한 후, value에다가 넣어주면 된다..! 그러면 이렇게 하이픈을 잘 표시해서 렌더링 할 것이다 ! 어라 ? 그러면 value 값은 하이픈이 있는 상태인데, 보내는 데이터도 하이픈이 포함되어있는 거 아닌가 ?! 맞다, 이번에는 ..

문제상황 input에 있는 placeholder에 svg를 넣고싶은데 svg를 넣으면 object로 렌더링되고 svg 이미지는 나오지 않는다.. 해결 당연하겠지만.... placeholder에는 text만 들어갈 수 있다 흠... 그러면 깔끔하게 placeholder에는 svg 넣는 거 포기. 대신 다른 방법을 갈구해보자 이런식으로 구성하거나, 이런 식으로 input 내부에 svg를 덮어씌우고, input에 padding값을 줘서 입력창을 svg옆으로 밀어내자 ! 결과 나는 왜 placeholder에 svg를 넣으려고 했을까 한 번도 안된다는 걸 의심조차 안 했기 때문 ! 이번에 확실히 알았으니 이런 실수는 다시는 하지 않기로 !

netlify로 배포하려고 하는데 배포는 잘 되었는데 새로고침을 하면 이녀석이 나타난다.. gpt한테 물어본 결과, Netlify는 기본적으로 index.html을 진입점으로 사용하여 싱글 페이지 어플리케이션(SPA)을 지원합니다. 이는 SPA의 특성에 따라 브라우저에서 라우팅을 처리하고 필요한 컴포넌트를 동적으로 렌더링하는 방식을 지원하도록 하기 위함입니다. 따라서 Netlify의 설정 파일에서 /* /index.html 200와 같은 설정을 통해 모든 요청을 항상 index.html로 리다이렉트하도록 하는 것이 중요합니다. 이를 통해 프론트엔드 라우팅을 원활하게 작동시킬 수 있습니다. Netlify는 이런 기본 설정을 통해 SPA를 호스팅하는 데 유용하며, 프론트엔드 애플리케이션 개발에서 자주 사용되..

뭣도 모르고 깃허브에서 package-lock.json을 수정했는데 팀원들도 이런 적이 처음이라 해결하는데 30분이나 걸렸다 ㅎㅎ; 완전 금쪽이 행동... package-lock.json는 Node.js의 패키지 의존성(dependencies)을 관리하기 위한 파일이므로 절ㄹㄹ대 건드려서는 안된다

npm run dev를 하려고 하는데 이런 오류가 나왔다. 한참을 헤맸다.. 해결법 parcle이 아니라 parcel 이었다 ㅎㅎ; 다들 오타에 주의하자...