웹에 대한 것들 끄적끄적

https://ko.vuejs.org/guide/introduction.html 소개 | Vue.js ko.vuejs.org Vue 컴포넌트는 옵션 API와 컴포지션 API 두 가지 스타일로 작성할 수 있다. 옵션 API 옵션의 data, methods, mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의한다. data() 안에 작성된 속성들은 반응적인 상태가 되어 함수 내부에서 this를 붙여줘야한다. 숫자 세기: {{ count }} 컴포지션 API Vue3 버전에 추가된 함수 기반의 API이다. import해서 가져온 API 함수들을 사용한다. SFC(싱글 파일 컴포넌트)에서 컴포지션 API는 일반적으로 숫자 세기: {{ count }} 두 예제는 완전히 동일한 템플릿을 사용하는 동일한 컴포..

view와 component 파일의 포맷은 모두 .vue인데, 어떤건 view 폴더에 들어가고 어떤건 components 폴더에 들어가는지 헷갈려서 찾아봤다. view : 라우터에서 보여주는 컴포넌트 파일들 (ex: 게시판, 마이페이지) component : view에서 import할 컴포넌트들 (ex: 메뉴, 카드뉴스, 위젯같은) 그렇다고한다.

fontawesome 공식문서를 보고 실행하였는데 중간에 살짝 애를 먹어서 작성하는 글 https://fontawesome.com/docs/web/use-with/vue/ Set Up with Vue The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com npm이나 yarn 둘 중 하나를 선택해서 3번까지 설치한다. main.js에 아래 나와있는대로 추가한다. 나는 vuex와 router도 쓰고있어서 이렇게 설정했다. 이제 html에 추가해주면 되는데 Vue.js 탭에서 소스를 복붙하면 ..

setup()이라는 hook 안에 코드를 작성한다. *setup() {} 내에 작성하는건 created() hook 안에 작성하는 것과 비슷함 ref()라는 함수를 import해와서 ref() 안에 데이터를 저장한다. 모든 데이터를 ref()로 감사야 실시간 재렌더링이 가능하다. import { ref } from 'vue' export default { name : '컴포넌트이름', setup(){ let 변수 = ref(); return { 변수 } }, } {{ 데이터이름 }} composition API안에서 Ajax 요청 또는 데이터를 변경하려면 데이터.value = 값; Composition API에서 props 사용하는 방법 setup() 함수 안에 파라미터를 두 개까지 집어넣을 수 있는데,..

PWA은 사실 "웹페이지 홈화면에 바로가기 추가"이다. 그러나 주소창이 제거된.. PWA 라이브러리 설치하기 vue add pwa 이제 따로 무언가 할 필요 없이 npm run build를 할 때 manifest.json과 service-worker.js가 자동으로 생성될 것이다. npm run build를 하면 dist 폴더가 따로 생성되는데 manifest.json : 앱정보를 담는 파일 service-worker.js : 실제 모바일앱은 인터넷 없어도 사용가능한데 그런 기능을 가능하게 만들어주는 역할을 한다. html, css, js, img 파일들을 하드에 저장해놓고 그 파일들을 불러오게 한다. PWA 설정바꾸기 vue.config.js 파일을 프로젝트 폴더 안에 하나 생성한다. 구글의 workb..