용용it

문제상황 로컬에서 작업 후 github에 올린 후 다른 브랜치에서 pull을 했더니 이미지가 엑박으로 깨져서 나오는 현상 시도해본 경우의 수 1. 정상적인 이미지 파일을 다시 push 후 pull 해보기2. GitHub에서 이미지 파일이 잘 올라갔는지 확인해보기2.1 GitHub에 이미지 미리보기가 안 나오고 Invalid image source 에러가 나는 것을 확인2.2 다른 브랜치에서 push 해봤지만 여전히 똑같음2.3 여기서 다른 브랜치에서 push해서 모든 이미지가 깨져서 GitHub에 올라가고 그걸 다시 pull 땡겨서 모든 이미지가 로컬에서도 안 보임....3. 경로 문제인가 싶어서 확인해봤지만 아니었음4. LFS문제인가 싶어서 봤더니 본인은 LFS를 쓰고 있지 않음 원인 분석 여태까지 ..

서버를 24시간 관리하는 인원이 없는 이상 서버가 에러 때문에 동작하지 않는 경우,예기치 못한 자동화 에러로 인한 pm2 프로세서 중단을 대비하여 pm2에서 에러 발생 시 알림을 오게하는 기능을 알아보자 다양한 웹훅 지원 app(slack)들도 많지만 디스코드를 많이 이용하는 주인장은 디스코드를 이용하여 Webhook을 만들어 보도록 한다. 먼저 원하는 채널 우클릭서버 설정 좌클릭 연동 클릭 요렇게 웹후크를 발견할 수 있다. 웹후크 만들기 클릭 이렇게 이름, 채널, 프로필 이미지도 바꿀 수 있다. 나중에 알림이 올때 요녀석한테 알림이 온다. 이 URL이 알림을 보낼 주소니까 꼭 기록해두자.이걸로 나중에 curl로 알림 보낼 거임. # Discord Webhook URLWEBHOOK_U..

오늘은 버전 관리에 대해서 알아보자 npm 명령어에는 버전 관리 명령어가 있다. npm version major # 1.2.3 → 2.0.0 npm version minor # 1.2.3 → 1.3.0 npm version patch # 1.2.3 → 1.2.4 여기서 각각의 규칙이 있다. major : 큰 변화 (기존 기능과 호환되지 않는 변경) minor : 새로운 기능 추가 (호환성 유지) patch : 버그 수정, 작은 개선 !!) npm version 명령어를 실행하면 package.json 파일의 "version" 필드가 자동으로 수정된다 ! 의문 왜 npm version major 를 하면 1.2.3에서 2.2.3이 아니라 2.0.0가 되는가 ? 위에서 규칙에서 ma..

주인장이 운영 중인 사이트(https://www.mezzang.com/random-class)에서 "랜덤 직업 뽑기" 기능을 만들었는데, 뽑기 버튼을 처음 누르면 이미지 렌더링이 덜 되어 카드의 기본 배경(background)만 잠깐 보이는 문제가 발생했다.한 번 뽑고 나면 모든 이미지가 캐시되면서 이런 문제가 사라졌다.  시도  처음엔 React의 useEffect를 사용해 이미지를 프리로드하는 코드를 작성했다:콘솔 로그를 확인해보니 모든 이미지가 로드 완료되었다고 나오는데도, 왜 첫 뽑기에서 렌더링 오류가 생길까?    일단 프리로드의 한계를 알아보자useEffect에서 new Image()로 프리로드한 방식에는 몇 가지 한계가 있었다.  프리로드의 한계브라우저 캐시에만 저장: new Image()는..

handleLevelChange("hard")} level={level}> HARDconst Hard = styled.button` ${({ level }) => level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`;const Hard = styled.button` ${(props) => props.level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`; 먼저 코드부터 보자, Hard 컴포넌트는 level이라는 props를 받고 있으며, styled-components를 활용..

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

오늘은 React-Helmet에 대해 알아보자 react-helmet은 React에서 HTML의 태그를 쉽게 관리할 수 있게 해주는 오픈 소스 라이브러리이다.주로 웹 애플리케이션의 페이지 제목(title), 메타 태그(meta tags) 등을 동적으로 설정하거나 변경할 때 사용된다. react-helmet 장점SEO(검색 엔진 최적화): 웹사이트의 메타 정보를 동적으로 설정함으로써 검색 엔진이 페이지를 더 잘 인식하도록 도와준다.동적 제목 변경: 페이지마다 제목과 메타 정보를 다르게 설정할 수 있어서, 웹 애플리케이션이 더 유연하게 관리된다.    예시네이버 웹툰으로 예시를 들어보면,각 탭들의 title이 다른 걸 볼 수 있다. 이렇게 되면 사용자 입장에서도 한 눈에 어떤 탭인지 명확하게 알 수 있다...

오늘 소개할 VSCode의 확장 프로그램은 Remote - SSH이다. 그 전에 알아야 할 SSH는 무엇일까?SSH란 ?  SSH(Secure Shell)는 네트워크를 통해 원격 컴퓨터에 안전하게 접속할 수 있게 해주는 보안 프로토콜이다.SSH는 데이터가 암호화된 채로 전송되므로, 안전하게 원격 시스템에 접속해 파일을 관리하거나 명령어를 실행할 수 있다.  프로토콜?! 그러면 http와 https의 친구인가?!  HTTP/HTTPS가 웹 데이터를 전송하는 데 중점을 둔다면, SSH는 원격 접속과 보안 관리에 초점을 맞추고 있다.  SSH 사용 예시원격 서버 관리: 서버에 접속해 설정을 변경하거나 프로그램을 실행할 때.클라우드 서버 관리: AWS EC2, Google Cloud, Microsoft Azur..

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

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