웹에 대한 것들 끄적끄적

Vuex 설치하기 https://vuex.vuejs.org/installation.html 에 나와있는 가이드대로 설치한다. 아래는 터미널에서 설치하는 방법이다. npm install vuex@next --save 또는 yarn add vuex@next --save Vuex 셋팅하기 src 폴더 하위에 store.js 파일을 생성한다. import { createStore } from 'vuex' const store = createStore({ state(){ return { 데이터이름: "데이터", } }, }) export default store main.js에 store.js 파일을 import한다. import store from './store.js' app.use(store).mount("..

mitt 라이브러리 먼 곳에 떨어진 컴포넌트에 데이터를 전송하려고 할 때 이 mitt이라는 외부 라이브러리를 사용하면 쉽게 전송이 가능하다. mitt 설치하기 미리보기하던 서버 종료 후 새 터미널 오픈하여 명령어 실행 npm install mitt 또는 yarn add mitt mitt 라이브러리 셋팅하기 main.js에서 셋팅한다. app.config.globalProperties 란 모든 컴포넌트에서 사용할 수 있는 변수같은 것을 등록할 수 있게 도와주는 일종의 object이다. 글로벌 변수 보관함이라고 생각하면 된다. 이 곳에 자주 쓰는 axios 를 보관하면 편리하다. import하지 않아도 axios.get을 할 수 있다. (다만 this.axios.get 이라고 해야함) import { cre..

VSCode에서 더미 영어 텍스트가 필요한 경우 lorem을 입력하면 자동으로 나오지만 한글은 그런 기능이 없기 때문에 한글입숨 사이트를 이용한다. http://guny.kr/stuff/klorem/ 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 토이프로젝트를 만들다가 여러 장의 사진이 필요한 경우 난감할 때가 있는데 좋은 사이트를 발견하게 되어 기쁘다..!! https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.ph..

탭을 누르면 그 탭에 해당하는 내용을 보여주는 코드를 구현하기 버튼0을 누르면 내용0, 버튼1을 누르면 내용1, 버튼2를 누르면 내용2가 보여진다. tab이란 변수를 만들고 초기값을 0으로 준다. 내용 div에 if문을 사용하고 특정한 숫자일 때 해당하는 내용을 보여주도록 한다. click함수를 만들어 tab의 값을 매긴다. 너무 간단하다. 내용0 내용1 내용2 버튼0 버튼1 버튼2

서버에 데이터 요청하는 방식 GET : 서버에서 데이터를 가져올' 때 사용 POST : 서버로 데이터를 '보낼' 때 사용 GET 또는 POST 요청하면 브라우저가 새로고침 되는데, ajax를 쓰면 새로고침 없이도 GET, POST 요청이 가능하다. ajax 요청하려면 axios 또는 fetch함수를 사용해야하는데 호환성 문제 때문에 axios를 더 많이 사용한다. axios 설치하기 설치 전에 미리보기 하던 터미널 종료 후 새 터미널 오픈 npm install axios 또는 yarn add axios axios로 ajax 요청하기 - GET방식