Programming/Vue (24) 썸네일형 리스트형 vuepress 구글 서치 콘솔 등록하기 - 구글검색 최적화(SEO) [ 목차 ] 내 사이트가 Netlify에 배포된 이후에도 아직 검색이 안되고 있습니다. 주소가 아니면 아직 접근할 방법이 없네요. 구글에 노출시키는 작업이 필요합니다. 이걸 설정해주는게 구글 서치 콘솔(Google Search Console)입니다. 여기에 등록해주면 구글에서 검색도 되고, 그 외에 모니터링도 가능해집니다. 오늘은 서치 콘솔에 등록하고, sitemap.xml, robots.txt 파일을 적용하는 방법에 대해 알아보겠습니다. 1.구글 서치콘솔 등록 구글 서치콘솔에 로그인한 후 속성 추가를 해 줍니다. [ 속성 유형 선택 ] 다음으로 속성 유형에서 "URL 접두어" 부분으로 가서 추가하고자 하는 URL을 적어주고 "계속" 을 클릭해줍니다. [ 소유권 확인 ] 다음으로 소유권 확인창이 뜹니다... vuepress 1.9.9 버전 시작하기 (태그 기능 달기) Node 18버전에서 vuepress 1.9.9 버전 설치에 오류가 있어서 포기했다가, 다시 Node 16버전으로 낮춰서 설치했습니다. 아직 Beta버전인 2.0.0 보다 오류가 적은 것 같습니다. 설치하니 기본적으로 검색 툴이 활성화되고, Vue 컴포넌트 추가도 components 폴더에 만드니 별다른 설정없이 인식이 됩니다. 그리고 무엇보다도 태그 요소 추가가 너무 쉽게 진행됩니다. Vuepress2로 하려고 시도하며 공부해서인지 금방금방 작성이 되네요. 다시 Vuepress 1으로 재작성해야겠습니다...ㅠㅠ 1. 설치 npm init npm i -D vuepress@next 2. ./docs/README.md 파일 생성 ### Hello Vuepress 3. ./gitignore 파일 생성 node.. Vuepress2에서 vue 컴포넌트 만들어서 등록/사용하기 1. 플러그인 추가 npm i -D @vuepress/plugin-register-components@next 2. .vuepress/config.js파일에 플러그인 추가 import { registerComponentsPlugin } from '@vuepress/plugin-register-components' import { getDirname, path } from '@vuepress/utils' // const __dirname = getDirname(import.meta.url) // 인식 오류시 사용 export default { title:"Hello, Vuepress", plugins: [ registerComponentsPlugin({ componentsDir: path.resolve(_.. Vuepress2 정적 사이트 생성기 시작하기 [ 목차 ] 블로그 같은걸 만들다보니 순수 Vue.js보다는 SSR 또는 정적 사이트 생성기 SSG가 필요하게 되었습니다. React에는 유명한 Gatsby가, 그 이전에 Ruby에는 Jekyll 이라는 정적 사이트가 있었는데, Vue에는 마땅한게 없나 살펴보던 중 Vuepress 라는 걸 알게되었습니다. 오늘은 Vuepress를 이용하여 간단한 블로그를 생성해보겠습니다. Vuepress2 Home | VuePress v2.vuepress.vuejs.org 1. 설치 설치는 npm으로 간단히 아래와 같이 진행하면 됩니다. npm init npm install -D vuepress@next 2. 구성 처음 라이브러리를 설치하면 위 이미지처럼 아무것도 나타나지 않습니다. 여기에 몇가지 수동으로 폴더 및 파일.. 서버리스 앱만들기 - 3.Vue.js 앱 Netlify에 배포하기 서버리스 앱 만들기의 마지막 단원으로 Vue.js 프론트 앱을 배포해보도록 하겠습니다. 1. 앱 만들기 Vue 앱을 만들어줍니다. vue create node_post_vue . // .을 찍으면 현재 폴더에 프로젝트를 생성합니다. vue add router // 곧바로 router 라이브러리를 함께 설치해줍니다. 필요한 라이브러리를 아래와 같이 설치해줍니다. npm i vuex axios 간단히 백엔드에서 보내오는 데이터를 읽어다 표현해주는 것만 할건데도 Store를 구성하고 각 컴포넌트에서 Store state를 이용해야하는게 좀 불편해 보이네요. 그래도 한번만 세팅해놓으면 다음부터는 비교적? 편하게 작업을 할 수 있다고 생각하고 진행하셔요^^;; (1) ./src/main.js import { cr.. 서버리스 앱만들기 - 2.Node 서버(Qoddi)에서 PostgresqlDB(CockroachDB) 데이터 읽어오기 제목이 참 힘드네요... 데이터는 적당히 입력이 되었다고 하면, Node(Express)를 통해서 데이터를 넘겨주는 서버를 만들어보겠습니다. 1 .env 파일 CockroachDB연결정보는 사이트에서 제공하는 connection string을 그대로 붙이는게 편리합니다. 비밀번호도 찾아서 잘 넣어주시구요. PORT=3000 NODE_ENV='development' SECRET=mysecretkeytest COCKROACHDB_CONNECT_URL='postgresql://:@wind-raccoon-4725.8nk.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full' 2. postRoute.js Connection String에 정의된대로 연결하니 오히려 더.. 서버리스 앱만들기 - 1. CockroachDB Serverless 데이터베이스 시작하기 모든 서비스 클라우드에서 구동하기를 해보려고, 이번엔 Database를 찾고 있습니다. 이번에도 역시 무료가 어느정도 가능한 서비스를 찾다보니 CockroachDB라는 것을 찾게 되었습니다. Cockroach Labs, the company building CockroachDB Cockroach Labs, the company building CockroachDB CockroachDB is a distributed database with standard SQL for cloud applications. CockroachDB powers companies like Comcast, Lush, and Bose. www.cockroachlabs.com Cockroach라면 우리말로 바퀴벌레인데요, 단어를 알게.. Vue todolist 만들기 - 8. Backend 연동을 위해 Frontend 수정하기 1. store/store.js 수정 store.js 파일에 url request가 가능하도록 각 기능마다 axios 기능을 추가해줍니다. 아울러, 최초 Load시에는 DB의 정보들을 불러올 수 있도록 onLoad함수를 추가해주었습니다. import { createStore } from 'vuex'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8'; axios.defaults.headers.post['Access-Control-Allow-Origin']='*'; export con.. 이전 1 2 3 다음
