전체 글20 Vite + Vue3 + TypeScript 설치하기 1. Vite : webpack과 같은 번들링 도구 2. Vue : vue3의 가장 큰 특징은 option API가 아니라 Composition API를 사용한다는 점이다. 3. TypeScript : compile 단계에서 Error를 잡아주기 때문에 디버깅이나 효율성 측면에서 굉장히 높은 평가를 받고 있다. // npm 6.x 이하 npm create vite@latest —template vue-ts // npm 7.x 이상 npm create vite@latest -- —template vue-ts ** node.js version은 16.x 이상에서 사용해야 한다. 실행 명령어 터미널 창에서 npx vite --port=4000 2023. 1. 8. git first commit 1. github default 브랜치명을 master에서 main으로 변경 github에서 기존에는 master가 기본 브랜치였지만 노예제를 연상한다는 이유로 main 으로 변경되었습니다. 그러나 제 깃허브에서 프로젝트를 생성할 때마다 master가 기본으로 되어있어서 매번 최초 커밋 전에 master 브랜치를 삭제하고 main 브랜치를 생성하는 번거로움이 있어서 default 를 master 에서 main 으로 변경해야게다라는 생각이 들었습니다. 방법은 아래와 같습니다. [그림1-1. default branch 생성방법] [그림1-2. 디폴트 세팅 후 프로젝트를 생성했을 때 main이 브랜치로 생성 됨] 2. 그리고 새로 만든 프로젝트와 vscode를 리모트를 시켜줘야 합니다. git remote a.. 2022. 11. 20. [퍼블리싱] footer 바닥에 두기 이슈 content 영역이 부족한 경우 footer에 {position: relative; bottom:0; }을 줬다 해도, 아래 그림과 같이 footer 가 중간에 붕 뜬다. 이런 경우, body{height: 100%;} 와 content영역에 .wrap {position: relative; height: 100%; min-height: 100%; } #app{height: 100%; } css를 지정해줘야 한다. 2022. 8. 16. [웹접근성] 아이콘 스크린리더기로 읽어주기 헤더에 "검색" 버튼을 삽입했습니다. 비장애인들은 버튼만 보고 검색버튼인지 알 수 있지만 시각장애인들은 스크린리더기를 통해 아이콘을 인식할 수 있습니다. 때문에, 코드에 스크린리더기를 통해 해당 아이콘의 기능을 읽어 줄 수 있도록 span태그등에 글자를 넣어 명시해줘야 합니다. HTML 검색창 열기 span 안에 "검색창 열기"라는 글자는 읽어주는 역할만 하고, 디자인상의 이유로 화면엔 노출이 되면 안되기 때문에 아래와 같이 숨김을 해줍니다. [참고] .icon-area [class*="btn"] 에서 class=*는 .icon-area 클래스 하위 btn이 들어간 모든 클래스명을 의미합니다. CSS .icon-area [class*="btn"] { > span { text-indent: -9999px;.. 2022. 8. 15. 이전 1 2 3 4 5 다음
