본문 바로가기

분류 전체보기

 (265)
[HTML] 카카오톡 오픈그래프(og) 이미지 안 뜨는 오류 해결 오류 현상HTML에서 og 태그를 설정하였다.그 중 og:image 는 웹페이지와 연관된 이미지 인데, 만약 카카오톡으로 사이트 링크를 전송하면 상단에 이미지가 뜬다.▼ og 태그 참고 아래는 정상적으로 보냈을때의 예시이다. 하지만 개발중인 사이트를 공유했을때 아래와 같이 이미지가 미노출되는 현상이 발생했다.아래와 같이 코드를 작성했는데 다른 사이트에서는 정상적으로 이미지가 노출되었다. 원인원인을 찾아본 결과, 카카오톡 오픈그래프 캐시 문제일 수도 있다는 글을 발견했다.카카오톡은 더 빠른 데이터 로딩을 위해 og 정보를 캐시하는데 링크를 처음 공유할때 og정보가 제대로 설정되지 않았다면 캐시가 갱신되지 않아 이미지가 표시되지 않을 수 있다는 것이다.따라서 카카오 developers에서 캐시 초기화를 통해..
[Git] git squash 방법 (여러 커밋 하나로 합치기) MR 올리기 전 여러 커밋을 한꺼번에 합친 squash 로 올리려 한다. (추후 cherry-pick 할 때에도 용이)Git Squash는 여러개의 Commit을 하나의 Commit으로 만들어준다.방법은 아래와 같다. 1.rebase (최근 3개 커밋 합치려면 아래처럼 작성) git rebase -i HEAD~3  2.그럼 아래와 같이 뜸 pick abc123 First commit message pick def456 Second commit message pick ghi789 Third commit message 여기서 첫 번째 커밋을 제외한 나머지 커밋의 pick을 squash 또는 s로 변경한다.다음과 같이 변경. pick abc123 First commit message squash def456 ..
[JS] 로컬 서버 http https로 변경하기 개발을 할때 로컬 서버를 띄우면 http://localhost:8080 과 같은 형태이다.페이스북 로그인과 같이 테스트 하면서 URL을 설정할 때 http를 막는 곳이 있을 수 있어 http->https로 변경하는 작업이 필요할 수 있다.따라서 아래와 같이 실행한다. mkcertmkcert를 전역적으로 설치npm install -g mkcert 아래 express 도 추가로 설치npm install expressnpm install express-sanitizer CA (Certificate Authority) 만들기 ( 파일생성됨: ca.key - CA private key /ca.crt - CA certificate)mkcert create-ca  localhost 도메인의 인증서를 만들기 ( 파일생..
[VSCode] Live Server 포트 변경 및 적용 안되는 오류 해결 Port 변경하기VSCode에서 Live Server 플러그인을 통해 서버를 열때 포트 번호를 변경하는 방법은 아래와 같다. 1. VSCode에서 마켓플레이스에 Live Server를 검색한다. 해당 플러그인의 우측 아래 톱니바퀴를 클릭하고 확장 설정을 선택한다.2. 이동한 곳에서 port number를 검색한 후 아래 settings.json에서 편집을 클릭한다. 3. 아래와 같이 원하는 port를 설정해준다. "liveServer.settings.port": 3000, 4. 서버를 실행하면 설정한 port로 열린다.VSCode 우측하단에 Go Live 를 클릭하여 서버를 키거나 index.html에서 우측클릭하여 Open with Live Server 클릭하여 서버를 킨다. Port 변경이 적용되지 ..
[Browser] Chrome- paused in debugger 해결 이슈크롬으로 디버깅을 하던 중, network 도 안보이고 sources로 가지면서 멈추는 현상이 있었다. 원인크롬의 개발자 도구> sources 의 설정이 아래와 같이 되어서 일어났던 현상이다.예외 발생 시, 멈추게 되는 기능이 켜져있었다.따라서 왼쪽의 재생되는 버튼을 멈춰줘야 한다. 해결아래의 체크박스를 첫번째로 체크 후 다시 재생 버튼을 클릭해 일시정지로 만들었다. (맨 오른쪽도 파란색으로 되게 설정함)그럼 다시 크롬이 정상적으로 작동한다.
[Basic]Android 기기 원격 디버그(PC에서 모바일 화면 동기화) 모바일에서 터치 이벤트 감지에 대한 디버깅을 하고 싶었다. 검색을 통해 모바일 화면을 실시간으로 PC에서 보는 방법을 발견! 아래의 방법으로 진행하여 실시간으로 모바일 화면 동기화가 가능하다 😃 설정 방법 모바일 디바이스를 유선으로 컴퓨터 본체(노트북)에 연결한다. 크롬 주소창에 chrome://inspect/#devices를 입력한다.(DevTools에 접속) https://developer.chrome.com/docs/devtools/remote-debugging?hl=ko#discover 에 나온 설명대로 진행한다. (아래 첨부) Discover USB devices가 사용 설정되어 있는지 확인합니다 USB 케이블을 사용하여 Android 기기를 개발 머신에 직접 연결합니다. 기기를 처음 연결하는 ..
[CSS] 이미지 드래그, 선택 막는 방법 이미지 보안을 위하여 드래그 및 선택(우클릭)을 막는 경우가 있다. 방법은 다음과 같이 CSS에 적용시키면 된다. 드래그 막기 img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } 선택 막기 -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; 이미지 선택, 드래그 막기 //이미지 선택,드래그 막기 -webkit-user-select: none; -khtml-user-select: none; -mo..
[React] React Query 시작하기 React Query 공식 사이트) TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much tanstack.com 아래 블로그에 대한 내용을 아래에 정리) 📲 React-query 사용하는 ..

티스토리툴바