All
[git hub] cli 로 포크 받은 저장소에서 issue/pr 보내보기
✨ git hub cli를 설치한다. https://cli.github.com/ GitHub CLI Take GitHub to the command line cli.github.com 🧨 처음에 포크받은 레파지토리에서 vscode 터미널을 열어서 gh 를 실행하려고 할 때, 원본 레파지토리와 포크 레파지토리 중에서 고른다. 🧨 나는 포크된 저장소를 선택했고, 이 선택은 앞으로 있을 이슈와 pr에서 원본 레파지토리를 필수 선택을 해야 실행이 되는 불편함을 야기했다. 🧨 초기 설정을 변경하고 싶었으나 방법을 못찾았고, 아마도 폴더를 다시 만들어야 하지 않나 싶다. (혹시 재설정 아는 사람 댓글 달아주면 감사하겠다.) # 레파지토리 변경해서 이슈 올리기 gh issue create --title "test" ..
[CSS] 배경 필터 backdrop-filter
backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다. 요소 뒤에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 반투명하게 설정해야 한다. .blur { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(2px); } .brightness { -webkit-backdrop-filter: brightness(1.5); backdrop-filter: brightness(1.5); } .contrast { -webkit-backdrop-filter: contrast(.8); backdrop-filter: contrast(.8); } .drop-shadow { -webkit-backdrop..
[VUE] 엘리먼트 간 transition
HM 프로젝트 작업중... 한 페이지에서 엘리먼트 페이지 전환 효과를 멋있게 주고 싶었다. v-if / v-else를 사용해서 엘리먼트 사이를 트랜지션 할 수 있다. v-if 이기 때문에 트랜지션 내에 엘리먼트가 한개이니까 트랜지션이 자연스럽겠지? 생각을 하고 아래와 같이 작업을 했다. 그랬더니 조건에 따라 v-if를 변경할때마다 트랜지션이 뚝뚝 끊기고 이상했다. ... ... ... 이상하다. 구글링 구글링...@@ 검색을 해보니 Vue 가이드 사이트에 아주 친절하게 이유가 있었다.(멀리 가지 말고 정식 가이드부터 확실하게 보자) 아래와 같이 트랜지션 내에 v-if로 엘리먼트 변경을 할 때는 :key 값을 같이 넣어줘야 한다. ... ... ... Vue 가이드 왈.. Vue 에서는 같은 태그 이름을 ..
[VUE] vue.js 에서 aos.js 사용하기
작업환경 : vue.js 2.6.11 + typescript + yarn 1. aos 패키지 설치 yarn add 'aos' --save-dev yarn add '@types/aos' --save-dev ❗ aos만 설치하면 에러가 뜬다. 타입스크립트 버전으로 추가 설치를 해야한다. 2. main.ts import AOS from 'aos' import 'aos/dist/aos.css' Vue.use(AOS); new Vue({ router, store, mounted () { AOS.init({ easing: 'my-easing', duration: 500, delay: 50 }); }, render: h => h(App), }).$mount('#app') ❗ AOS.init 옵션은 원하는대로 커스텀해..
[VUE] vue.js 라이프 사이클
VUE 와 친해지기..! 😎 Vue 인스턴스나 컴포넌트가 만들어질 때 몇 단계의 과정을 거치게 되는데, 이를 라이프사이클(life cycle)이라 한다. 즉 Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 말한다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거친다. Vue는 각각의 단계에서 훅(Hook)을 할 수 있도록 API를 제공한다. beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 가 있다. 자세히 😏😎😉 알아보자 beforeCreate - Vue 인스턴스..
[git hub] 자주쓰는 git hub 명령어
소스트리도 좋지만 여러개의 계정이라던가 많은 저장소로 인해 느려질 때 등.. 명령어 쳐서 하는게 빠르고 좋다. 명령어 치는것에 익숙해지자. 우선은 자주 쓰는 명령어로 정리. 포크 받아서 풀리퀘 받는건 git hub에서 바로 하는게 좋다는 생각이 들어서 패스. git clone 주소 클론 git add . 업데이트 된 파일 스테이징에 추가 git add -A git status 현재 add 내역 확인 git commit -m "메세지" 커밋 git remote add origin 주소 원격 저장소 git hub url git push origin main 푸시 git branch -M main 브랜치 변경 git pull 풀 받기 git log 커밋 이력 git diff 변견 내용 확인 git reset ..
[HTML] 태그
쓰던것만 쓰다보니.. 분위기도 전환시키고 좀 더 탄탄한 마크업을 위해 주기적으로 봐야할 html 태그들.. HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위입니다. : HTML5에서 새롭게 추가된 태그 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되..
[SEO] 메타태그 최적화
🔎 SEO SEO 작업은 검색환경에 맞게 내 웹사이트를 최적화하는것을 뜻한다. SEO 작업이 잘 되어 있을 수록 내 웹사이트의 검색 결과가 더 좋은곳에 위치할 수 있다. 이는 곧 유입률과 연관있기 때문에 SEO 최적화는 중요하다. SEO를 위한 메타 태그 최적화 작업중 가장 기본은 메타태그 설정(최적화)이다. 메타태그란, 웹페이지의 정보를 담고 있는 태그라고 생각하면 된다. 사이트맵 제출 이는 간단하게 말하면 웹사이트의 설계도면과 같다. 보통 XML 파일형식으로 사이트맵을 구성하게 된다. 처음 SEO를 하는 사람들은 직접 셋팅하기에는 힘들기 때문에 XML 자동생성 사이트의 도움을 받는 것이 좋다. robots.txt 설정 이는 현실로 따지면 문지기와 같다. 내 웹사이트에 검색로봇이 들어올 수 있게 허가를..
[CS] 브라우저 렌더링 과정 :: CSS 최적화
📢CSS 성능 최적화 CSS는 렌더링을 막는다. CSS 존재만으로도 CSS가 파싱되기 전까지 브라우저는 렌더링이 지연된다. CSS는 HTML 파싱도 막을 수 있다. 브라우저가 CSS가 파싱되기 전까지 콘텐츠를 보여주지 않아도 HTML의 로딩된 부분만을 먼저 보여줄 수 있다. 그러나 스크립트의 경우 aync defer 이 없다면 파싱을 막게 된다. 브라우저가 CSS관련 작업을 진행중이라면, 이 작업이 완료될 때 까지 기다렸다가 스크립트를 실행한다. 스크립트가 실행되기 전까지 문서 파싱을 할 수 없기 때문에, CSS는 더이상 렌더링은 차단하는 요소로 작용되지 않는다(하단 그림 참조) 문서의 외부 스타일시트 및 스크립트 순서에 따라서 때로는 HTML 파싱도 중지할 수 있다. 👉 파싱을 차단하는 상황을 피하기 ..