본문 바로가기
반응형

분류 전체보기126

VSCODE에서 ChatGPT 사용하기 요즘 일하면서 구글링보다 ChatGPT의 도움을 많이 받고있다. 이 ChatGPT를 VSCODE에서 사용할 수 있는 익스텐션이 있다해서 사용해봤다. VSCODE 익스텐션에서 AICodeHelper 라고 검색하면 아래같은 익스텐션이 나온다. 설치해주고 아래 링크에서 API Key를 발급받아 사용해야한다. setting에 들어가서 AICodeHelper 익스텐션을 찾아 발급받은 키를 넣어준다. 한글로 언어 변경도 가능하다. 원하는 코드를 긁어서 코드리뷰, 주석달기, 리팩토링도 가능하다. Ctrl + Alt + Shift + C 코드리뷰 Ctrl + Alt + Shift + Z 주석달기 Ctrl + Alt + Shift + G 코드생성 Ctrl + Alt + Shift + R 리팩토링 Ctrl + Alt + .. 2023. 3. 20.
Skeleton UI 제작 전에 만들었던 리스트 목록을 활용해서 css로만 skeleton ui를 만들었다. https://hjcode.tistory.com/63 vue.js axios 예제 https://reqres.in/ Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr. hjcode.tistory.com 리스트 가져오는게 너무 금방이라 보이지도 않아서 3초후.. 2023. 2. 10.
브라우저에서 '사이트에서 나가시겠습니까?' 표시하는 방법 window.addEventListener("beforeunload", (event) => { event.returnValue = true; }); window.onbeforeunload = () => { return true; }; 이 이벤트를 사용하면 사용자에게 실제로 페이지를 나갈것인지 묻는 alert창이 뜹니다. 확인하면 새 페이지로 이동하고 취소하면 해당 페이지에 머무릅니다. 2023. 2. 9.
Git Branch 전략들 1. git flow 대규모 프로젝트에 적합하며, 5가지의 브랜치가 존재한다. master - 배포시에 사용되는 브랜치 develop - 다음 배포 버전을 준비하는 개발 브랜치 feature - 단위 기능 개발을 위한 브랜치, develop 브랜치에 merge release - 배포전에 테스트하는 브랜치, master에 merge hotfix - master에 버그가 있을 경우 긴급수정 후 master, develop에 merge 계획적인 릴리즈를 가지고 스케줄이 짜여진 대규모 프로젝트에는 git flow가 적합하지만, 일반적인 프로젝트에서는 불필요한 절차들이 많아 생산성이 떨어진다. 2. github flow git flow가 복잡하여 github에서 나온 전략 hotfix나 feature 를 구분하지.. 2023. 1. 4.
html2canvas CORS 우회하기 화면과 같이 드래그해서 이미지들을 캡쳐해서 서버에 다운로드 시키는 기능이 있었다. 문제는 이미지들이 다른 서버에서 가져온 이미지여서 html2canvas로 canvas로 변환할때 CORS오류가 나는 것이였다. 원본데이터가 오염 및 안전하지 않다고 판단하여 js에서 오류가 발생한 것이다. https://developer.mozilla.org/ko/docs/Web/HTML/CORS_enabled_image 교차 출처 이미지와 캔버스 허용하기 - HTML: Hypertext Markup Language | MDN HTML은 이미지 처리를 위해 CORS header를 포함하고 있는 crossorigin 속성을 제공합니다. 이는 요소에서 정의된, 외부 origin으로 부터 가져오는 이미지가 에서 사용할 수 있도록.. 2022. 12. 11.
clamp() clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고 작은 CSS 코드만으로 구현이 가능하기 때문에, 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리합니다. h1 { font-size: clamp(16px, 5vw, 34px); } /* clamp(최소값 16px, 유연한값 5vw, 최대값 34px) */ 5vw의 폰트사이즈를 가질수 있는데 최소 16px, 최대 34px까지 커질 수 있습니다. 패딩, 마진값에서도 사용이 가능합니다. 미디어쿼리를 대신해서 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있지만 최소, 최대 값을 명확하게 제한할 수 있는 경우에만 사용할 수 있으므로 용.. 2022. 12. 6.
반응형

티스토리툴바